목록 보기
새로운 컬리몰 NX를 소개합니다.
프론트엔드

새로운 컬리몰 NX를 소개합니다.

마켓컬리
마켓컬리
2022년 8월 31일

두줄요약

컬리몰 웹프론트팀의 NX 전환 과정을 소개한 글입니다. 레거시를 걷어내며 성능 개선, URL 통합, 코드 품질 강화를 이뤘습니다.

문제 상황

  • 고도몰 기반 레거시 위에 흩어진 상품·주문·회원 스펙과 파편화된 구현 방식 정리 필요
  • 상품상세의 느린 체감 성능과 PC/MOBILE 분리 URL, 일관성 없는 UI 문제 존재
  • 코드와 스펙 히스토리 관리가 부족해 신규 요구사항 반영 시 복잡도와 유지보수 부담 증가

해결 방법

  • Next.js 라이브러리 기반 NX로 주요 서비스를 단계적으로 이관
  • 상품상세를 SSR로 전환해 LCP 개선, 하나의 URL로 PC/MOBILE 처리
  • Lint 규칙과 lint-staged 도입으로 코드 품질 기준을 강제하고 정적결함 축소

성능/운영 포인트

  • Next.js 빌드 캐시 적용으로 빌드 시간을 9분에서 6~7분으로 단축
  • PR마다 상품상세 성능 테스트를 수행해 민감 페이지 품질 점검
  • 반복 안티패턴 공유와 컨벤션 정착으로 코드리뷰 효율 향상

댓글 0

댓글을 작성하려면 로그인이 필요합니다.

댓글을 불러오는 중...