Skip to content

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

@bigmooon

Description

@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시간

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions