TanStack Query

학습 목표: 서버 상태의 조회·변경·캐시 무효화와 로딩·오류 화면을 연결합니다. 선수 지식: React state·Effect, Promise·fetch, 응답 오류 처리를 먼저 익힙니다. 초급·중급·고급의 목표를 확인하고 현재 공개된 글부터 학습하세요. 빈 단계는 계획을 유지하며 내용을 차례로 보강합니다.

단계별 학습 목표

각 단계의 학습 목표입니다. 공개된 글은 위의 단계별 링크에서 바로 볼 수 있습니다.

초급 목표

서버 상태와 화면 상태의 차이를 익혀, 데이터 요청의 로딩과 오류 및 성공 상태를 사용자에게 전달하는 방법을 다룹니다.

학습 주제

  • 서버 상태와 쿼리
  • 쿼리 키 기초
  • 로딩과 오류 표시

중급 목표

데이터 변경과 목록 탐색을 연결하여, 캐시 갱신과 요청 의존성 때문에 생기는 화면의 불일치를 해결하는 방법을 다룹니다.

학습 주제

  • 변경 요청과 무효화
  • 페이지 탐색과 의존 요청
  • 캐시 수명과 재요청

고급 목표

데이터 일관성과 사용자 경험의 균형을 기준으로, 낙관적 변경과 캐시 경계 및 복구 전략을 설계하는 방법을 다룹니다.

학습 주제

  • 낙관적 변경과 복구
  • 쿼리 키 체계 설계
  • 서버 렌더링과 캐시 경계

TanStack Query 학습 목록

읽음 — / 전체 15개 · 필수 14개

학습 시작

단계 안에서는 학습 순서대로 표시합니다. 선택 참고는 필수 진도에 포함하지 않습니다.

초급 1개

  1. 학습 1 / 12 · 필수 학습

    TanStack Query Provider와 첫 useQuery 상태 처리 실습 가이드

중급 7개

  1. 안내 · 필수 길잡이

    TanStack Query vs Zustand: 서버 상태와 클라이언트 상태 차이

  2. 학습 2 / 12 · 필수 학습

    TanStack Query queryKey 설계 기준: 배열 키로 캐시 구분하기

  3. 학습 3 / 12 · 필수 학습

    TanStack Query queryFn 사용법: 데이터 요청 로직 분리하기

  4. 학습 4 / 12 · 필수 학습

    TanStack Query staleTime gcTime 차이: 캐시 시간 기준

  5. 학습 5 / 12 · 필수 학습

    TanStack Query useMutation 저장 실습: 실패·재시도와 목록 갱신까지

  6. 학습 6 / 12 · 필수 학습

    TanStack Query 페이지네이션 실습: placeholderData로 이전 목록 유지하기

  7. 학습 7 / 12 · 필수 학습

    TanStack Query 무한 스크롤 사용법: useInfiniteQuery로 목록 이어 불러오기

고급 5개

  1. 학습 8 / 12 · 필수 학습

    TanStack Query Todo 실습: 서버 연결·낙관적 업데이트·실패 롤백

  2. 학습 9 / 12 · 필수 학습

    TanStack Query 수동 캐시 정규화: 목록·상세 동기화와 선택 기준

  3. 학습 10 / 12 · 필수 학습

    TanStack Query SSR prefetchQuery: Server Component에서 초기 데이터 준비하기

  4. 학습 11 / 12 · 필수 학습

    TanStack Query HydrationBoundary 사용법: 서버 데이터와 클라이언트 캐시 연결

  5. 학습 12 / 12 · 필수 학습

    Next.js 캐시와 TanStack Query 캐시 차이: 서버·클라이언트 경계 설계

개념·참고 2개

  1. 참고 1 / 2 · 선택 참고

    TanStack Query 화면 갱신 문제 해결: 데이터 변경 후 UI가 바뀌지 않을 때

  2. 참고 2 / 2 · 필수 선수

    TanStack Query Hydration 오류 해결: QueryClient 설정 기준
읽음 기록 설정

읽음 기록은 이 브라우저에만 저장됩니다.

전체 기술 학습 가이드