[250715] TIL

Today I Learned (2025-07-15)

최적화 진행하면서 정리한 내용은 블로그에 작성해야겠다.

vscode Debugger

  • 설정 파일만 설정하면 c++에서 했던 것처럼 디버깅 가능
  • https://youtu.be/l8knG0BPr-o?si=NWtn4kJwtvqK4FA2&t=412

React Profiler

  • profiler 탭에서 오래 걸린 컴포넌트 찾아 볼 수 있음
  • 컴포넌트 탭에서는 props, 에러, 로딩중일때 상태 바꿔서 테스트도 가능

lightHouse

TTFB

  • Time to First Byte
  • 서버가 사용자의 요청을 받고, 첫 번째 바이트를 브라우저에 보내기까지 걸리는 시간

Load Delay

  • LCP 요소 요청이 실제로 시작되기 전까지의 대기 시간
  • JS/CSS가 많거나, 렌더링 차단 리소스가 있거나, 우선순위가 낮게 잡혀있을 때 발생.

Load Time

  • LCP 리소스가 네트워크를 통해 다운로드 되는데 걸린 시간
  • 리소스 크기 생각

Render Delay

  • LCP 리소스를 다 받고 나서 실제로 화면에 그려질 때까지 걸리는 시간
  • 이 시간이 길면 JS 실행, 레이아웃 계산, 페인트 등 렌더링 단계에서 병목이 있단 소리임

Categories:

Updated:

Leave a comment