TECH NOTES
기술노트
현장에서 검증된 개발 지식을 기록합니다.
54321
Frontend
긴 목록 렌더링 최적화 — content-visibility와 가상 스크롤 중 무엇을 쓸까
수천 개 항목을 그리는 화면에서 content-visibility, contain-intrinsic-size, 가상 스크롤의 차이를 정리한다. 각 기법이 해결하는 비용의 종류와 접근성·검색·스크롤 위치 문제까지 다룬다.
Frontend
INP 최적화 실전 — FID를 대체한 코어 웹 바이탈, 롱태스크를 쪼개 200ms 벽 넘기
FID를 대체한 INP(Interaction to Next Paint) 실전 최적화 가이드. 롱태스크 쪼개기, scheduler.yield(), React transition, LCP·CLS 동반 개선, RUM 측정과 340→170ms 실전 사례까지 정리했다.
Frontend
scheduler.yield() — 긴 작업을 쪼개 INP를 살리는 법
긴 자바스크립트 작업을 scheduler.yield()로 잘게 쪼개 메인 스레드를 양보하고 INP를 개선하는 법. setTimeout·requestIdleCallback·Web Worker와 무엇이 다른지, 언제 써야 하는지 예제로 정리했다.
Frontend
Web Vitals INP — FID 작별, 응답성 개선 실전 전략
FID를 대체한 INP의 정의·측정·개선. 무엇이 페이지를 "버벅이게" 보이게 하는가, 실제 개선 사례 6가지.
Frontend
Web Performance 2026 — INP 최적화 + Speculation Rules 실전
Core Web Vitals의 INP(Interaction to Next Paint)를 200ms 아래로 끌어내리는 실전 기법 + Speculation Rules로 페이지 전환 0초.