NextJS 공식문서 Chapter 1 관련 용어 및 정리

파일 설치

1. pnpm 설치

pnpm은 npm이나 yarn보다 빠르고 효율적인 패키지 매니저로, pnpm이 설치되어 있지 않다면, 다음 명령어를 통해 전역으로 설치할 수 있습니다.

npm install -g pnpm​

2. Next.js 앱 생성

Next.js 애플리케이션을 생성하려면 터미널을 열고 프로젝트를 저장할 폴더로 이동한 후, 다음 명령어를 실행합니다:

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

이 명령어는 create-next-app이라는 CLI 도구를 사용하여 Next.js 애플리케이션을 설정합니다. 위 명령어에서는 --example 플래그를 사용하여 해당 코스의 스타터 예제를 프로젝트에 적용하고, --use-pnpm 플래그를 사용하여 pnpm을 패키지 매니저로 설정합니다.

설치된 파일 구조

파일 구조

 

/app

• 역할: 애플리케이션의 모든 라우트, 컴포넌트, 로직이 포함됩니다.
• 작업: 대부분의 작업이 이 폴더에서 이루어집니다.

/app/lib

• 역할: 재사용 가능한 유틸리티 함수와 데이터 페칭 함수가 포함됩니다.
• 작업: 공통으로 사용되는 함수들을 이곳에 저장하여 코드 중복을 줄입니다.

/app/ui

• 역할: 카드, 테이블, 폼 등 모든 UI 컴포넌트가 포함됩니다.
• 작업: 미리 스타일링된 UI 컴포넌트를 사용하여 빠르게 개발할 수 있습니다.

/public

• 역할: 이미지와 같은 정적 자산들이 포함됩니다.
• 작업: 정적 파일들을 이 폴더에 저장하여 애플리케이션에서 쉽게 참조할 수 있습니다.

Config Files

• 역할: 프로젝트 루트에 위치한 설정 파일들 (예: next.config.js).
• 작업: create-next-app을 사용하여 프로젝트를 시작할 때 대부분의 설정 파일이 생성되고 사전 구성됩니다. 이 코스에서는 이 파일들을 수정할 필요가 없습니다.

Placeholder Data(임시 데이터)

UI를 구축할 때, 데이터베이스나 API가 아직 준비되지 않은 경우에는 임시 데이터를 사용하는 것이 도움이 됩니다. 

Chapter 1에서 제공해준 파일은 /app/lib/placeholder-data.ts 파일에 임시 데이터를 정의하고, 데이터베이스 설정 시 이 데이터를 사용하여 초기 데이터를 입력하여 사용할 수 있도록 해주고 있습니다. 

임시 데이터 사용 방법

1. JSON 형식 또는 JavaScript 객체로 임시 데이터를 사용하기: 임시 데이터를 JSON 형식이나 JavaScript 객체로 정의하여 사용할 수 있습니다.

2. MockAPI 같은 *3rd Party 서비스 사용하기: MockAPI와 같은 서비스를 사용하면 가상의 API를 생성하고 임시 데이터를 제공받을 수 있습니다. 이를 통해 실제 API와 유사한 환경에서 개발을 진행할 수 있습니다.

3rd Party 서비스 :  외부에서 제공하는 다양한 기능을 API 형태로 이용할 수 있게 해주는 서비스로, 이를 통해 개발자는 직접 구현하지 않고도 복잡한 기능을 손쉽게 통합하고 사용할 수 있습니다. MockAPI와 같은 서비스를 사용하면 가상의 API를 생성하여 데이터가 없는 상태에서도 개발과 테스트를 진행할 수 있습니다. Firebase, Auth0, Stripe, Contentful 등 다양한 서비스들이 존재하며, 각각의 서비스는 특정 기능을 제공하여 개발자의 생산성을 높여줍니다.