# CLS

AI HUB 에세이 글 평가 데이터 Bert 예측 모델 만들기(2)
이전 글에 이어서 데이터 전처리와 모델링 과정을 정리하고자 한다. 4. 데이터 전처리 json파일로부터 필요한 데이터를 가져와 train, test에 넣어주었다. 데이터 전처리는 train, test 구분 없이 한번에 처리하기 위해 temp로 합쳤다. 나중에 학습할

좋은 사용자 경험을 위해 CLS(Cumulative Layout Shift) 해결하기
아직도 끝나기 않은 룩북 리스트 페이지 만들기... 이제 하나 빼고 파란불이 들어온다.. 근데 하나가 노란불도 아닌 빨간불... Cumulative Layout Shift 뭔데!Footer 컴포넌트가 lookbooks의 초기 상태인 빈 배열에서 20개의 룩북 리스트를

webVitals 에 대해 알아보자
웹 최적화. 많이 들어봤지만 파고들지는 않았다. 프리온보딩에서 언급되어 한 번 공부해보기로 했다. web vitals는 더 나은 사용자경험을 위해서 구글에서 주요 지표를 측정하기 위한 일종의 기준을 의미한다.여러가지 지표가 있지만 여기선 3가지를 알아보려고 한다.FID
useUser, useSWR, cls
\*\*들어가기1\. front에서 모든 page에서 공통적으로 자주 사용하게 될, useUser hook을 만든다. 로그인된 사람의 정보를 확인하는 hook,useSWR을 이용해서 useUser hook을 완성한다. https://swr.vercel.

React | 이미지 스켈레톤 UI 적용하기 (CLS 개선하기, webvital 점수 개선)
스켈레톤 UI는 서버로부터 데이터를 가져오는 동안, 앞으로 보여질 컨텐츠를 대략적으로 표현하는 UI이다.사용자는 빈 화면을 보며 하염없이 기다리는 것 보다, 스켈레톤 UI 를 통해 지루함을 해소할 수 있다.스켈레톤 UI 는 일반적인 로딩 스피너보다 컨텐츠를 구체적으로

[최적화] 핵심적인 웹 지표(LCP,FID,CLS) 개선하기
🐻 : LCP, FID, CLS 에 대해서도 정리해주신다고 했잖아요! 그리하여 웹 성능 최적화 포스팅의 연장. 웹 성능 최적화 V2 ⚡️ 핵심적인 웹 지표 개선하기.

Node.js 애플리케이션에서 Request ID 추적하기
본 글은 Andrey Pechkurov의 “Request Id Tracing in Node.js Applications” 글을 번역한 것입니다. [Request Id Tracing in Node.js Applicationsarchitecture If you ever w