1. 설치하기

1. 사전 준비

• Node.js - v18.0.0 혹은 그이상
• 텍스트 에디터 - Visual Studio Code, 추가 플러그인 Volar Extension
• 터미널 - Nuxt 커맨드 용

 

2. Nuxt 설치

적당한 워크스페이스 디렉토리를 생성한다.

 

터미널을 열고 워크스페이스 디렉토리로 이동 후 아래 명령을 실행한다. VScode 안에 통합되어 있는 터미널을 쓰면 편리하다.

// pnpm
pnpm dlx nuxi@latest init <project-name>

그 다음, 프로젝트 디레토리로 이동한다.

cd <project-name>

3. 의존성 설치

프로젝트 디렉토리로 현재 위치가 이동이 되었으면, nuxi 를 통해 구성된 프로젝트 의존성을 설치하거나, 업데이트 할 수 있다. 간단하게 페이지가 반응하는 것을 살펴보기 위해 sass 의존성을 설치하겠다.

pnpm i sass

 

4. app.vue

nuxi@latest 로 구성된 프로젝트는 기본적인 보일러플레이트 포더 구조 및 코드를 포함하고 있다. 메인페이지인 app.vue 를 아래와 같이 바꾸자.

<template>
  <div>
    Welcome to Nuxt3
  </div>
</template>

아래와 같이 실행하면

npm run dev

화면은 아래와 같다.

5. defineNuxtConfig

자세한 내용은 이 곳을 참조한다.

 

프로젝트 구조가 복잡해지면 의존성 소스들을 임포트하기 위해서 절대경로든 상대경로든 긴 경로를 참조하게 된다. 이를 간단하게 앨리어스로 대체하고, css 적용을 위한 sass 정의를 해보자. nuxt.config.ts 파일을 아래와 같이 수정한다.

 

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
import { resolve } from "path";

export default defineNuxtConfig({
  devtools: { enabled: true },
  alias: {
    "@": resolve(__dirname, '/')
  },
  css: [
      "~/assets/main.scss"
  ]
})

프로젝트 루트 디렉토리에 assets 디렉토리를 만들고 main.scss를 생성한다. main.scss 는 아래와 같다.

 

main.scss

body {
  color: red;
}

 

Nuxt 서버(Nitro) 가 켜져 있는 상태라면 아래와 같이 실시간으로 화면이 변경(글자가 빨간색으로)되는 것을 볼수 있다. 여기서 hmr 은 'Hot Module Replace' 를 뜻하며, 화면에서 변경된 요소만 다시 렌더링 해서 빠르게 변경 사항을 체크할 수 있는 Nuxt 의 중요 기능을 말한다.

터미널 화면은 아래 그림과 비슷할 것이다.

 

간단하게 Nuxt 프로젝트를 구성하는 방법을 살펴보았다. 다음 장에서는 프로젝트 필수 구성요소에 대해 살펴보면서 환경 구성을 좀더 확장하겠다.