[Refactor] 메인 페이지 최적화

[edhcoding]

✅ 체크 리스트

• 적절한 Title 작성
• 적절한 Label 지정
• Assignee 및 Reviewer 지정
• 로컬 작동 확인
• Merge 되는 브랜치 확인

📝 작업 내용

https://edongdong.tistory.com/242

1. Suspense를 활용한 로딩 상태 관리
- 데이터 페칭 시 fallback UI (사용자 경험 향상)
- 선언형 프로그래밍 (코드 가독성 향상)
 
2. SSR(Server Side Rendering) 적용 (Next.js + Tanstack Query)
- HydrationBoundary 활용 (데이터 일관성 보장)
- 초기 렌더링 시간 개선
- SEO 최적화

3. 코드 스플리팅
- Next.js dynamic import (번들 크기 감소)
- 무거운 크기의 컴포넌트 지연 로딩

4. QueryCache를 통한 상태 관리 개선 (useQuery의 onSuccess, onError 사라졌기 때문)
- 데이터 호출 / 상태 관리 분리 (관심사 분리)

 5. 서버, 클라이언트 에러 처리 관리
- 서버 에러: 404.tsx, _error.tsx
- 클라이언트 에러: ErrorBoundary (선언적 에러 처리)
- 사용자 친화적인 에러 메시지
 
6. 검색 기능 최적화
- 검색값의 상태 변화에 따른 불필요한 리렌더링 문제 해결
- 디바운스(debounce) vs 검색 결과를 한번에 받아 API를 호출할 상태값 하나 더 추가 (검색 상태 분리)
  
7. 이미지 최적화
- png -> WebP 포멧 적용 (높은 호환성과 효율적인 압축률 - 약30% 용량 감소)
- AVIF 포멧 적용 (지원 유무에 따라) (더 높은 압축률 - WebP 대비 약20% 추가 감소)
- 이미지 압축 (사이즈 최적화)
- priority옵션 활용 (중요한 이미지)
- blur 효과 적용 (CLS 개선)

8. +) 추가 성능 개선
- 불필요한 애니메이션 제거
- 불필요한 이미지 제거

📂 결과물

🖥️ 공유 포인트 및 논의 사항

LightHouse 성능 개선
60점 -> 99점

[github-actions]

🪄 Storybook: https://67124aeba8e39ab430227857-zrfauizokf.chromatic.com/
🕖 Update: 2025년 01월 24일 17시 45분 42초