전체 글58 500만 건 외부 DB 동기화, 어떻게 무중단으로 할 것인가? 회사에서 기존 Power BI + Excel 기반의 Budget vs Actual 관리 시스템을 웹 애플리케이션으로 전환하는 프로젝트를 맡았다. 가장 까다로운 부분은 데이터 파이프라인이었다. 요구사항 정리이 프로젝트의 핵심은 데이터 적재 파이프라인 구축이었다. 사내에서는 외부 데이터 소스로 Azure SQL Server(읽기 전용) 를 사용하고 있었고, 그중 TMS(Time Management System) 테이블의 약 500+만 건을 우리 시스템으로 가져와 적재해야 했다. 정리하자면 다음과 같다. 1. 500+만 건을 매번 안전하게 갱신할 것 2. 동기화 중에도 사용자 조회가 멈추지 않을 것 3. Azure 측 장애가 기존 운영 데이터를 손상시키지 않을 것 문제 상황처음엔 "그냥 .. 2026. 6. 7. 좋은 컴포넌트 설계 안녕하세요!이번 글에서는 좋은 컴포넌트 설계에 대해서 고민한 흔적들을 공유하고자 합니다. 공통 컴포넌트는 상태를 가지지 말자저는 공통 컴포넌트는 상태를 가지지 않는 것이 좋다고 생각합니다.그 이유는, 공통 컴포넌트는 앱 여러 곳에서 사용되는데, 내부 상태가 있으면 다른 곳에서 동일한 UI를 쓰고 싶을 때 제약이 생깁니다. [Input.tsx] - 개선 전저는 공통 컴포넌트인 Input.tsx를 리팩토링 했습니다. Input에는 다양한 디자인이 존재합니다.검색용 입력창일반 텍스트 입력창비밀번호 입력창비밀번호 확인 입력창 검색, 일반 텍스트, 비밀번호, 비밀번호 확인 입력 기능을 하나의 Input 컴포넌트로 통합하여 처리했습니다. 'use client'import classNames from "c.. 2025. 10. 27. FSD(Feature-Sliced Design) 안녕하세요!이번 글에서는 FSD(Feature-Sliced Design) 로 기존 프로젝트를 리팩토링한 과정에 대해서 공유하고자 합니다. FSD 도입 배경1. 기능 간 의존성이 발생하여, A 기능을 수정하면 B 기능에서 에러가 발생하는 문제 ( 기술 중심의 폴더 구조 ) Next.js를 사용했기 때문에 컴포넌트들은 각 라우터에 맞는 components 폴더에 배치했고,API 로직과 비즈니스 로직은 hooks 폴더에 정리했습니다. sign-in(로그인) 도메인에서 sign-up(회원가입) 기능을 사용하고 있었습니다.그런데 로그인에 맞게 회원가입 기능을 수정하면서, 기존 회원가입에서는 정상적으로 동작하던 기능에 오류가 발생하게 되었습니다. 즉, 한 기능을 수정하면서 다른 기능에 영향을 주어, 기존 회원.. 2025. 10. 27. 레이어드 아키텍처 안녕하세요!이번 글에서는 Layered Architecture(레이어드 아키텍처) 관련해서 고민한 흔적들을 공유하려고 합니다. 레이어드 아키텍처란? 레이어드 아키텍처는 소프트웨어 개발에서 가장 일반적으로 사용되는 아키텍처 패턴 중 하나로, 애플리케이션을 여러 수평적 계층으로 분리하는 방식입니다. 각 계층은 특정 책임을 가지며, 일반적으로 상위 계층은 하위 계층에 의존합니다. 주로 레이어드 아키텍처는 Spring의 MVC 패턴에서 확인할 수 있습니다.Controller 레이어는 HTTP 요청을 받아 처리하고, 클라이언트에 응답을 반환하는 역할을 합니다.Service 레이어는 비즈니스 로직을 관리합니다.Data Access 레이어는 실제 데이터베이스에서 데이터를 CRUD하는 역할을 수행합니다. 이러한.. 2025. 10. 27. useReducer로 리팩토링 안녕하세요! 오늘은 복잡해진 useState 로직을 useReducer로 리팩터링한 경험을 공유해보려고 합니다. useReducer를 사용한 이유? useReducer를 사용한 이유는 크게 두 가지 이유입니다. 여기저기 늘어나는 useState를 하나로 관리하기 위해서 상태 변경 로직을 컴포넌트 밖으로 빼내어 코드 구조를 더 깔끔하게 만들기 위해서 물론 useState만으로도 개발은 가능합니다. 하지만 한 컴포넌트에 useState가 너무 많아지다 보니 관리가 점점 힘들어졌고, 상태 변경 로직까지 모두 안에 넣으니 컴포넌트 자체가 복잡해졌습니다.그 결과, 코드가 잘 읽히지 않고 유지보수하기도 어려워졌습니다. useReducer으로 얻은 성과 먼저 결론부터 말씀드리면, 서로 연관된 상태.. 2025. 9. 1. 로그인 페이지 react-hook-form으로 마이그레이션 안녕하세요!이번 글에서는 로그인 페이지를 react-hook-form으로 리팩토링한 경험을 공유하려고 합니다 react-hook-form 사용한 이유? react-hook-form 라이브러리를 사용한 이유는 크게 두 가지 이유입니다.리렌더링을 최소화하여 성능을 향상시킬 수 있습니다.훨씬 적은 코드로 가독성이 좋아지고 유지보수가 편리해집니다.물론 ref를 이용한 비제어 컴포넌트로도 리렌더링 문제를 해결할 수 있지만,동일한 성능을 유지하면서 더 가독성 높고 유지보수하기 쉬운 코드로 마이그레이션하는 것이 장기적으로 더 유리하다고 판단했습니다. react-hook-form으로 얻은 성과1. 리렌더링 최소화react-hook-form 라이브러리는 기본적으로 비제어 컴포넌트로 동작합니다. 덕분에 입.. 2025. 9. 1. 이전 1 2 3 4 ··· 10 다음
