Creating a new project

• 시키는대로 create-next-app 커맨드 사용해서 프로젝트 생성.

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

  • github에 이미 있는 템플릿을 받아온다.

Exploring the project

• 이미 작성된 코드를 기반으로 진행되는 강좌다. 이게 더 real-world development과도 유사하기도 하고, 강좌의 목표가 모든 코드를 첨부터 혼자서 다 작성하는게 아니라, Next.js의 주요 기능들을 배우는데에 있기 때문에 이런식으로 강의를 구성했다고 한다.
  • 말 되는듯. 좋은데?

Folder structure

• 프로젝트는 이런식의 폴더 구조를 갖고 있다.

  

  • /app: Contains all the routes, components, and logic for your application, this is where you'll be mostly working from.
  • /app/lib: Contains functions used in your application, such as reusable utility functions and data fetching functions.
  • /app/ui: Contains all the UI components for your application, such as cards, tables, and forms. To save time, we've pre-styled these components for you.
  • /public: Contains all the static assets for your application, such as images.
  • /scripts: Contains a seeding script that you'll use to populate your database in a later chapter.
  • Config Files: You'll also notice config files such as next.config.js at the root of your application. Most of these files are created and pre-configured when you start a new project using create-next-app. You will not need to modify them in this course.

Placeholder data

• DB나 API가 아직 준비되지 않은 경우, 다음과 같은 방법을 사용할 수 있다.
  • Use placeholder data in JSON format or as JavaScript objects
  • Use a 3rd party service like mockAPI ⇒ 요거 신기하네. 내 아이디어였는데 이미 있구나 역시. 나중에 한번 써보자. (포트폴리오용 프로젝트에 사용해 봐도 좋을듯)
• 우리 프로젝트에서는 app/lib/placeholder-data.js 파일에서 placeholder data를 제공하고 있다.
  • 나중에 DB를 설정할때, 이 데이터를 이용해서 database를 seed할 것이다. (이것의 의미도 나중에 나온다)

⇒ 개발을 할때 일반적으로 실제 사용할 수 있는 꿀팁이다. mock API 또는 dummy data를 이용해서 UI를 먼저 개발하는 방식.

TypeScript

• 파일들이 대부분 .ts또는 .tsx 확장자를 가진 것을 알 수 있을텐데, 프로젝트가 TS로 쓰여져 있기 때문에 그렇다. 실제로 현대 웹 개발 환경을 최대한 반영한 강의를 만들고자 했다고 한다. (더좋다. 나도 TS를 사용하고 싶었다)

• /app/lib/definitions.ts 파일을 한번 봐보자. 해당 파일은 database에서 가져올 데이터의 타입을 수동적으로 정의하고 있다. 예를들어 invoices table은 다음과 같은 타입을 가진다

  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';
  };
  

  • 이처럼 TS를 사용하면 실수로 잘못된 데이터 포맷을 컴포넌트나 데이터베이스에 전달하는 것을 방지할 수 있다. (e.g. invoice amount에 number대신에 string 값을 입력한다거나)

    <aside> 💡 If you're a TypeScript developer:

    • We're manually declaring the data types, but for better type-safety, we recommend Prisma, which automatically generates types based on your database schema. ⇒ Prisma도 찾아보니 다양한 DB및 DB서비스를 연결하여 사용할 수 있는 ORM이라는데 편해보인다. 나중에 배워보자.
    • Next.js detects if your project uses TypeScript and automatically installs the necessary packages and configuration. Next.js also comes with a TypeScript plugin for your code editor, to help with auto-completion and type-safety. </aside>

Running the development server

• Run npm i to install the project's packages.
• Run npm run dev to start the development server.