넥스트리

Growing Together, Creating New Days

Keycloakify : React에서 에러 메시지 동시 노출을 위한 시행착오와 최적화
blog

Keycloakify : React에서 에러 메시지 동시 노출을 위한 시행착오와 최적화

Keycloakify[1]: React에서 에러 메시지 동시 노출을 위한 시행착오와 최적화 1. 배경 기본적인 인증 페이지는 보안상 이유로 혹은 레거시[2] 방식에 따라 한 번에 하나의 에러 메시지만 노출하는 경우가 많습니다. 예를 들어 아이디와 비밀번호를 모두 잘못 입력했더라도 "아이디가 잘못되었습니다"라는 메시지만 먼저 보여주는 식입니다. 하지만 회원가입 절차가 복잡하고
9 min read
Jotai + MMKV로 React Native 상태 관리 및 영속화 구현기 - 한의원 모바일 앱 프로젝트 적용 사례
blog

Jotai + MMKV로 React Native 상태 관리 및 영속화 구현기 - 한의원 모바일 앱 프로젝트 적용 사례

1. 배경 및 기술 선택 이유 React Native(Expo) 기반으로 개발하면서, 인증 상태를 포함한 전역 상태를 안정적으로 관리하고 앱 재시작 시에도 유지해야 하는 요구사항이 있었다. 초기에는 React Context + AsyncStorage 조합을 검토했으나, 두 가지 문제가 있었다. 첫째, Context 기반의 전역 상태는 Provider 중첩이 깊어지면서 관리의 복잡도가 급격히 증가했다. 둘째, AsyncStorage는 비동기
6 min read
전략 패턴을 활용한 파일 암복호화 로직 리팩터링
blog

전략 패턴을 활용한 파일 암복호화 로직 리팩터링

들어가며 최근 프로젝트 내 파일 암호화 솔루션을 기존 DRM에서 새로운 MIP로 전면 교체하는 작업을 진행했습니다. 단순히 모든 파일만 MIP로 처리한다면 간단했겠지만, 과거에 다운로드된 기존 DRM 파일들의 업로드 호환성도 함께 유지해야 하는 것이 요구사항에 있었습니다. 즉 파일 업로드 시 DRM과 MIP라는 두 가지 암복호화 체계가 공존하며 상황에 맞게 동작해야 했습니다. 이러한
5 min read
IA List & UI 가이드 시스템 구축 퍼블리싱
blog

IA List & UI 가이드 시스템 구축 퍼블리싱

넥스트리에 합류한 후 기업 프로젝트에 투입되어 퍼블리싱 인수인계를 받으며 가장 먼저 든 생각은 '만들어진 컴포넌트는 많은데, 왜 개발팀에서 이를 원활하게 활용하지 못할까?' 였습니다. 에이전시에서 여러 프로젝트를 거치며 직관적인 UI 자산 관리의 중요성을 알기에, 당시의 작업 환경은 아쉬움이 컸습니다. 당시 프로젝트는 레포지토리가 존재하긴 했지만, 실제 구현된 화면을 보려면 개별
7 min read
소프트웨어 모델링의 진화
blog

소프트웨어 모델링의 진화

소프트웨어 설계의 단위가 객체(Object) 에서 마이크로서비스(Microservice)로 진화해온 과정은, 단순히 코드를 짜는 방식의 변화를 넘어 '거대하고 복잡한 시스템을 인간이 어떻게 통제할 것인가'에 대한 끊임없는 해법 찾기의 역사였습니다. 이는 작은 벤처 기업이 성장을 거듭하며 글로벌 대기업으로 성장하면서 겪는 조직의 성장과정을 모델링 기술의 발전과정에 비추어 이야기해 보겠습니다.
10 min read
Kubernetes 기반 시스템 점검 페이지 자동 전환 구현
blog

Kubernetes 기반 시스템 점검 페이지 자동 전환 구현

1. 배경 시스템 운영 중 정기·비정기 시스템 점검은 불가피하며, 점검 시간 동안 사용자에게 안내 페이지를 노출해야 하는 요구사항이 있었습니다. 기존 방식은 점검 때마다 운영자가 공지를 하는 것이 다였습니다. 이 과정에서 인적 오류(Human Error)의 위험이 있었습니다. 이를 해결하기 위해 공지사항 등록만으로 점검 페이지 전환부터 원복까지 전 과정을 자동화하는
5 min read
동적 권한 관리
blog

