TIL 89 - Learn Next.js (1chapter ~ 3chapter)

김영현·2024년 5월 13일

TIL

목록 보기

101/129

Next.js를 배우자!

프론트엔드는 뱌야흐로 대 넥스트의 시대! (라고하기에는 사실 React말고 잘 모르겠다🤔)
그래도 지금까지 훑어본 신입 프론트엔드 조건에 포함되어있는 경우가 절반정도는 됐던 것 같다. 절반 이상일지도?
아무튼 왜 필요하고, 왜 쓰는지. 그 이유는 아직 모른다.

물론 검색하면 나오긴 한다만, 내겐 만들어보며 깨닫는 방식이 더 와닿는다.
공식문서에서도 친절하게 튜토리얼을 제공하니 한번 따라가보자!

What we'll be building

이 포스팅은 Next.js 공식문서의 Learn 탭을 바탕으로 제작되었습니다.

우리가 만들것 은 뭘까? 일단 웹인데, 풀스택 웹사이트를 만들 것이다. 매우 흥미롭다!
그리고 아래와 같은 기능을 배우게 된다.

처음들어보는 용어가 꽤 있지만, 찬찬히 배우다보면 깨닫게 될 것이다!

기존 프로젝트를 수정한다

Next팀에서는 a to z방식의 튜토리얼대신 기존 코드를 수정하는 방식의 튜토리얼을 택했다.
그야 그럴게 실제 업무에 투입되어도 바닥부터 만드는 일은 드물테니까. 남이 작성한 코드를 보고 읽고 수정하는 능력을 길러주겠다는 의미같다.

아래 명령어를 입력하면 빠르게 프로젝트가 생성된다!

npx create-next-app@latest nextjs-dashboard --use-npm --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example"

명령어를 입력한 결과는 아래와 같다.

평범한 React프로젝트와 크게 다를 바 없어보인다.

스타일링을 해보자

이 튜토리얼에서는 3가지 방식의 스타일링을 간략하게 설명해준다. 이 중 tailwind는 알고있으니 넘어가겠음.

CSS 모듈

filename.module.css라는 확장자로 저장하면, css를 모듈로 사용할수 있다.

/*클래스 */
.shape {
  height: 0;
  width: 0;
  border-bottom: 30px solid black;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

위처럼 css파일을 생성한 뒤

import styles from '@/app/ui/home.module.css';

<div className={styles.shape} />

.shape처럼 작성된 클래스 스타일을 온점 표기법으로 사용한다.
css모듈 또한 기존js에서 작성하던 모듈의 장점인 변수명 충돌 방지기능이 있다.
=> 각 클래스 이름이 모듈별 유니크 id로 변경됨.

clsx

살짝 생소하지만, tailwind를 사용할때 유용했다고 들은 적이 있다.
clsx란 클래스 이름을 조건부로 전환할 수 있게 해주는 라이브러리다.

import clsx from 'clsx';
...
<span
      className={clsx(
        'inline-flex items-center rounded-full px-2 py-1 text-xs',
        {
          'bg-gray-100 text-gray-500': status === 'pending',
          'bg-green-500 text-white': status === 'paid',
        },
      )}
>

얼핏 보면 tailwind의 기능과 매우 유사하다.

글꼴 및 이미지 최적화

Next가 뭔지 아직까지는 아리까리하다. 하라는 대로 해보자!

글꼴을 최적화 하는 이유

이미지는 용량이 크니까 최적화를 당연히 해야한다고 생각했다. 하지만 글꼴도 용량이 생각보다 크다!
또한 웹 폰트라고 CDN방식으로 글꼴을 받아오는 경우도 성능에 영향을 미칠 수 있다.

그리고 매우 중요한점은 CSSOM트리를 DOM트리와 결합하여 렌더링 트리를 생성하고 나서야 웹 폰트를 다운한다.
이때 다운로드 속도가 느리다면 글꼴을 아직 사용할 수 없기에 브라우저가 텍스트 픽셀을 렌더링 할 수 없다.
이는 blank text problem(빈 텍스트 문제)를 야기한다! 사용자 관점에서 굉장히 안좋은 일 이겠지?

이를 대체 글꼴로 잠시 보여준다고 해도, 웹 폰트로 교체할때 레이아웃 변경(밀림현상)이 발생한다.

방지하기위한 다양한 최적화 방법은 크롬 개발팀 공식문서에도 자세히 나와있으나, Next.js를 배우고있으니 Next만의 방식을 따라가보자.

Next.js에서 폰트를 최적화한 방법

next/font/google 경로로 접근해서 폰트를 가져오면, 구글의 CDN을 통하여 폰트를 불러올 수 있다.
이때 불러온 웹 폰트를 정적 자산으로 호스팅 한다.
오?

//fonts.ts
import {Inter} from 'next/font/google'

export const inter = Inter({subsets:['latin']})

//layout.ts
import { inter } from './ui/fonts';
...
<body className={`${inter.className} antialiased`}>{children}</body>