카
카카오엔터테인먼트FE
April 20, 20231회
문제 해결을 넘어 - 문제의 근본적인 원인 찾아가기 Part 1
간단 소개
카카오페이지 정주행 모드 오류의 근본 원인을 파악하고 해결하는 과정을 통해 문제 해결 능력 향상의 중요성을 강조합니다.
AI Summary
- 문제 발견 및 해결 시도
- 카카오페이지 웹 서비스에서 정주행 모드 옵션 유지 안되는 문제 발생, CORS 에러 동반.
- CSS preload 제거 시도 실패, CSS 파일 import 방식 변경으로 문제 해결 (require -> import).
- 문제의 근본 원인 분석
- swiper/react 모듈이 ES Module만 지원, Next.js 서버 환경에서 CommonJS 방식으로 require 시 에러 발생.
- Dynamic Import 사용 시 Next.js에서 displayName 손실, swiper/react 기능 오류 유발. displayName 직접 할당으로 해결.
- 최종 결론 및 추가 해결책
- 기존 코드 구조가 문제 해결에 최적화되어 있음을 확인, swiper/css만 import 방식으로 변경하고 swiper/react는 기존 방식 유지.
- Next.js의 transpilePackages 옵션을 사용하여 swiper/react 모듈을 CommonJS 방식으로 트랜스파일하는 방법 제시.
Next Feeds
쿠키런: 킹덤 길드 업데이트 이후 서비스 이슈 되돌아보기
쿠키런 킹덤 길드 업데이트 후 발생한 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 만들기
GitHub Actions에서 복잡한 조건문을 Map 형태로 리팩터링하고 JavaScript 액션을 구현하여 효율적인 워크플로우를 구축하는 방법을 설명합니다.
GitHub ActionsJavaScriptComposite actionMap리팩터링
2023. 4. 13.
카카오엔터테인먼트FE
GitHub Actions - JavaScript action 만들기
복잡한 Composite action을 JavaScript action으로 개선하고, VS Code GitHub Actions 확장 기능으로 개발 편의성을 높이는 방법을 소개합니다.
GitHub ActionsJavaScript actionComposite actionworkflowVS Code extension
2023. 4. 13.
카카오엔터테인먼트FE
뷰티 필터를 개발하며 얻은 새로운 경험
컬리 뷰티 필터 개발 경험 공유: React Query 도입을 통해 고객 경험 개선, 기술적 효율성 증대, 팀 문화 발전에 기여한 여정을 담았습니다.
뷰티컬리필터프로젝트React Query데이터관리고객경험
2023. 4. 12.
컬리