2026 · 09
[배우는 중] 버벅임에 드디어 점수가 붙었다 — INP
Core Web Vitals에서 FID를 밀어낸 새 지표 INP. "눌렀는데 왜 늦게 반응하지"라는 오래된 답답함이, 이제 측정 가능한 숫자가 됐다.
Learning 태그의 글 7개.
Core Web Vitals에서 FID를 밀어낸 새 지표 INP. "눌렀는데 왜 늦게 반응하지"라는 오래된 답답함이, 이제 측정 가능한 숫자가 됐다.
검색 결과를 상태에 담고 useEffect로 다시 계산했더니, 한 박자 늦은 화면이 깜빡였다. effect가 "그 다음 단계"가 아니라는 걸 그때 알았다.
setInterval을 useEffect에 넣었더니 state가 바뀌어도 콜백은 계속 옛날 값만 봤다. "오래된 클로저(stale closure)"에 데이고, 왜 그런지와 빠져나온 길을 남긴다.
API로 받아온 데이터를 useState·전역 스토어에 넣고 직접 동기화하다 매번 꼬였다. "상태에는 세 종류가 있고 서버 상태는 내 것이 아니다"를 배우며, TanStack Query로 넘어간 과정을 남긴다.
막연히 "느리다"를 어떻게 손대야 할지 몰랐다. 구글이 매기는 LCP·INP·CLS 세 지표를 배우고 나니, 성능 작업이 "감"이 아니라 "숫자를 낮추는 일"로 바뀐 과정을 남긴다.
파생 상태를 배우고 나니 "매 렌더 계산, 느리지 않나?" 걱정에 useMemo·useCallback을 반사적으로 다 붙였다. 그게 왜 틀린 접근이었는지, 메모이제이션 3종의 역할과 "언제 쓰나"를 공부하며 이해한 과정을 남긴다.
React를 쓰긴 쓰는데 상태 설계에서 자꾸 꼬였다. 무엇을 state로 두고 무엇을 계산할지, 막혔던 지점과 이해한 과정을 그대로 남긴다.