본문으로 건너뛰기

루프공방LoopLab

배우기 카탈로그 도구·모델 AI 질의 자료실 소식 챌린지 공유 방명록

페이지를 불러오는 중입니다.

루프공방

바이브코딩을 해 봤지만 아직 서툰 사람을 위해, 하네스·Skills·MCP·Hooks·실제 도구를 익히고 시행착오를 줄이는 학습 허브

검색 완전 초보 배우기 도구·모델 카탈로그 소식 자료실 챌린지 프로젝트 방명록 로그인

배우기
카탈로그
AI 질의
자료실
챌린지
공유

plugin중급React데이터

TanStack Query

서버 상태 관리

커뮤니티 · React 데이터 레이어 사실상 표준 중 하나

공식 문서 GitHub

무엇을 하나요

fetch 캐시·재시도·무효화. 에이전트가 짜는 데이터 로딩 코드를 안정화.

어떻게 동작하나요

queryKey와 staleTime으로 캐시. 뮤테이션 후 invalidate.

이런 분께

Next/React 데이터 앱.

시작 방법

목록 쿼리 1개 + 로딩/에러 UI.

실전 팁

key 설계 문서화
서버 컴포넌트와 역할 분담
민감 데이터 캐시 주의

이럴 땐 쓰지 마세요

완전 정적 사이트.

주의 (보안·운영)

캐시에 토큰 저장 금지.

막히기 쉬운 지점

전역 refetch 남발.

같이 보면 좋은 항목

Zod — 런타임 스키마 검증
Auth.js / NextAuth — 인증 헬퍼