Trouble Shooting
1.[Tanstack-Query] tanstack-query에서 toast UI로 전역 에러처리 시 캐시 초기화되는 문제 해결
fetch error는 전역에서 잡아 처리하는 게 적절하다. 블로그 예시와 유사하게 Provider로 내려준 toast.error()를 호출하여 에러 메세지를 toast로 띄우도록 처리하였다. 문제는 한번 오류가 발생하면 그 뒤로 애플리케이션이 정상 작동하지 않았다.
2.[Eslint & Prettier] react + typescript 환경에서 Eslint & Prettier 설정
프로젝트를 시작할 때 eslint와 prettier를 함께 맞추고 시작한다. 하지만 모든 룰을 다 맞추더라도 vscode 설정에 따라 사람마다 다르게 적용되는 문제가 발생한다. 다시 볼 수 있도록 정리해보자.
3.[Editor] vscode eslint 자동정렬 안되는 문제 해결
진짜 며칠동안 vscode에서 lint 설정에 따라 vscode 에디터 상에 오류가 안뜨는 문제 때문에 고생했는데 드디어 해결했다. 다른 팀원들은 인식되는 걸 보면 vscode 문제인 걸로 확인되어 고치려고 삽질을 했었는데 그 과정을 공유하려고 한다.
4.[Editor] vscode 버벅임 문제 해결
project 를 여러개 병행하면서 repository를 여러개 클론받아 놨더니 vscode 가 왕창 느려졌다 난 이게 단순히 내 저장공간 문제, 내 맥북 문제 인줄 알았다 (불쌍한 맥북) 근데 렉이 너무 심해졌다 뭐 터미널 타이핑도 늦게 입력되고 문제 해결!
5.[Test] 테스트환경 구축 시 모듈을 못찾는 에러
next에서 테스트 환경 구축을 위해 테스트 라이브러리를 설치 후 여러 설정 을 거친 뒤 테스트 코드 실행해봤는데 아무리해도 위와 같은 오류가 뜬다. 왜 찾을 수 없을까...분명 경로에 있고 로컬에서도 불러와지고 실행도 잘되는데 찾을 수 없다고?
6.[babel] babel-loader로 emotion 스타일링 적용 오류 해결
emotion css prop 을 사용하는데 babel-loader로 빌드가 되지 않는다면?
7.[jest & msw] jest + msw 적용 안되는 문제 해결
jest 에서 msw 가 적용이 안된다면?
8.[Event] 모달 dimmed 영역 클릭 시 안 닫히는 문제 해결
이벤트 리스너는 조심히 등록하기. 전역은 이래서 무서워.
9.[Sentry] 로컬에서 에러 테스트 시 Debug ID가 매칭되지 않는다는 오류 해결
Sentry 로컬에서 에러 테스트 시 Debug ID가 매칭되지 않는다는 오류 해결 (feat. sourceMap)
10.[Tanstack-Query] 쿼리 데이터 캐싱으로 인한 무한 루프 문제 해결
1라운드가 끝난 라운드 통계 화면에서 2라운드 게임을 시작할 때, 게임 화면과 라운드 통계 화면이 서로 라우팅시키며 무한 루프가 돈다.게임 화면 → 라운드 통계 화면 : 게임 화면에서 isFinished 가 true일 경우 라우팅라운드 통계 화면 → 다음 게임 화면 :