Product — 2022
29CM
레거시 Angular 상품 상세를 React 로 무중단 전환하고, 배포와 웹뷰 성능까지 다시 설계했습니다.
- Company
- 29CM
- Year
- 2022
- Category
- Product
- Services
- React, Next.js, Frontend Architecture, Performance
Overview
29CM 의 핵심 지면인 상품 상세 페이지를 Angular 에서 React 로 옮긴 프로젝트입니다. 프론트엔드 3명이 서비스를 받치던 시기, Angular 채용은 어렵고 2,000줄이 넘는 파일이 흔한 레거시에 배포는 10~15분, 에러 로그도 남지 않던 상황이었습니다.
What I did
- 무중단 전환 — 앱 버전마다 User-Agent 값을 약속하고 nginx 에서 분기해, 구버전 앱은 Angular·신버전 앱은 React 로 연결했습니다. 문제가 생기면 피처 플래그로 바로 Angular 로 되돌릴 수 있게 했습니다.
- 배포 개선 — 설치·빌드·Sentry 소스맵 업로드를 Docker 안으로 옮겨 레이어·이미지 캐시를 쓸 수 있게 했습니다.
- 웹뷰 성능 — 안드로이드 웹뷰 지연을 Sentry 로 추적해, 초기 HTML 을 줄이고 리뷰·Q&A·슬라이더에 지연 로딩, 웹뷰에서 쓰지 않는 메뉴·푸터와 CLS 에 영향이 큰 컴포넌트에 Dynamic Import 를 적용했습니다.
Impact
- Lighthouse 성능 점수 72 → 92
- 배포 시간 10분 → 3분 내외 (캐시가 있을 때)
- 웹뷰 스크립트 실행 6,940ms → 5,903ms (CPU 6배 감속 기준)
