[NextJS] 1장 - 시작하기

알찬코·2024년 1월 17일

NextJS

목록 보기

2/20

1. 새 프로젝트 만들기

터미널을 열고, 프로젝트를 보관하려는 폴더에서(cd) 다음 명령을 실행하세요.

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

create-next-app 명령은 Next.js 애플리케이션을 설정하는 CLI(명령줄 인터페이스) 도구를 사용합니다. 이 코스를 위해 위 명령에서는 --example 플래그를 starter-example와 함께 사용하고 있습니다.

2. 프로젝트 탐색

처음부터 코드를 작성하는 튜토리얼과 달리 이 과정의 코드 대부분은 이미 작성되어 있습니다. 이는 기존 코드베이스를 사용하여 작업하게 될 실제 개발을 더 잘 반영합니다.

우리의 목표는 모든 애플리케이션 코드를 작성하지 않고도 Next.js의 주요 기능을 배우는 데 집중할 수 있도록 돕는 것입니다 .

설치 후 코드 편집기에서 프로젝트를 엽니다.

cd nextjs-dashboard

3. 폴더 구조

프로젝트의 폴더 구조는 다음과 같습니다.
learn-folder-structure

/app: 애플리케이션에 대한 모든 경로, 구성 요소 및 논리가 포함되어 있으며 여기서 주로 작업하게 됩니다.
/app/lib: 재사용 가능한 유틸리티 함수, 데이터 가져오기 함수 등 애플리케이션에서 사용되는 함수가 포함되어 있습니다.
/app/ui: 카드, 테이블, 양식 등 애플리케이션의 모든 UI 구성 요소가 포함되어 있습니다. 시간을 절약하기 위해 이러한 구성 요소의 스타일이 미리 지정되어 있습니다.
/public: 이미지와 같은 애플리케이션의 모든 정적 자산을 포함합니다.
/scripts: 이후 장에서 데이터베이스를 채우는 데 사용할 시드(seed) 스크립트가 포함되어 있습니다.
구성 파일: 애플리케이션 루트에 구성 파일 next.config.js도 있습니다 . 이러한 파일의 대부분은 create-next-app을 사용하여 새 프로젝트를 시작할 때 생성되고 사전 구성됩니다. 이 과정에서는 수정할 필요가 없습니다.

4. 자리표시자 데이터

사용자 인터페이스를 구축할 때 일부 자리 표시자 데이터가 있으면 도움이 됩니다. 데이터베이스나 API를 아직 사용할 수 없는 경우 다음을 수행할 수 있습니다.

JSON 형식 또는 JavaScript 개체로 자리 표시자 데이터를 사용합니다.
mockAPI와 같은 타사 서비스 사용

이 프로젝트에서는 app/lib/placeholder-data.js에 몇 가지 자리 표시자 데이터를 제공했습니다. 파일의 각 JavaScript 개체는 데이터베이스의 테이블을 나타냅니다. 예를 들어 송장 테이블의 경우:

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',
  },
  // ...
];

데이터베이스 설정 장에서는 이 데이터를 사용하여 데이터베이스를 시드합니다. (일부 초기 데이터로 채움)

5. 타입스크립트

대부분의 파일에는 .ts 또는 .tsx같은 접미사가 있음을 알 수 있습니다. 이는 프로젝트가 TypeScript로 작성되었기 때문입니다. 우리는 현대 웹 환경을 반영하는 강좌를 만들고 싶었습니다.

TypeScript를 모르더라도 괜찮습니다. 필요한 경우 TypeScript 코드 조각을 제공할 것입니다.

지금은 /app/lib/definitions.ts 파일을 살펴보세요. 여기서는 데이터베이스에서 반환될 유형을 수동으로 정의합니다. 예를 들어 송장 테이블에는 다음과 같은 유형이 있습니다.

export type Invoice = {
  id: string;
  customer_id: string;
  amount: number;
  date: string;
  // 타입스크립트에서, 이것은 string 타입이라고 합니다.
  // "status" 속성은 두 문자열 중 하나만 사용할 수 있음을 의미합니다: 'pending' 또는 'paid'.
  status: 'pending' | 'paid';
};

TypeScript를 사용하면 금액에 숫자 대신 문자열을 전달하는 것과 같이 Invoice 구성 요소나 데이터베이스에 잘못된 데이터 형식을 전달하지 않도록 할 수 있습니다.

5-1. TypeScript 개발자인 경우:

데이터 유형을 수동으로 선언하고 있지만 더 나은 유형 안전성을 위해 Prisma를 권장합니다. 데이터베이스 스키마를 기반으로 유형을 자동으로 생성합니다.
Next.js는 프로젝트에서 TypeScript를 사용하는지 감지하고 필요한 패키지와 구성을 자동으로 설치합니다. Next.js에는 TypeScript 플러그인도 함께 제공됩니다. 코드 편집기의 경우 자동 완성 및 유형 안전성을 지원합니다.