프론트엔드
새로운 컬리몰 NX를 소개합니다.
두줄요약
고도몰 기반 컬리몰을 Next.js 기반 NX로 전환하며 상품·주문·회원 서비스를 재구축했습니다. SSR, Lint, 빌드 캐시, PR 성능 테스트로 성능과 코드 품질을 개선했습니다.
문제 상황
- 고도몰 기반 레거시와 React·Vue·바닐라 JavaScript 혼재로 인한 개발·유지보수 복잡도
- 상품별 코드 분기와 백오피스 스크립트 의존, 불일치한 스펙 히스토리
- PC·모바일 분리 URL과 페이지별로 다른 인터랙션 UI
해결 방법
- Next.js 기반 NX 프로젝트로 상품·주문·회원 등 대부분 서비스 전환
- 상품 공통 스펙 중심의 상품상세 재구현과 소수 상품 전용 UI 스펙아웃
- 통일된 UI, 단일 반응형 URL, 간결한 경로 체계 적용
성능/운영 포인트
- SSR 기반 상품상세 전환으로 LCP 3.4초에서 1.5초로 단축
- lint-staged와 React·TypeScript Lint 규칙으로 정적 결함 비율 1.76%에서 0.12%로 감소
- Next.js 빌드 결과물 캐싱으로 빌드 시간 9분에서 6~7분 수준으로 단축, PR별 성능 테스트 운영
적용해볼 점
- 레거시 전환 전 코드뿐 아니라 스펙 이력과 예외 UI의 정리 필요성
- 코드 규모 확대 전 정적 분석 규칙과 성능 측정 체계의 조기 도입
