올리브영 기획전 개편, Next.js와 createRoot로 렌더링 최적화 도전!
by DD
1년 전
조회수 14
Next.js 기반 기획전 페이지 개편 과정에서 createRoot를 활용하여 동적 컴포넌트 삽입 시도
dangerouslySetInnerHtml 사용으로 인한 XSS 공격 위험과 성능 저하 가능성 직면
IOS 환경에서 lazy load 문제 해결을 위해 이미지 로딩 방식 변경 및 Lighthouse 점수 개선 노력
createRoot를 활용한 동적 컴포넌트 렌더링
기존 JSP 기반 기획전을 Next.js로 전환하며, createRoot를 사용하여 동적으로 생성된 HTML 내에 React 컴포넌트를 삽입했다. 구체적으로, dangerouslySetInnerHtml로 HTML을 삽입한 후, useEffect를 통해 createRoot로 컴포넌트를 렌더링했다. 따라서, 기존 컴포넌트 재사용성을 확보하고, 유연한 페이지 구성을 가능하게 했다.
성능 최적화: createRoot 사용의 트레이드오프
createRoot 사용은 여러 개의 Virtual DOM을 생성하여 성능 저하를 야기할 수 있다. 반면, React.Profiler를 통해 확인한 결과, DOM 업데이트 횟수 증가는 없었다. 따라서, createRoot 사용으로 인한 성능 저하는 미미했다. 하지만, createRoot를 통한 컴포넌트 렌더링은 초기 렌더링 시간을 증가시키는 트레이드오프를 발생시켰다.
iOS 환경에서의 이미지 Lazy Load 문제 해결
IOS 환경에서 lazy load와 window.scrollTo 사용 시, 상품 보러 가기 버튼 클릭 후 의도치 않은 위치로 이동하는 문제가 발생했다. 구체적으로, 이미지 크기가 동적으로 결정되어 레이아웃 시프트가 발생했다. 따라서, lazy load를 포기하고, 이미지 로딩 방식을 변경하여 문제를 해결했다.
