1. 캐시 관리 전략 개선

문제

• 단일 레벨 쿼리 키로 인한 데이터 상태 구분 불가
• 불필요한 데이터 갱신으로 네트워크 부하 발생
• 데이터 특성을 고려하지 않은 일괄적인 캐시 정책

학습 (Velog)

TanStack Query의 핵심 원리

• 쿼리 키 계층화
  • 상위/하위 키 관계를 통한 세분화된 캐시 제어
  • 키 무효화 시 하위 키 자동 갱신
• 데이터 신선도 관리
  • staleTime으로 데이터 유효 기간 설정
  • gcTime으로 메모리 사용 최적화
  • refetchInterval로 주기적 갱신 제어

적용

계층적 쿼리 키 구조 설계

typescript
Copy
const queryKeys = {
  rss: {
    list: ["rss", "list"],
    accepted: ["rss", "accepted"],
    rejected: ["rss", "rejected"]
  }
};

• RSS 데이터를 상태별로 독립적으로 관리
• 특정 상태 데이터만 선택적 갱신 가능
• 상위 키(["rss"]) 무효화로 전체 갱신 가능

데이터 특성별 캐시 전략 구현

typescript
Copy
const { data: allData } = useAllChart({
  staleTime: 1000 * 60 * 5,// 5분
  gcTime: 1000 * 60 * 30// 30분
});

const { data: todayData } = useTodayChart({
  staleTime: 1000 * 60,// 1분
  refetchInterval: 1000 * 30// 30초
});

• 변경 빈도가 낮은 전체 차트 데이터에는 긴 staleTime 설정