[TIL] 23.12.13 Dev-TIL

Dec 13, 2023 | Jun 25, 2024

Ryoon.With.Wisdomtrees

CSS MODULES

CSS Modules allow you to scope CSS to a component by automatically creating unique class names, so you don't have to worry about style collisions as well.

Using the `clsx` library to toggle class names

There may be cases where you may need to conditionally style an element based on state or some other condition.

clsx is a library that lets you toggle class names easily. We recommend taking a look at documentation for more details, but here's the basic usage:

Suppose that you want to create an InvoiceStatus component which accepts status. The status can be 'pending' or 'paid'.

If it's 'paid', you want the color to be green. If it's 'pending', you want the color to be gray.

You can use clsx to conditionally apply the classes, like this:

흠…근데 그냥 `${}`이거로 감싼다음 삼항연산자 사용해도 되는거 아닌가? 훔...

Cumulative Layout Shift

is a metric used by Google to evaluate the performance and user experience of a website. With fonts, layout shift happens when the browser initially renders text in a fallback or system font and then swaps it out for a custom font once it has loaded. This swap can cause the text size, spacing, or layout to change, shifting elements around it

Next.js automatically optimizes fonts in the application when you use the next/font module. It downloads font files at build time and hosts them with your other static assets. This means when a user visits your application, there are no additional network requests for fonts which would impact performance.

Cumulative Layout Shift에대해 좀 더 자세히 알아보자.

있죠… 번번이 deep빡이었던 경험.

좋은 CLS 점수란 무엇인가요?

우수한 사용자 환경을 제공하려면 사이트의 CLS 점수가 0.1 이하여야 합니다. 대부분의 사용자가 이 목표를 달성하도록 하려면 모바일 및 데스크톱 기기로 분류된 페이지 로드의 75번째 백분위수를 측정해 보면 좋습니다.

The `<Link>` component

In Next.js, you can use the <Link /> Component to link between pages in your application. <Link> allows you to do client-side navigation with JavaScript.

Automatic code-splitting and prefetching

To improve the navigation experience, Next.js automatically code splits your application by route segments. This is different from a traditional React SPA, where the browser loads all your application code on initial load.

Splitting code by routes means that pages become isolated. If a certain page throws an error, the rest of the application will still work.

Futhermore, in production, whenever <Link> components appear in the browser's viewport, Next.js automatically prefetches the code for the linked route in the background. By the time the user clicks the link, the code for the destination page will already be loaded in the background, and this is what makes the page transition near-instant!

[TIL] Learn Next.js Fetching Data [TIL] Ryoon-notion-gitBook 개발일지