컬리몰, Next.js로 갈아타다!
by DD
3년 전
조회수 22
레거시 시스템에서 Next.js 기반의 NX로 전환하여 페이지 로딩 속도 50% 개선
Linter 도입 및 코드 품질 향상 노력으로 정적 분석 결함 90% 감소
CI 빌드 캐싱 적용으로 빌드 시간 20% 단축 및 개발 생산성 향상
레거시 시스템 탈출: NX 아키텍처
기존 고도몰 기반의 컬리몰은 React, Vue, 바닐라 자바스크립트 등 다양한 기술 스택으로 파편화되어 있었다. Next.js 도입을 통해 SSR을 구현하고, LCP 1.5초 달성으로 사용자 경험을 개선했다. 따라서 단일 URL 제공 및 UI 일관성 확보가 가능해졌다.
코드 품질 향상을 위한 노력
Lint rule 추가 및 정적 분석을 통해 코드 품질을 관리했다. Lint-stage를 활용하여 commit 전에 변경된 파일의 정적 분석을 수행했다. 반면, 3대장 error 적용에는 많은 코드 수정이 필요하여 점진적으로 적용했다. 결과적으로 코드 리뷰 효율성을 높였다.
빌드 속도 개선: CI Build Caching
빌드 시간 단축을 위해 Next.js 빌드 결과물 캐싱을 적용했다. Node_module 외에 Next.js 빌드 결과물까지 캐싱하여 빌드 시간을 단축했다. 따라서 9분에서 6-7분으로, 약 20%의 속도 향상을 달성했다. 결과적으로 개발 생산성을 향상시켰다.
