Tanstack Query의 useQuery 캐싱 매커니즘 분석하기

크루루 서비스에서 알 수 없는 에러가 발생했습니다. 조사 결과, 원인은 TanStack Query의 Error 데이터 캐싱으로 판단되었습니다. 이 과정에서 몇 가지 의문이 들었고, 이를 탐구하면서 알게 된 내용을 공유하고자 합니다.❗️ 문제 상황우리 서비스는 TanStack Query의 staleTime을 0으로 설정하여 사용하고 있었습니다. 그러나, 에러가 발생했을 때 여전히 캐싱된 에러 데이터를 사용하고 있었고, 이를 다시 throw하는 동작을 관찰할 수 있었습니다.staleTime이 0이라면 데이터가 즉시 "stale" 상태로 간주되어야 하므로, 새로운 데이터를 요청해야 한다고 생각했지만, 실제 동작은 다르게 이루어졌습니다.❓ 왜 TanStack Query는 Error 데이터를 캐싱할까?TanSta..

• format_list_bulleted React
• · 2024. 11. 21.
• textsms

[디버깅] 크루루 서비스의 자동 로그인 문제와 Tanstack Query 캐싱 이슈 해결기

이번 스프린트에서 크루루 서비스는 자동 로그인 기능을 구현했습니다. 하지만 정상적으로 동작하지 않았고, 정확한 원인을 파악하기 어려운 상황이었습니다. 클라이언트 측에서 에러가 던져졌으나, 네트워크 요청은 200 응답을 보이는 이상한 현상이 발생했습니다. 서버와 클라이언트 중 어디서 문제가 발생했는지 알 수 없었기 때문에, 여러 방법을 통해 디버깅을 진행했습니다. APIClient를 직접 점검했지만, 별다른 문제는 보이지 않았고, 심지어 에러를 throw하는 코드 주변에 console.log를 추가해도 아무것도 찍히지 않았습니다. 이처럼 이상한 증상을 기반으로 저는 Tanstack Query의 캐싱 메커니즘이 원인이 아닐까 생각했습니다. Tanstack Query Dev Tool을 활용해 데이터를  확인한..

• format_list_bulleted React
• · 2024. 11. 13.
• textsms

[React] React Query와 SWR의 차이?

저번 시간 SWR에 대해서 배워봤는데요, 많은 분들이 SWR대신 React Qeury를 사용하더라구요. 분명 더 좋다는 이야기가 많기는 한데, 구체적으로 어떤 차이인지 알아보기 위해서 공식문서를 뒤져가며 그 차이점을 알아보기 위해 노력했습니다. 이전 SWR에 대한 내용은 아래를 참고해주세요! [React] SWR이 무엇인가요? 우선 SWR을 알아보기 앞서 캐시에 대해서 알아보겠습니다. ❓캐시란 무엇인가 캐시는 데이터를 일시적으로 저장하는 메모리를 가리키는 용어입니다. 한 번의 요청에 비용이 큰 경우, 여러 번 요 lurgi.tistory.com 그리고 몇 일간 React Query와 SWR의 차이에 대해서 명확히 하고자 했지만, 제 지식의 한계로는 그 차이를 인지할 수 없었고, 간단한 코드를 작성하는 것..

• format_list_bulleted React
• · 2023. 11. 29.
• textsms