피드로 돌아가기
Dev.toFrontend
원문 읽기
Vanilla JS에서 Next.js로의 마이그레이션을 통한 데이터 정규화 및 구조적 설계 최적화
How We Migrated Bloom After from Vanilla JS to Next.js + TypeScript
AI 요약
Context
Vanilla JS 기반의 레거시 프론트엔드에서 발생하는 데이터 스키마 불일치와 구조적 제약 사항 해결 필요. 특히 Backend 응답 값의 일관성 부족과 localStorage 기반 인증 방식의 보안 취약점이 주요 병목 지점으로 파악됨.
Technical Solution
- 데이터 일관성 확보를 위한 TypeScript Interface 기반의 Normalisation Layer 구축으로 Backend API 응답값의 타입 안정성 확보
- CSS Class Name 유지 전략을 통한 스타일 중복 작업 제거 및 Visual Regression 방지
- Next.js App Router의 Route Groups 활용으로 조건부 로직 없는 레이아웃 분리 및 공유 구조 설계
- Centralised HTTP Client(api.ts) 구축을 통한 Fetch 로직 단일화 및 API 요청 인터페이스 표준화
- 전용 Wrapper(lifestyle-api.ts) 설계를 통한 Backend 엔드포인트 스코핑 및 관리 효율 증대
실천 포인트
- API 응답 데이터가 불안정한 경우 컴포넌트 진입 전 Normalisation Layer를 통해 데이터 정규화 수행 - 마이그레이션 시 기존 CSS 클래스명을 유지하여 스타일링 재작업 비용 최소화 및 UI 정합성 유지 - 페이지 성격에 따른 Layout 분리가 필요한 경우 Route Groups를 활용하여 선언적 구조 설계 - HTTP 요청 로직을 단일 Client로 캡슐화하여 유지보수성 향상 및 에러 핸들링 일원화