이 글에서 정리하는 내용 TanStack Query Hydration 오류는 서버에서 prefetch한 데이터와 클라이언트 QueryClient가 같은 캐시를 공유하지 못할 때 자주 생깁니다. QueryClient 생성 위치, dehydrate/HydrationBoundary, queryKey 일치, Prov…
더 읽기
TanStack Query 데이터가 바뀌었는데 화면이 갱신되지 않는 이유에서 먼저 확인할 것 TanStack Query 데이터가 바뀌었는데 화면이 갱신되지 않는 이유는 증상만 보고 바로 고치기보다 실행 환경, 설정, 데이터 형태를 나눠 확인해야 합니다. 서버 데이터는 …
더 읽기
TanStack Query v5에서 무한 스크롤을 볼 때 먼저 잡아야 할 기준 무한 스크롤은 화면 아래에 닿으면 다음 데이터를 가져오는 기능처럼 보이지만, 실제 구현에서 먼저 흔들리는 부분은 스크롤 감지가 아니라 다음 요청에 넘길 값입니다. 이 글은 TanStack Q…
더 읽기
이 글에서 정리하는 내용 Zustand를 사용하는 이유를 React 상태 관리 흐름 안에서 정리합니다. 단순히 “Redux보다 쉽다”는 장점 나열이 아니라, 상태가 여러 컴포넌트로 퍼질 때 props, Context, TanStack Query와 어떤 기준으로 역할을 …
더 읽기
이 글에서 정리하는 내용 TanStack Query v5 기준으로 staleTime과 gcTime의 차이를 정리합니다. 캐시가 남아 있는데도 요청이 다시 나가는 이유, v4의 cacheTime이 v5에서 gcTime으로 바뀐 이유, 실제 React 화면에서 두 옵션을 …
더 읽기
주요 포인트 한눈에 보기 TanStack Query에서 queryFn은 단순히 데이터를 가져오는 함수가 아니라, 캐시 계층과 서버 요청 사이를 연결하는 유일한 계약 지점입니다. 이 글에서는…
더 읽기
둘 다 상태를 다루는 도구처럼 보여 API 데이터까지 Zustand에 넣거나, 모달 상태까지 Query로 관리하려는 혼란이 생깁니다. 둘 다 상태를 다루지만 출발점이 다릅니다 TanStack Query와 Zustand는 모두 화면의 값을 다룬다는 점에서 비슷해 보…
더 읽기
프로젝트 개요 이 프로젝트는 실제 서비스 운영을 전제로 설계된 개인 포트폴리오이며, 인증, 사용자 데이터, 장바구니, 포인트, 대시보드, 공통 유틸, 입력 처리 등 반복적으로 사용되는 로직을 모두 Custom Hook으로…
더 읽기