Ch 02. 첫 번째 Nuxt 3 프로젝트 만들기

환경 준비가 끝났습니다. 이제 실제로 Nuxt 3 프로젝트를 만들어봅니다. Nuxt는 nuxi라는 공식 CLI 도구를 제공하는데, 이것 하나면 프로젝트 생성부터 파일 생성까지 대부분의 작업이 해결됩니다.

nuxi로 프로젝트 생성

터미널을 열고 원하는 위치로 이동한 뒤 아래 명령어를 실행합니다.

npx nuxi@latest init my-nuxt-appcd my-nuxt-appnpm installnpm run dev

npx nuxi@latest init 명령어를 실행하면 패키지 매니저를 선택하는 질문이 나타납니다. 이 교재에서는 npm을 기준으로 진행합니다. 선택 후 잠시 기다리면 기본 파일들이 생성됩니다.

npm install로 의존성을 설치하고, npm run dev로 개발 서버를 시작합니다. 터미널에 아래와 같은 메시지가 나타나면 성공입니다.

Nuxt 3.x.x with Nitro 2.x.x
  ➜ Local:    http://localhost:3000/
  ➜ Network:  http://192.168.x.x:3000/

브라우저에서 확인

브라우저를 열고 http://localhost:3000으로 접속합니다. Nuxt 3 기본 환영 화면이 보이면 프로젝트가 정상적으로 실행된 것입니다.

app.vue 수정해보기

VS Code에서 프로젝트 루트의 app.vue 파일을 열면 다음과 같은 내용이 있습니다.

<!-- 수정: app.vue -->
<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

NuxtWelcome 컴포넌트를 지우고 직접 내용을 작성해봅니다.

<!-- 수정: app.vue -->
<template>
  <div>
    <h1>Hello Nuxt!</h1>
    <p>나의 첫 번째 Nuxt 3 프로젝트입니다.</p>
  </div>
</template>

파일을 저장하는 순간, 브라우저가 자동으로 갱신되며 변경된 내용이 반영됩니다. 이것이 Nuxt의 핫 리로드(HMR, Hot Module Replacement)입니다. 서버를 재시작하지 않아도 코드 변경이 즉시 화면에 반영되므로, 개발 효율이 크게 높아집니다.

개발 서버를 종료하려면 터미널에서 Ctrl+C를 입력합니다.