카
카카오엔터테인먼트FE
April 21, 20231회
문제 해결을 넘어 - 문제의 근본적인 원인 찾아가기 Part 2
간단 소개
CORS 에러의 근본 원인을 분석하고, Next.js 환경에서 효과적인 해결 방법을 제시하며, 문제 해결 과정의 가치를 강조합니다.
AI Summary
- CORS 에러 발생 원인 분석
swiper/css를 컴포넌트 내부에서 임포트 시, Next.js의 Client-Side Navigation 과정에서 GET Fetch 요청이 발생하며, 이 요청이 CORS 정책을 따르지 않아 에러 발생.- 일부 브라우저는 link 태그를 통해 가져온 CSS 파일의 캐시를 GET Fetch 요청에 재활용하여 CORS 헤더 누락을 초래.
- 해결 방법
swiper/css를 전역_app.tsx에서 임포트하여 모든 페이지에서 공통으로 활용되는 CSS 파일로 만들어 최초 한 번만 네트워크 요청을 수행.- HTML link 태그에
crossorigin속성을 추가하여 link 태그를 통한 네트워크 요청이 CORS 정책을 따르도록 강제.
- 문제 해결 여정의 가치
- 문제의 근본 원인을 파악하는 과정에서 CORS 정책, Next.js의 Code Splitting 및 Client-Side Navigation 방식에 대한 이해도 향상.
- 평소에 간과하기 쉬운 기술적 측면들을 심층적으로 학습하고, 실제 문제 해결에 적용하는 경험 축적.
Next Feeds
문제 해결을 넘어 - 문제의 근본적인 원인 찾아가기 Part 1
카카오페이지 정주행 모드 오류의 근본 원인을 파악하고 해결하는 과정을 통해 문제 해결 능력 향상의 중요성을 강조합니다.
CORSswiper/reactNext.jsDynamic ImportES Module
2023. 4. 20.
카카오엔터테인먼트FE
문제 해결을 넘어 - 문제의 근본적인 원인 찾아가기 Part 1
카카오페이지 정주행 모드 문제 해결 과정을 통해 문제의 근본적인 원인을 찾고 개선하는 과정을 분석합니다.
CORSswiper/reactNext.jsDynamic ImportdisplayName
2023. 4. 20.
카카오엔터테인먼트FE
쿠키런: 킹덤 길드 업데이트 이후 서비스 이슈 되돌아보기
쿠키런 킹덤 길드 업데이트 후 발생한 DB 이슈와 대응 과정을 분석하고, CockroachDB 운영 시 주의점을 제시합니다.
쿠키런 킹덤CockroachDBHot Range데브옵스장애 대응
2023. 4. 19.
데브시스터즈
티맵 운전점수 만드는 사람들의 운전점수는 몇 점일까? - 티맵모빌리티 인터뷰 1편
티맵 운전점수 서비스 팀 인터뷰: 서비스 소개, 특징, 개선 방향 및 담당자들의 운전점수 공개.
운전점수티맵안전운전사용자 경험고도화
2023. 4. 18.
티맵모빌리티
Janus 를 활용한 WebRTC 기반의 음성대화 서비스 개발
WebRTC와 Janus를 활용한 음성 대화 서비스 개발 과정, MRB 구성, 이슈 해결 방법을 설명합니다.
WebRTCJanus미디어 서버음성 대화MRB
2023. 4. 17.
사람인
GitHub Actions - JavaScript action 만들기
복잡한 Composite action을 JavaScript action으로 개선하고, VS Code GitHub Actions 확장 기능으로 개발 편의성을 높이는 방법을 소개합니다.
GitHub ActionsJavaScript actionComposite actionworkflowVS Code extension
2023. 4. 13.
카카오엔터테인먼트FE