Next.js 튜토리얼 - 1장 시작하기

학습을 시작하며

NextJS 공식 사이트 학습 자료를 통해 공부한다. 어디까지나 예제를 통한 튜토리얼이지만 공식 사이트에서 제공하는 자료이기도 하니 꼼꼼하게 살펴보며 NextJS의 장점을 경험해보고 React와의 차이점은 무엇인지 경험해보려 한다. 물론 상세한 동작 원리나 세부적인 부분에 대해서까지 깊게 살펴보긴 어려울 것 같지만, 해당 부분은 기본적인 틀을 갖춘 이후에 학습할 예정이다.

새 프로젝트 생성

해당 튜토리얼에서는 pnpm 패키지 매니저를 사용한다. yarn이나 npm 패키지에 비해 더 빠르고 효율적이라 pnpm을 활용한다고 한다.

TODO : 패키지 매니저 별 차이점에 대해서 공부할 필요가 있어 보인다.

먼저 pnpm 매니저를 설치한다.

npm install -g pnpm

NextJS 프로젝트를 생성할 경로로 이동 후 다음 명령어를 실행시켜 NextJS 프로젝트를 생성한다.

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

위 코드를 보니 NextJS 개발진이 깃허브에 샘플 예제를 제공하여 학습을 돕고 있는 것 같다. --example 옵션을 통해 우리는 해당 예제를 기반으로 NextJS 프로젝트를 생성할 수 있다.

프로젝트 구조 살펴보기

이 튜토리얼은 처음부터 코드를 작성하지 않고 이미 작성된 코드들을 보면서 작업해야 한다. 그 의도는 기존 코드베이스로 작업할 가능성이 높은 실제 개발 환경을 잘 반영하기 위함이라 한다.

따라서 모든 어플리케이션의 코드를 작성하지 않고도 NextJS의 주요기능을 배우는 데 집중할 수 있도록 한다.

이제 프로젝트로 이동해서 프로젝트를 살펴보겠다.

cd nextjs-dashboard

// 필자는 vscode를 사용한다.
code .

주요 디렉토리들의 역할을 살펴보면,

/app: 어플리케이션에 필요한 라우팅, 컴포넌트, 로직이 포함되어 있다. 주로 여기에서 많은 작업이 진행된다.

/app/lib: 어플리케이션에서 사용되는 함수(재사용 가능한 유틸 함수 혹은 데이터 패칭 함수 등)들이 위치한다.

/app/ui: 모든 UI 컴포넌트(카드, 테이블, 폼 등등)들이 위치한다.

/public: 이미지 같은 모든 정적 애셋 파일들이 위치한다.

Config 파일들: next.config.js 같은 Config 파일들이 어플리케이션 루트 경로에 위치한 것이 보일 텐데, 이 파일들은 create-next-app 을 통해 프로젝트를 생성했을 때 사전에 정의되어(pre-configured) 생성된 파일들이다. 이번 튜토리얼에서는 수정할 일은 없다.

 

 

일단 가볍게 프로젝트 폴더를 살펴봤다. 실제로 모든 요소들이 어떻게 동작하는지 이해가 안되더라도 지금은 걱정할 필요 없다.

플레이스홀더(Placeholder) 데이터

UI를 구축할 때 아직 데이터베이스나 API가 사용가능한 상황이 아니라면, 플레이스홀더 데이터를 통해 도움을 받을 수 있다.

플레이스홀더 데이터는 직접 자바스크립트 객체나 JSON Format 형식으로 만들어도 되지만, MockAPI 같은 서드파티 서비스를 활용해도 좋다.

이번 튜토리얼에서는 이미 플레이스홀더 데이터를 app/lib/placeholder-data.ts 파일에 제공해준다. 내부에 정의된 자바스크립트 객체는 데이터베이스의 테이블을 나타낸다. 예를 들어, invoices 테이블의 경우

const invoices = [
  {
    customer_id: customers[0].id,
    amount: 15795,
    status: 'pending',
    date: '2022-12-06',
  },
  {
    customer_id: customers[1].id,
    amount: 20348,
    status: 'pending',
    date: '2022-11-14',
  },
  // ...
];

위와 같이 형성되어 있다. 이후 ‘6장 데이터베이스 설정’에서 이 데이터를 활용하여 데이터베이스 시드 데이터로 적용할 예정이다.

타입스크립트

해당 튜토리얼은 타입스크립트로 작성되어 있다. 최신 웹 개발 환경을 잘 반영하는 튜토리얼을 만들기 위함이라고 한다.

/app/lib/definitions.ts 파일을 살펴보면, 타입이 정의되어 있는데 해당 타입은 데이터베이스에서 꺼내온 값들의 타입을 정의한 것이다. 위에서 살펴본 invoices 테이블은 어떻게 타입이 정의되어 있는지 살펴보면

export type Invoice = {
  id: string;
  customer_id: string;
  amount: number;
  date: string;
  // In TypeScript, this is called a string union type.
  // It means that the "status" property can only be one of the two strings: 'pending' or 'paid'.
  status: 'pending' | 'paid';
};

타입스크립트는 위 처럼 데이터베이스에서 꺼내온 데이터가 잘못된 타입이 매핑되지 않도록 막을 수 있다.

해당 튜토리얼에서는 타입 안정성을 위해 Prisma나 Drizzle의 사용을 권하고 있다. 수동적으로 데이터 타입을 정의하다보면 실수할 수 있는 부분이 생길 수 있고 생산성이 떨어질 수 있는데, Prisma나 Drizzle의 경우 데이터베이스 스키마에 기반하여 타입을 자동으로 생성해주기에 이런 단점들을 개선할 수 있다고 한다.

TODO: Prisma, Drizzle 학습

개발 서버 실행

먼저 프로젝트에 포함된 패키지를 설치하고

pnpm i

이어서 개발 서버를 실행시킨다.

pnpm dev

pnpm dev 실행 시 3000 포트에서 Next.js 개발 서버를  실행시킨다.

http://localhost:3000 주소를 브라우저에서 열어보면 다음과 같은 화면이 뜨는지 확인해 보자.

마치며

1장에서는 NextJS 프로젝트 프로젝트의 구축 방법과 실행 방법에 대해 다뤄 보았다. 스타터 예제를 제공해서 미리 구축된 프로젝트를 가지고 튜토리얼을 진행한다는 부분이 학습하기 편한 것 같다.

NextJS 공식 사이트 학습 자료를 통해 공부한다. 어디까지나 예제를 통한 튜토리얼이지만 공식 사이트에서 제공하는 자료이기도 하니 꼼꼼하게 살펴보고, 더 상세한 동작 원리나 세부적인 부분에 대해서는 이후에 찾아볼 예정이다.

학습 자료

https://nextjs.org/learn/dashboard-app/getting-started

 

Learn Next.js: Getting Started | Next.js