동적 권한 관리

작년 한 프로젝트에서 Admin이 직접 리소스별 접근 권한을 제어할 수 있는 기능을 구현하며 얻은 인사이트를 나누고자 합니다. 서비스 중단 없는 권한 갱신부터 DB 설계까지, 실제 적용 사례를 통해 동적 권한 관리를 어떻게 효율적으로 구현했는지 단계별로 알아보겠습니다. 도메인 설계 - 동적 권한 관리를 위한 DB 구조 먼저, 동적 권한 관리를 적용하기
4 min read
Execution Context
blog

Execution Context

자바스크립트는 싱글 스레드 인터프리터 언어로, 각 브라우저는 자체 자바스크립트 엔진을 사용하여 코드를 스캔하고 해석합니다. 이 과정에서 중요한 역할을 하는 것이 바로 실행 컨텍스트(Execution Context) 입니다. 실행 컨텍스트는 코드의 변환과 실행을 담당하는 환경으로, 실행할 코드에 필요한 모든 정보를 담은 객체라고 할 수 있습니다. 🔎 Execution Context 실행 컨텍스트를 알아야하는 이유? * 자바스크립트를
15 min read
JPA 배치 인서트 vs JDBC배치 인서트
blog

JPA 배치 인서트 vs JDBC배치 인서트

들어가며 저번 게시글 대용량 데이터 등록에서는 JPA(Java Persistence API) 배치 인서트(Batch Insert)를 사용해서 대용량의 데이터를 등록했습니다. 하지만 프로젝트가 진행되면서 추가할 데이터의 수가 점점 더 많아져 홍수가 되었고 시간을 단축할 필요성이 생겼습니다. 그래서 방법을 찾아보니 JDBC(Java Database Connectivity) 를 이용한 배치 인서트 방식이 속도가 빠르다는 것을 알았습니다.
15 min read
GraphQL
blog

GraphQL

