Next.js 1주차

Об этом предложении

프로젝트 기반과 UI 최적화 개발 서버 실행 https://nextjs.org/learn/dashboard-app 위 교재를 바탕으로 학습을 진행하였다. 1주차 학습 범위는 Chapter 1 ~ Chapter 3이다. pnpm 설치 pnpm은 npm의 디스크 용량 낭비와 속도 저하를 보완한 패키지 매니저이다. npm install -g pnpm 을 사용하여 pnpm을 설치하였다. pnpm을 통해 위 사이트에서 제공하는 starter-example 예제를 복사하였다. 개발 서버 시작 예제를 따라 세팅을 마친 후, pnpm dev 명령어로 개발 서버를 시작했다. localhost:3000 에 개발 서버가 열린다. pnpm dev 는 개발 중 실시간으로 코드를 수정하고 결과를 확인할 수 있는 로컬 개발 서버를 실행하는 명령어이다. pnpm build 는 배포용으로, 실제 서비스 환경에서 배포할 수 있도록 최적화된 결과물을 생성하는 명령어이다. Next.js 구조 프로젝트 폴더의 구조는 대략적으로 아래와 같이 구분할 수 있다. /app /app/ui /app/lib /public /app 애플리케이션의 페이지, UI 구성 요소, 로직 등이 포함되는 폴더이다. Next.js의 라우팅 구조를 구성하는 폴더이므로 주로 해당 폴더에서 작업하게 된다. app/ui 애플리케이션에서 사용되는 UI 구성 요소를 관리하는 폴더이다. 현재 학습용 프로젝트에서 구성 요소들은 미리 스타일링되어 있다. app/lib 애플리케이션에서 사용되는 공통 로직을 관리하는 폴더이다. 데이터 처리 함수, 유틸리티 함수 등 재사용할 수 있는 기능을 관리할 수 있다. /public 이미지 등과 같이 애플리케이션에서 사용하는 정적 데이터를 관하는 폴더이다. 글자 스타일 CSS CSS는 웹 페이지에서 글자색, 크기, 여백 등의 스타일을 지정해주는 언어이다. 클래스를 직접 작성하여 원하는 디자인을 지정할 수 있다. Global CSS를 사용하면 CSS 파일에 규칙을 작성하여 애플리케이션 전체에 스타일을 적용할 수 있다. Tailwind Tailwind는 클래스 이름을 추가하여 요소의 스타일을 지정하는 CSS 프레임워크이다. Tailwind에서 미리 정의한 클래스를 HTML 요소에 조합하여 스타일을 적용할 수 있다. CSS 모듈 CSS 모듈은 고유한 클래스 이름을 자동으로 생성하여 클래스 이름끼리 충돌하는 것을 방지해주는 모듈이다. 작성 방식은 일반 CSS와 거의 동일하며, 파일 이름을 .module.css로 작성한 뒤 컴포넌트에서 불러와 사용할 수 있다. Clsx를 이용한 조건부 클래스 Clsx는 조건에 따라 다른 CSS 클래스를 적용하기 위해 사용하는 라이브러리이다. if문으로 처리해도 전혀 문제되지 않으나, 코드의 간결성을 위해 사용한다. 'Tailwind A': status === 'pending', 'Tailwind B': status === 'paid', 위 코드처럼 작성하면, status가 pending 일 때 Tailwind A, paid 일 때 Tailwind B가 적용되도록 할 수 있다. 웹 폰트 레이아웃 이동 웹사이트에서 특정 폰트를 사용할 때, 웹에서 폰트 파일을 받아와야 한다. 하지만 웹 페이지 로딩과 폰트 로딩은 동시에 끝나지 않는다. 그래서 폰트 적용 전, 대체 폰트로 우선 사이트를 로딩한 뒤 폰트가 적용된다. 그런데 폰트마다 크기가 다르므로 폰트 로딩 후 이미지나 버튼 등이 밀리는 경우가 발생한다. 이렇게 폰트에 의해 주변 요소의 위치가 변하게 되는 것을 레이아웃 이동이라고 한다. CLS (Cumulative Layout Shift) 웹페이지가 로딩되는 동안 발생하는 예상하지 못한 레이아웃 이동의 정도를 나타내는 지표이다. CLS가 낮을수록 예상하지 못한 이동이 낮았다는 뜻이므로, 안정적인 웹페이지라고 볼 수 있다. next/font next/font는 Next.js에서 웹 폰트를 최적화하여 사용할 수 있도록 하는 기능이다. next/font 빌드 시점에 글꼴 파일을 다운로드하여 정적 파일로 불러온다. 글꼴 관련 네트워크 요청이 발생하지 않아 성능 저하가 발생하지 않는다. import { Inter } from 'next/font/google'; 위 코드는 google 폰트 중 Inter을 불러오는 코드이다. const inter = Inter( {subsets: ['latin'], }); 위와 같이 변수에 폰트 스타일을 저장한 뒤, 클래스로 불러와서 쓸 수 있다. 이미지 최적화 일반 이미지 HTML에서는 다음과 같이 이미지를 넣는다. <img src="/hero-desktop.png" alt="Dashboard" /> 이같은 경우는 프로그램에서 이미지의 가로 세로를 모르기 때문에 이미지가 차지할 공간을 미리 알지 못한다. 따라서 사진이 미리 저장되어있지 않다면 CLS가 증가한다. 이외에도 개발자가 이미지 로딩과 최적화를 직접 신경 써야 한다. next/image Next.js 에서는 다음과 같이 이미지를 넣을 수 있다. <Image src="/hero-desktop.png" width={1000} height={760} alt="Dashboard" /> 위 경우는 사진의 너비와 높이를 직접 지정했으므로 예상하지 못한 레이아웃 이동이 발생하지 않는다. 이외에도 WebP/AVIF 같은 효율적인 포맷을 사용할 수 있는 등, 이미지 최적화 기능을 Next.js에서 제공한다. 반응형 이미지 화면의 크기에 따라 이미지를 나타내는 방식이다. 이 방식을 이용해서 모바일과 데스크톱에 표시되는 이미지를 다르게 할 수 있다. className="hidden md:block" 위 코드는 기본적으로 이미지를 숨기고, 화면 크기가 md 이상인 경우에 표시한다. className="block md:hidden" 위 코드는 기본적으로 이미지를 표시하고, 화면 크기가 md 이상인 경우에 숨긴다. 공부하면서 어려웠던 점 CSS 규칙에 대한 부분이 이해가 가장 어려웠다. CSS로 스타일을 직접 지정할 수 있다는 점과, Tailwind는 정해진 틀에 맞춰서 디자인 할 수 있다는 점도 개념적으로는 이해했지만, 실제로 사용하기까지는 더 익숙해질 필요가 있을 것 같다. next/font 또는 next/image 처럼 내부에서 지원하는 기능들도 전부 처음 접해서 어색하긴 했다. 전체적인 코드 구조는 이해하기 쉬웠으나, 디자인에 관한 부분은 전부 처음 접해서 이가 어려운 것 같다. 1주차 학습 후기 처음에는 아예 폴더 구조만 봐도 하나도 모르겠었는데, 지금은 기본적인 틀은 보인다. clsx나 반응형 이미지 구현하는 부분 등은 일반 코딩과 거의 다름없어서 이해하기 쉬웠다. CSS로 디자인을 수정하는 부분은 알아야 할 내용이 아직 많은 것 같으므로 반복해서 사용해보는것이 중요할 것 같다.