문제 해결을 넘어 - 문제의 근본적인 원인 찾아가기 Part 1

간단 소개

카카오페이지 정주행 모드 문제 해결 과정을 통해 문제의 근본적인 원인을 찾고 개선하는 과정을 분석합니다.

AI Summary

문제 발견 및 해결
- 카카오페이지 웹 서비스에서 정주행 모드 옵션 유지 안되는 문제 발생
- CORS 에러와 브라우저 캐시 사용 여부에 따라 문제 발생 여부 달라짐
- CSS 파일을 컴포넌트 내부에서 require로 조건부 로딩하는 방식이 문제 원인임을 파악, import 방식으로 변경하여 해결
근본적인 원인 분석
- 기존 코드의 복잡성은 swiper/react 모듈 로딩 방식과의 일관성 유지를 위함이었음
- swiper/react는 ES Module만 지원하여 서버 사이드 렌더링 환경에서 require 시 에러 발생
- Dynamic Import 사용 시 Next.js의 Loadable Component 래핑 과정에서 displayName 손실되어 swiper/react 기능이 제대로 동작하지 않음
해결 방법 및 결론
- Dynamic Import 사용 시 displayName을 직접 할당하여 문제 해결
- transpilePackages 옵션을 통해 외부 디펜던시를 직접 트랜스파일하여 CommonJS 모듈로 변경하는 방법도 존재
- 기존 코드 구조가 문제 해결에 적합함을 인지하고 swiper/css만 import 방식으로 변경