태그: React Query
3편
-
tRPC: End-to-End 타입 안전 API, 미들웨어·Zod·React Query 통합과 REST 비교
tRPC procedure로 query·mutation·subscription을 정의하고 Router와 Context를 구성한 뒤 인증·로깅 미들웨어, Zod 입출력 검증, React Query 연동과 캐시 무효화, HTTP 배치, WebSocket 구독을 설명합니다. Todo 앱 예제도 담았습니다.
-
tRPC로 서버·클라이언트 타입 공유하기: Router·Procedure, 미들웨어, React Query, App Router, Zod
initTRPC로 진입점을 만들고 Router를 나눴다 합치는 구조, Context와 미들웨어 실행 순서, createTRPCReact와 Provider 구성, 캐시 무효화, Next.js App Router 연동, WebSocket 구독, Zod 검증과 TRPCError 처리까지 순서대로 구현합니다.
-
TanStack Query 캐싱이 실제로 동작하는 방식: staleTime·gcTime, select로 리렌더 줄이기, 커스텀 훅
TanStack Query(React Query)로 서버 상태를 관리하는 방법. 캐싱 동작 원리, useQuery와 useMutation, Optimistic Update, 무한 스크롤과 Prefetch, 커스텀 훅 캡슐화, select와 staleTime으로 리렌더 줄이기를 다룹니다.