사전 요구사항
- 웹 개발 기초
- 브라우저 개발자 도구 사용 경험
- Claude Code 기본 사용법
학습 목표
- 성능 병목 지점을 식별하고 측정하기
- 프론트엔드 최적화 기법 적용하기
- 백엔드 쿼리 및 API 성능 개선하기
- 번들 크기 최적화 및 로딩 속도 향상하기
성능 측정 및 프로파일링
Chrome DevTools와 Lighthouse를 사용하여 성능을 측정하고 분석합니다.
plaintext
# Claude에게 요청:
"웹 앱의 성능을 측정하고 싶어.
Lighthouse 리포트를 어떻게 해석하고,
어떤 지표들을 우선적으로 개선해야 하는지 알려줘.
현재 지표:
- FCP: 2.5s
- LCP: 4.2s
- TBT: 450ms
- CLS: 0.15"
# Claude가 설명:
# - 각 지표의 의미
# - 권장 기준값
# - 우선순위
# - 개선 방법참고사항
- •실제 사용자 환경에서 측정하세요 (느린 네트워크, 모바일)
- •Core Web Vitals에 집중하세요 (LCP, FID, CLS)
- •정기적으로 성능을 모니터링하세요