오늘 학습한 것
- CLS (Cumulative Layout Shift)
- Next JS 폰트 최적화
Layout Shift
- 예상치 못한 레이아웃 변경
-구글에 설명 된 Layout Shift 예시-
사용자가 문구를 읽고 버튼을 클릭하려는데
상단에 광고가 뜨며 레이아웃이 밀리고
잘못 된 버튼을 눌러버려 지갑이 탈탈 털리게 된 사례
- 위의 예시처럼 Layout Shift는 UX에 굉장히 치명적인 부분이 있다.
CLS
- 누적 layout shift 횟수
- 페이지의 전체 수명 중 Layout Shift가 발생한 점수를 측정한 것
- CLS 점수 기준은 0.1 이하로 유지하는 것이 좋다.
안정적인 코어웹 바이탈 측정 및 기준점
Next JS에서의 최적화
font 최적화
- Next JS 공식문서 Chapter 3에서 글꼴과
이미지 최적화에 대해 설명한다. - Next JS는 font로 인한 Layout shift를 방지하기 위해
글꼴 파일을 미리 다운로드 하고 static assets 과 함께 호스팅 해서
웹을 방문할 때 글꼴에 대한 추가 네트워크 요청이 없게 한다. - 확인해보니 진짜 google font에 대한 모듈이 다 있다..!
< googlefont 모듈 중 Noto_Sans 부분 >
Next JS의 google font 적용
// font module
import { Noto_Sans } from 'next/font/google'
<layout.js>
// 변수에 할당 subsets에 'korean'
const notoSans = Noto_Sans({ subsets: ['latin'], weight: '300' })
export default function RootLayout({ children }) {
return (
<html lang="en">
{/* 폰트 적용 */}
<body className={notoSans.className}>{children}</body>
</html>
)
}문제 - 폰트 적용원리 이해 못 함
- font Module의 Noto_Sans 함수는 NextFont라는 것을 반환하는데
NextFont는 className과 style 객체를 가진 중첩 객체이다. (style이 정의 된 객체)
export type NextFont = {
className: string;
style: {
fontFamily: string;
fontWeight?: number;
fontStyle?: string;
};
};- notoSans style이 정의된 객체를 HTML요소 body에 적용하는 것이다.
개발자 도구에서 body의 style
.__className_99f504 {
font-family: '__Noto_Sans_99f504', '__Noto_Sans_Fallback_99f504';
font-weight: 300;
font-style: normal;
}NextFont라는 className과 style이 정의 된 객체가
className 속성으로 전달되는데 왜 style이 적용되는 것이지.........?
문제 미해결, 느낀점
- 사실 오늘 학습한 내용이 맞는지 모르겠다.
style={}에style이 정의된 객체를 전달하는 건 아는데,
className에style이 정의 된 객체를 넣어서 어떻게 style이 적용되지..?
그럼 css 어딘가에__className_99f504이 className에 대한
style이 적용되어 있어야 하는데 못 찾았다.
공식문서와 TS로 작성된 함수들에 대한 설명을 읽는데 어려움이 많다.
