https://blog.cruru.kr/keywords/tanstack-query/ Recent content in Tanstack Query on 팀 크루루의 개발 이야기 Hugo -- gohugo.io ko-kr Wed, 13 Nov 2024 00:55:00 +0000 https://blog.cruru.kr/docs/frontend/%ED%81%AC%EB%A3%A8%EB%A3%A8-%EC%84%9C%EB%B9%84%EC%8A%A4%EC%9D%98-%EC%9E%90%EB%8F%99-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EB%AC%B8%EC%A0%9C%EC%99%80-tanstack-query-%EC%BA%90%EC%8B%B1-%EC%9D%B4%EC%8A%88-%ED%95%B4%EA%B2%B0%EA%B8%B0--bd8bda7fcc6a49688d5d7f62ffdfb066/ Wed, 13 Nov 2024 00:55:00 +0000 https://blog.cruru.kr/docs/frontend/%ED%81%AC%EB%A3%A8%EB%A3%A8-%EC%84%9C%EB%B9%84%EC%8A%A4%EC%9D%98-%EC%9E%90%EB%8F%99-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EB%AC%B8%EC%A0%9C%EC%99%80-tanstack-query-%EC%BA%90%EC%8B%B1-%EC%9D%B4%EC%8A%88-%ED%95%B4%EA%B2%B0%EA%B8%B0--bd8bda7fcc6a49688d5d7f62ffdfb066/ 이 글은 우아한테크코스 프론트엔드 6기 러기에 의해 작성되었습니다. 이번 스프린트에서 크루루 서비스는 자동 로그인 기능을 구현했습니다. 하지만 정상적으로 동작하지 않았고, 정확한 원인을 파악하기 어려운 상황이었습니다. 클라이언트 측에서 에러가 던져졌으나, 네트워크 요청은 200 응답을 보이는 이상한 현상이 발생했습니다. 서버와 클라이언트 중 어디서 문제가 발생했는지 알 수 없었기 때문에, 여러 방법을 통해 디버깅을 진행했습니다. APIClient를 직접 점검했지만, 별다른 문제는 보이지 않았고, 심지어 에러를 throw하는 코드 주변에 console.log를 추가해도 아무것도 찍히지 않았습니다. 이처럼 이상한 증상을 기반으로 저는 Tanstack Query의 캐싱 메커니즘이 원인이 아닐까 생각했고, Tanstack Query Dev Tool을 활용해 확인한 결과, 예상대로 에러 데이터를 캐싱하고 이후에도 해당 데이터를 재사용하는 것이 문제임을 발견했습니다.