[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 실행, 레이아웃 계산, 페인트 등 렌더링 단계에서 병목이 있단 소리임
Leave a comment