프론트엔드
문제 해결을 넘어 - 문제의 근본적인 원인 찾아가기 Part 2
두줄요약
Next.js의 컴포넌트 내부 CSS 임포트와 브라우저 캐시 재사용이 CORS 오류를 일으킨 과정을 분석했습니다. 전역 CSS 임포트 또는 crossorigin 설정으로 문제를 해결했습니다.
문제 상황
- 작품 뷰어에서 브라우저 캐시 사용 시 정주행 모드 옵션 미유지와 swiper/css CORS 에러
- 컴포넌트 내부 CSS 임포트 환경에서 크롬·사파리 중심 재현
원인 분석
- Next.js 전역 CSS 임포트의 단일 압축 방식과 컴포넌트 내부 CSS 임포트의 페이지별 분리 방식 차이
- Client-Side Navigation의 GET Fetch 요청이 buildManifest 기반으로 분리 CSS를 요청하는 구조
- 크롬·사파리의 link 태그 CSS 요청 캐시 재사용 과정에서 CORS 헤더 누락
해결 방법
- swiper/css를 전역 _app.tsx에서 임포트해 추가 GET Fetch 요청 회피
- next.config.js의 crossOrigin: 'anonymous' 설정으로 link 태그 요청에 CORS 적용
적용해볼 점
- 브라우저별 캐시 정책과 리소스 요청 방식까지 포함한 재현 조건 확인
- 단순 해결책 검증과 별개로 프레임워크 빌드·내비게이션·캐시 흐름 추적
