투입 예정 중인 프로젝트가 앞단이 Nuxt.js로 구성되어 있어서
혼자 공부해볼 겸 프로젝트 create 과정부터 간단한 내용을 정리해보고자 한다.

Nuxt.js ?.?

Nuxt.js는 Vue.js 애플리케이션을 위한 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 그리고 단일 페이지 애플리케이션(SPA)을 지원한다.

Nuxt.js의 특징 (Next.js의 특징과 유사)

• 서버 사이드 렌더링(SSR)
• 정적 사이트 생성(SSG)
• 강력한 모듈 시스템
• 자동 코드 분할
• SEO 최적화

Nuxt.js 프로젝트 생성 방법

1단계: Nuxt.js 설치

Nuxt.js 프로젝트를 생성하려면, 터미널에서 다음 명령어를 실행:

npx create-nuxt-app <project-name>

명령어를 실행하면 몇 가지 설정을 선택해야하는데

1. Project name: 프로젝트의 이름을 입력하세요.
2. Programming language: JavaScript 또는 TypeScript 중 하나를 선택하세요.
3. Package manager: npm 또는 yarn 중 하나를 선택하세요.
4. UI framework: None, Bootstrap, Vuetify, Tailwind CSS 등 원하는 UI 프레임워크를 선택하세요.
5. Nuxt.js modules: Axios, PWA, Content 등 필요한 모듈을 선택하세요.
6. Linting tools: ESLint, Prettier 등 코드 품질을 유지하기 위한 도구를 선택하세요.
7. Testing framework: None, Jest, AVA 등 테스트 프레임워크를 선택하세요.
8. Rendering mode: Universal (SSR/SSG) 또는 Single Page App 중 하나를 선택하세요.
9. Deployment target: Server (Node.js hosting) 또는 Static (Static/JAMStack hosting) 중 하나를 선택하세요.
10. Development tools: tsconfig.json 또는 None을 선택하세요.

라는 선택 중 가장 노멀한 패키징 구성을 추천하자면..

노멀 가이드

1. Project name: 프로젝트 이름
2. Programming language: TypeScript
3. Package manager: npm
4. UI framework: Tailwind CSS
5. Nuxt.js modules: Axios
6. Linting tools: ESLint
7. Testing framework: Jest
8. Rendering mode: Universal (SSR/SSG)
9. Deployment target: Static (Static/JAMStack hosting)
10. Development tools: tsconfig.json

이 설정을 완료하면 Nuxt.js 프로젝트가 생성됨.

2단계: 프로젝트 구조

프로젝트가 생성되면 다음과 같은 디렉토리 구조가 생성된다.

<project-name>/
├── assets/
├── components/
├── layouts/
├── pages/
├── plugins/
├── static/
├── store/
├── nuxt.config.js
└── package.json

3단계: 기본 페이지 생성

pages 디렉토리에 index.vue 파일을 생성하고 다음 코드를 추가:

<template>
  <div>
    <h1>Welcome to Nuxt.js!</h1>
  </div>
</template>
 
<script>
export default {
  name: 'IndexPage'
}
</script>
 
<style>
h1 {
  color: #35495e;
  font-family: 'Arial', sans-serif;
}
</style>

4단계: 개발 서버 실행

다음 명령어를 사용하여 개발 서버를 실행:

npm run dev

브라우저를 열고 http://localhost:3000으로 이동하여 Nuxt.js 애플리케이션이 정상동작 하는지 확인.