# 프로젝트 환경 설정 ### 코드 에디터 선택 코드 에디터는 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 ``` 위의 명령어를 입력하면 설정에 필요한 몇가지 질문을 받습니다. 이번 강의를 위해서 어떻게 답해야하는지 살펴보죠. `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? ``` #### 함께 사용할 도구 설정 이어서 함께 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`)을 확인해보세요. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://book.hajoeun.dev/friendly-next-js/next.js-2/undefined-1.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.