프론트엔드
문제 해결을 넘어 - 문제의 근본적인 원인 찾아가기 Part 1
두줄요약
CORS 에러와 정주행 모드 초기화 문제를 CSS 로딩 방식 변경으로 해결했습니다.\nSSR·ES Module·Dynamic Import의 displayName 손실까지 추적해 근본 원인을 분석했습니다.
문제 상황
- 정주행 모드 활성화 후 이전·다음 화 이동 시 Redux 옵션이 OFF로 초기화되는 현상
- CDN의
swiper/css로딩 중 CORS 에러 동반, 캐시 미사용·로컬 서버 환경에서는 미발생
원인 분석
- 컴포넌트 내부의 클라이언트 조건부
require("swiper/css")방식과 연관된 CORS 에러 - SSR 환경에서 ES Module 전용
swiper/react를 CommonJSrequire로 변환하려는 충돌 - Dynamic Import의 Loadable Component 래핑 과정에서
SwiperSlide의displayName손실
해결 방법
swiper/css를 전역_app.tsx에서 일반import로 로드해 CORS 에러와 옵션 초기화 해소swiper/react는 기존 클라이언트 조건부 로딩 유지, Dynamic Import 적용 시displayName직접 설정transpilePackages로swiper,ssr-window,dom7을 트랜스파일하는 대안 제시
주의할 점
- 동작하는 복잡한 코드에도 SSR 모듈 호환성 같은 구현 의도 존재 가능성
- Dynamic Import 도입 시 라이브러리의 컴포넌트 식별 방식과 래핑 후 속성 보존 여부 점검
