2022 10 28
React Query(리액트 쿼리)를 사용해보자: Queries
상태 관리 라이브러리로 Redux(Redux-saga, Redux-toolkit), Recoil을 사용해왔다. 프로덕트를 릴리즈한 이후에 캐싱에 대한 필요성이 대두되었다. 빈번하게 변경되는 데이터가 아니라면 매번 서버에 요청을 날리는 것보다, 캐싱된 정보를 제공하는 것이 서버의...
2022 10 28
[코어 웹 바이탈 최적화] 프로젝트에서 CLS 개선하기
CLS 메트릭에 좋지 않은 징조가 포착되었다. 크롬 개발자 도구의 Performance 패널에서 확인해보면 Experience 섹션이 생기면서 Layout Shift 레이아웃 이동이 발생하는 구간에 빨간색 블록이 생겼다.
2022 10 28
[코어 웹 바이탈 최적화] CLS 최적화하기
CLS는 뷰포트 내에서 발생한 예기치 않은 레이아웃 이동의 영향분율과 거리율분을 곱한 값이다.
2022 10 28
[코어 웹 바이탈 최적화] CLS(Cumulative Layout Shift, 누적 레이아웃 이동)란?
코어 웹 바이탈의 메트릭에는 LCP, FID, CLS가 있다. 지금까지 LCP, FID에 대해 알아보았고, 마지막으로 CLS에 대해 알아보려 한다.
2022 10 27
[코어 웹 바이탈 최적화] FID 최적화하기
FID(First Input Delay, 최초 입력 지연)은 사용자가 페이지와 처음 상호 작용한 시점부터 브라우저가 실제로 해당 상호 작용에 응답한 시점까지의 시간을 측정한다. 사용자에게 사이트의 첫인상을 제공할 수 있다는 점에서 중요한 메트릭이라 할 수 있다.