1. GraphQL란? 공식 홈페이지에 따르면 GraphQL은 API를 위한 쿼리 언어(Query Language, QL)입니다. SQL이 데이터베이스 시스템에서 데이터를 처리하는 역할을 한다면, GraphQL은 클라이언트와 서버 사이에서 데이터를 처리하는 용도로 사용됩니다. 2. GraphQL vs REST API REST API와 비교했을 때 GraphQL만의 두드러지는 특징은 다음과 같습니다. 1. One Endpoint REST API는 요청 형식(
7 min read
React Hook Form
blog

React Hook Form

프로젝트에서 useForm을 사용하면서 느꼈던 이점과 간단한 사용법, 그 외 React Hook Form의 기본 기능에 대해 공유해 보고자 한다. useForm이란? * 기존사용법 * useForm 사용해보기 Controller * Controller Component * useController 그 외 기능들 * useFieldArray * useFormContext useForm이란? 공식 홈페이지에서는 useForm에 대해 form을 쉽게 관리하기 위한 custom hook이라 설명하고 있다. 단순히 form을 관리한다면 사용자 입력에 대한
14 min read
쿠버네티스(Kubernetes)
blog

쿠버네티스(Kubernetes)

들어가며… 현대 사회에서 웹 애플리케이션은 우리 일상에서 빠질 수 없는 중요한 서비스로 자리 잡았습니다. 소셜 미디어, 온라인 쇼핑, 금융 거래 등 우리가 사용하는 수많은 온라인 서비스들이 웹 애플리케이션을 기반으로 동작하고 있지요. 그러나 이런 웹 애플리케이션들을 개발하고 운영하는 것은 결코 간단한 일이 아닌데요, 이러한 도전적인 상황에서 등장한 쿠버네티스는 웹 애플리케이션의 배포,
18 min read
리액트 상태관리 트렌드의 변화
blog

리액트 상태관리 트렌드의 변화

챗GPT에게 까지 소문난 리액트 상태관리의 악명.. 들어가며  리액트를 사용해 프론트엔드 개발을 하다보면 상태관리에 대한 이야기를 수도 없이 듣게 됩니다. 이는 상태관리가 중요하기뿐만 아니라 그만큼 어렵고 정해진 가이드라인도 없기 때문입니다. 수많은 상태관리 라이브러리가 존재하는 것 자체가 어쩌면 상태관리에 정답은 없다는 것을 보여주는 것일 수도 있습니다.  도대체 상태관리가 무엇이길래 우리들을 힘들게 하는
15 min read
메모리 누수의 개념과 방지 방법
blog

메모리 누수의 개념과 방지 방법

들어가며   이번 글에서는 메모리 누수의 개념과 메모리 누수를 방지할 수 있는 방법에 대해 살펴봅니다. 메모리 관리에 관심을 가지게 된 것은 최근 업무 도중 경험한 오류 때문이었습니다. 현재 넥스트리는 고객사 시스템의 MSA 전환을 위해 레거시 코드를 분석하는 도구를 개발하고 있습니다. 이 도구는 코드 분석을 위해 JGit으로 원격 저장소에 있는 리파지토리를 clone하고,
12 min read
대용량 데이터 등록
blog

대용량 데이터 등록

들어가며  현재 진행하는 프로젝트는 monolithic에 sql mapping으로 구성되어 있습니다. 그래서 .xml에 있는 sql을 파싱(Parsing)하고 메타데이터(MetaData)로 만들어서 저장하는 기능이 필요했습니다.  하지만 문제가 있었습니다. mysql에 물리적으로 입력되는 메타데이터의 로우(row)만 한 개 프로젝트에 5만개가 넘어가는 상황이라 클라우드(Cloud) 환경에서 등록시간이 10분이나 소요되는 것이었습니다. 심지어 추후 분석할 프로젝트에
27 min read
JavaParser
blog

JavaParser

목차 1. 들어가며 2. Parser 3. JavaParser 기능 4. 라이브러리를 사용하며 겪은 문제 및 해결 들어가며 Modular Monolithic 아키텍처 프로젝트에서 메소드 호출 관계를 추출하는 업무를 맡으며 JavaParser를 처음 사용하게 되었습니다. 메소드 호출 관계를 추출하기 위해서는 각 메소드를 식별할 수 있는 식별자가 우선으로 필요했습니다. 메소드 시그니처를 식별자로 설정하고, 메소드 시그니처를 추론하는
19 min read
클린 코드의 기초
blog

클린 코드의 기초

들어가며 좋은 코드란 무엇일까요? 이제 막 개발자로써 첫발을 내딛은 초심자부터 오랫동안 몸담아온 베테랑까지, 좋은 코드를 향한 열망과 고민은 개발자로 존재하는 이상 결코 멈출 수 없는 숙명이 아닐까 합니다. 세상 만사가 그렇듯이 코드 역시 무언가의 '좋음'을 판단하는 기준은 시기와 상황, 혹은 따르는 방법론에 따라 다양하게 정의될 것입니다. 하지만
15 min read
상태 관리 라이브러리 Zustand
blog

상태 관리 라이브러리 Zustand

Zustand는 상태 관리 라이브러리 중 하나로, 작은 패키지 크기와 직관적인 사용법 덕분에 Redux와 Mobx와 더불어 많은 개발자들로부터 선택받고 있습니다. Zustand는 일반적으로 위의 예시 코드처럼 사용합니다. 개발자가 할 일은 State의 타입을 선언하고, create 함수의 파라미터에 함수 형태로 state의 초기값과 state를 변경하는 함수를 선언하는 것뿐입니다. Zustand는 이 코드만으로 자동으로 state를 생성하고 state가
11 min read
React Query
blog

React Query

1. React Query란 React Query는 데이터 Fetching, Caching, 동기화, 서버 데이터 업데이트 등을 쉽게 만들어 주는 라이브러리입니다. React에서 상태를 관리하기 위해 MobX, Redux 등 여러 라이브러리가 존재하지만, 현재 진행중인 프로젝트에서 접하게 된 React Query에 대해 간단히 알아보고자 합니다. 2. React Query의 장점 * MobX나 Redux를 사용하다 보면 BoilerPlate 형태의 코드가 많이
13 min read