# 프로젝트 환경 설정

### 코드 에디터 선택

코드 에디터는 VSCode를 사용합니다.

### Node.js 설정

Next.js는 [Node.js 16.14](https://nodejs.org/) 이상을 필요로 합니다. 저희는 23년 8월 기준 LTS인 18.17.0을 사용하는 것으로 하겠습니다. Node.js는 노드 버전 관리 도구인 [`NVM`](https://github.com/nvm-sh/nvm/blob/master/README.md)을 사용합니다. 다른 버전 관리 도구를 사용하셔도 무방합니다.

#### 노드 패키지 관리 도구

패키지 관리 도구는 `npm`을 사용합니다. 이 역시 `yarn`이나 `pnpm` 같은 다른 도구를 사용하셔도 무방합니다.

### CLI 사용하기

CLI 도구인 [create-next-app](https://nextjs.org/docs/pages/api-reference/create-next-app)을 사용해서 Next.js를 쉽게 시작할 수 있습니다. 

```bash
npx create-next-app <project-name>
```

위의 명령어를 입력하면 설정에 필요한 몇가지 질문을 받습니다. 이번 강의를 위해서 어떻게 답해야하는지 살펴보죠.

`create-next-app` 설치를 위한 질문이 나오는 경우도 있을텐데 이때는 `y`를 입력하시면 됩니다.

```
Need to install the following packages:
  create-next-app@13.4.13
Ok to proceed? (y) y
```

#### 프로젝트 이름 설정

`create-next-app` 이 정상적으로 실행되면 프로젝트 이름을 묻는 질문이 가장 처음 나옵니다. 지금은 아무 이름이나 입력하셔도 좋습니다.

```
What is your project named?  <project-name>
```

#### 함께 사용할 도구 설정

이어서 함께 TypeScript, ESLint, Tailwind CSS 사용 여부를 묻는 질문이 나옵니다. 앞선 두 가지는 Yes를 그리고 TailwindCSS는 No를 선택해주세요.

```bash
Would you like to use TypeScript?  Yes
Would you like to use ESLint?  Yes
Would you like to use Tailwind CSS?  No
```

#### 디렉토리 설정

다음으로 나오는 질문은 `src` 디렉토리와 App Router 사용 여부를 묻습니다. Yes를 선택합니다.

```bash
Would you like to use `src/` directory?  Yes
Would you like to use App Router? (recommended)  Yes
```

#### import 설정

끝으로 폴더 경로에 사용자 정의 별칭(alias)을 사용 여부를 묻습니다. No를 선택하세요.

### 프로젝트 실행하기

CLI를 통해 필요한 패키지를 모두 설치한 프로젝트 디렉토리로 이동해 아래의 명령어를 입력합니다. 서비스가 정상적으로 준비되면 [https://localhost:3000으로](https://book.hajoeun.dev/friendly-next-js/next.js-2/https:/localhost:3000으로) 이동해 서비스를 확인합니다.

```bash
npm run dev

// - ready started server on [::]:3000, url: http://localhost:3000
```

만약 정상적으로 실행되지 않는다면 Node 버전(`node -v`)을 확인해보세요.&#x20;