기획전 상세 페이지 구현 문제 해결

올리브영의 기획전 시스템을 Next.js로 개편하는 과정에서 기획전 상세 페이지 구현 시 직면한 문제와 해결 방법에 대해 설명한다.

기획전의 요구사항

기획전은 특정 테마에 맞춰 상품을 특별 가격에 제공하는 페이지로, 다양한 모듈을 통해 생성된다.

렌더링 방식과 고려사항

HTML과 CSS 모듈을 react의 dangerouslySetInnerHtml을 사용해 DOM에 삽입하는 방식으로, XSS 공격에 대한 우려가 있었으나 BO에서 신뢰할 수 있는 데이터로 판단했다.

문제 해결 방법

• createRoot를 사용해 생성된 DOM에 기존 상품 카드 컴포넌트를 삽입하였다.
• Recoil과 react-query의 상태 관리를 위해 각 createRoot 호출 시 RecoilRoot와 QueryClientProvider로 감싸는 방법을 선택했다.

성능 분석 결과, 여러 개의 Virtual DOM 생성은 성능에 큰 영향을 미치지 않음을 확인하였고, 메모리 사용량도 무시할 수 있는 수준이었다.