[Nuxt] Nuxt 2 설치 및 실행

💻 Nuxt 2 설치 및 실행 가이드

Nuxt.js는 Vue.js를 기반으로 한 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성, 그리고 훨씬 더 많은 기능들을 제공합니다. 이번 포스트에서는 Nuxt 2를 설치하고 실행하는 과정을 단계별로 알아보겠습니다.

---

🌟 1. 프로젝트 생성

먼저, 새로운 Nuxt.js 프로젝트를 생성합니다. 이를 위해 터미널을 열고 아래 명령어를 실행하세요:

npx create-nuxt-app <project-name>

명령어를 입력하면 몇 가지 설정을 선택해야 합니다. 예시로 진행해볼게요:

1. Project name: my-nuxt-app
2. Programming language: JavaScript
3. Package manager: Npm
4. UI framework: None
5. Nuxt.js modules: Axios
6. Linting tools: ESLint
7. Testing framework: None
8. Rendering mode: Single Page App
9. Deployment target: Server (Node.js hosting)
10. Development tools: jsconfig.json (Recommended for VS Code)

이 설정들은 기본 예시이며, 자신의 필요에 따라 선택할 수 있습니다.

---

🚀 2. 프로젝트 디렉토리로 이동

프로젝트가 생성되면, 생성된 디렉토리로 이동합니다:

cd my-nuxt-app

---

🛠 3. 프로젝트 실행

Nuxt 개발 서버를 시작하여 프로젝트를 실행합니다. 아래 명령어를 입력하세요:

npm run dev

이제 브라우저에서 http://localhost:3000을 열면 Nuxt 애플리케이션이 실행된 것을 확인할 수 있습니다!

---

📁 4. 프로젝트 구조

Nuxt.js 프로젝트의 기본 구조는 다음과 같습니다:

• assets: 이미지, CSS 파일 등 정적 자산을 저장합니다.
• components: Vue.js 컴포넌트를 저장합니다.
• layouts: 애플리케이션의 레이아웃을 정의합니다.
• pages: 애플리케이션의 각 페이지를 정의합니다.
• plugins: Vue.js 플러그인을 저장합니다.
• static: 정적 파일들을 저장합니다.
• store: Vuex 상태 관리를 설정합니다.

---

📦 5. 추가 패키지 설치

Nuxt 프로젝트에서 필요한 추가 패키지를 설치할 수 있습니다. 예를 들어, Sass를 사용하고 싶다면 다음과 같이 설치할 수 있습니다:

npm install --save-dev sass sass-loader@10 fibers

nuxt.config.js 파일을 수정하여 Sass를 설정할 수도 있습니다:

build: {
  loaders: {
    scss: {
      implementation: require('sass'),
      sassOptions: {
        fiber: require('fibers')
      }
    }
  }
}

---

📌 정리

Nuxt 2 설치 및 실행 과정은 다음과 같습니다:

1. 프로젝트 생성
2. 프로젝트 디렉토리로 이동
3. 개발 서버 실행
4. 프로젝트 구조 이해
5. 추가 패키지 설치

이 가이드를 따라하면 쉽게 Nuxt 2 프로젝트를 시작할 수 있습니다! Happy coding! 😊