피드로 돌아가기
Dev.toFrontend
원문 읽기
Vanilla JS에서 Next.js 기반 Turborepo 구조로의 전면 마이그레이션
Luminary: a NextJS migration story.
AI 요약
Context
단일 HTML 페이지 기반의 Vanilla stack 구조로 인한 로직 공유 불가 및 스타일 일관성 결여 문제 발생. 프로젝트 성장으로 인한 백엔드 통합 복잡도 증가 및 유지보수 효율 저하를 해결하기 위한 현대적 애플리케이션 아키텍처 도입 필요.
Technical Solution
- Turborepo 도입을 통한 Next.js(App Router) 프론트엔드와 Express + Supabase 백엔드의 Monorepo 구조 설계
- DOM 직접 조작 방식의 명령형 코드를 React Composable Component 기반의 선언적 구조로 재설계하여 재사용성 확보
- TanStack Query와 Typed Service Layer를 결합하여 API 통신 로직을 UI 컴포넌트에서 완전히 분리한 관심사 분리 구현
- API 응답과 UI 모델 간의 불일치를 해결하기 위해 단일 Mapper 레이어를 도입하여 데이터 정규화 및 일관된 데이터 쉐이프 유지
- Base UI 기반의 공통 Form Primitive 및 Design System 구축을 통해 입력 폼의 Single Source of Truth 구현
실천 포인트
- API 응답 값과 UI 요구 데이터 형식이 다를 경우, 컴포넌트 내부가 아닌 전용 Mapper 함수를 통해 정규화했는가? - API 통신 로직이 UI 컴포넌트에 직접 구현되지 않고 Service Layer로 추상화되어 있는가? - 반복되는 입력 폼 요소들을 원자 단위의 Primitive 컴포넌트로 분리하여 디자인 시스템에 통합했는가? - Monorepo 환경에서 프론트엔드와 백엔드의 타입 정의가 공유되어 Type-safe한 통신이 이루어지고 있는가?