문서

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

김민중 컬리 · 컬리 기술 블로그

AI 핵심 요약

컬리 웹프론트팀은 고도몰 기반 레거시에서 벗어나 상품·주문·회원 시스템 개편과 뷰티컬리 등 신규 요구사항을 수용하기 위해 Next.js 기반 NX로 서비스를 전환했다. 상품 상세를 SSR로 재구현해 LCP를 3.4초에서 1.5초로 개선하고, 공통 UI와 PC·모바일 통합 URL을 제공했으며, 상품별로 제각각이던 특수 구현은 스펙을 정리하고 일부를 제외해 복잡성을 낮췄다. 코드 품질을 위해 lint-stage와 정적 분석 규칙을 도입하고, Next.js 빌드 캐싱 및 PR별 성능 테스트도 적용했다. 7개월간 전환을 진행하며 정적 분석 결함 비율을 낮추고 빌드 시간을 단축했으며, 레거시 마이그레이션에는 스펙 정리와 지속적인 품질 관리가 함께 필요하다는 점을 보여준다.

레거시 전환은 코드뿐 아니라 문서화되지 않은 스펙과 예외 동작을 파악하는 작업도 포함한다.
상품별로 흩어진 특수 UI는 공통 스펙으로 정리하고, 유지 비용이 큰 일부 기능은 과감히 스펙아웃할 수 있다.
lint-stage와 팀 컨벤션 기반 ESLint 규칙을 도입하면 코드 스타일 논쟁을 줄이고 리뷰를 핵심 로직에 집중할 수 있다.
Next.js 공식 문서의 CI 빌드 캐싱을 적용해 빌드 시간을 줄이고, PR마다 성능 테스트를 수행해 회귀를 살핀다.

소개

새로운 컬리몰을 만드는 과정을 소개합니다.

비슷한 학습 자료

컨퍼런스 if kakao

Preview Web+Mobile @if(kakao)2021

컨퍼런스 if kakao

if (kakao) 2021 컨퍼런스에서 Data 관련 기술 발표 세션을 소개합니다. 1. 이게 진짜 일 리 없어 : 초보 리더가 프로젝트에서 마주치는 어려운 상황들 @effie.seo 올해 6월에 카카오맵 매장관리 서비스를 오픈했습니다. 매장관리 프로젝트 진행 과정을 통해서 카카오맵 FrontEnd 개발자들은 어떻게 협업하는지, 프로젝트에서 마주쳤던 상황들을 대처 하기 위해서 초보 리더인 제가 동료들과 함께 고민하고 시도했던 과정에 대해서 공유해보고자 합니다 2. Next.js와 Typescript를 이용한 프론트엔드 개발기 @jaden.js @luffy.yeon Next.js를 사용한 서버사이드 랜더링, Next.js 환경 Typescript 포팅을 하며 겪은 경험 공유 3. 톡패스워드 크롬 익스텐션 개발기 @felix.lee 입사 후 처음으로 혼자 프로젝트를 설계하면서 고민했던 구조선택과 고민거리에 대한 공유 4. UI 테스트 경험기 @jay.choi 리팩토링에 대한...

프론트엔드 소프트웨어 테스트 애자일 · 협업