Front-end 개발자가 회고하는 기획전 개편

간단 소개

올리브영 기획전 개편 과정에서 Next.js 환경에서 HTML 모듈과 기존 컴포넌트 통합 및 성능 최적화에 대한 프론트엔드 개발자의 경험 공유.

AI Summary

기획전 개편 배경 및 목표
- 올리브영 스토어전시 스쿼드에서 기존 JSP 기반 기획전 시스템을 Next.js로 전환하여 개편.
- Back-office(BO)에서 생성한 기획전을 사용자에게 효과적으로 보여주는 것이 목표.
HTML 모듈 렌더링 문제와 해결
- 사용자 정의 HTML 모듈 내에 기존 Next.js 상품 카드 컴포넌트를 삽입하는 것이 핵심 과제.
- createRoot API를 사용하여 DOM 생성 후 컴포넌트를 삽입하는 방식으로 해결.
- RecoilRoot, QueryClientProvider 누락 문제를 createRoot 실행 시마다 감싸는 방식으로 해결.
성능 이슈 분석 및 결론
- createRoot 사용으로 인한 Virtual DOM 증가, QueryClientProvider, RecoilRoot 중복 생성에 따른 성능 이슈 분석.
- Virtual DOM 비교 횟수 증가는 성능에 큰 영향이 없다고 판단.
- Provider 중복 사용은 미미한 메모리 손실만 발생.
- 초기 렌더링 시간은 createRoot 사용 시 컴포넌트 양에 따라 지연 발생 가능성 확인.
- IOS에서 lazy load 이미지로 인해 상품 섹션 위치 계산 오류 발생, IOS에서는 lazy load를 하지 않도록 처리.