핵심 요약
올리브영이 기획전 페이지를 Next.js로 개편하며 BO에서 생성한 HTML 모듈을 문자열로 렌더링하고, 다수 영역에 기존 상품 카드를 삽입하기 위해 createRoot를 활용한 구현으로 콘텐츠를 표시했다.
구현 방법
- Next.js로 JSP 기반 기획전 시스템을 마이그레이션
- BO 에디터의 HTML/이미지/비디오/쿠폰 모듈을 지원
- HTML 문자열을 dangerouslySetInnerHtml로 주입하되 안전성 검사를 생략
- createRoot로 특정 영역에 React 컴포넌트를 주입하여 상품 카드를 렌더링
- 각 루트에 RecoilRoot와 QueryClientProvider를 래핑해 상태 관리 연결
- Profiler로 성능 영향 확인 및 IOS의 lazy loading 이슈에 대한 대안 고려
주요 결과
- 다중 루트 도입 시에도 기존 컴포넌트에 영향 없이 동작하는 것을 확인
- IOS에서 lazy loading 비활성화로 스크롤/레이아웃 이슈를 완화
- 향후 이미지 lazy loading 도입 및 레이아웃 쉬프트 감소를 위한 최적화 계획
