개요

CachingPage는 @tanstack/react-query를 활용한 데이터 캐싱과 스켈레톤 UI를 구현한 React 컴포넌트입니다. 서버 요청 최적화, 캐시 전략, 로딩 상태 관리, 에러 처리 등 현대적인 웹 애플리케이션의 핵심 기능들을 시연하고 학습할 수 있는 교육용 페이지입니다.

주요 기능

1. React Query 기반 데이터 캐싱

• 라이브러리: @tanstack/react-query 사용
• 캐시 전략: staleTime (30초), gcTime (10분) 설정
• 자동 재시도: 에러 시 최대 2회 재시도
• 백그라운드 업데이트: 캐시된 데이터 표시 후 백그라운드에서 새 데이터 페칭

2. 스켈레톤 UI 구현

• 로딩 상태 시각화: 실제 콘텐츠 구조를 모방한 스켈레톤 UI
• UX 개선: 빈 화면 대신 예상 레이아웃 표시로 체감 대기 시간 단축
• 레이아웃 시프트 방지: 콘텐츠 로드 시 레이아웃 변경 최소화

3. 성능 모니터링

• 실시간 메트릭: 로드 시간, 서버 요청 횟수, 마지막 업데이트 시간 추적
• 캐시 히트 감지: 캐시에서 로드되었는지 서버에서 로드되었는지 구분
• 시각적 피드백: 데이터 소스별 색상 코딩 및 상태 표시

4. 다양한 테스트 기능

• 캐시 테스트: 컴포넌트 재마운트를 통한 캐시 효과 검증
• 에러 시뮬레이션: 네트워크 오류 상황 테스트
• 강제 새로고침: 캐시 무시하고 서버에서 최신 데이터 페칭