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

간단 소개

CORS 에러의 근본 원인을 분석하고 해결하는 과정을 통해 얻을 수 있는 개발 지식과 경험의 중요성을 강조합니다.

AI Summary

CORS 에러 발생 원인 분석
- 컴포넌트 내부에서 CSS 파일을 임포트하면 별도의 CSS 파일로 분리되어 Client-Side Navigation 시 GET Fetch 요청을 통해 가져오게 됨
- GET Fetch 요청은 CORS 정책을 따르므로, CORS 정책을 준수하지 않으면 에러 발생
- 일부 브라우저(크롬, 사파리)는 link 태그로 가져온 CSS 파일 요청을 캐싱 후 GET Fetch 요청에서 재활용하여 CORS 에러 유발
해결 방법
- swiper/css를 React 컴포넌트 내부가 아닌 전역 _app.tsx에서 임포트
- HTML link 태그에 crossorigin 속성 추가하여 CORS 정책 준수 강제
문제 해결 과정의 의의
- 문제 해결 과정에서 CORS 정책, SSR 환경, CommonJS와 ES Module, Next.js의 Dynamic Import, Code Splitting, Client-Side Navigation 등에 대한 이해도 향상
- 문제의 근본적인 원인을 찾아가는 과정 자체가 개발자에게 가치 있는 경험 제공