[Week 1] Chrome DevTools로 런타임 성능 측정

[bigmooon]

📋 작업 설명

Chrome DevTools Performance 탭으로 런타임 성능 프로파일링

🎯 체크리스트

측정 설정

• Chrome DevTools 열기 (F12)
• Performance 탭
• CPU 4x slowdown 설정
• Network: Slow 3G

프로파일링

• 메인 페이지 (/) - 로딩 프로파일
• 게스트 페이지 (/guest/:tid) - 로딩 프로파일
• 키워드 선택 (/guest/keyword/:tid) - 상호작용 포함

데이터 수집

• Main Thread 활동 시간
• JavaScript 실행 시간
• Rendering 시간
• 긴 작업(Long Tasks) 식별

문제점 식별

• 불필요한 리렌더링
• 느린 컴포넌트
• 블로킹 스크립트
• 레이아웃 쉬프트 원인

저장

• JSON 프로파일 다운로드
• reports/baseline/performance/ 저장

📊 완료 기준

• 3개 페이지 프로파일링 완료
• 성능 병목 지점 5개 이상 식별

⏱ 예상 시간

2-3시간