Nuxt.js 시작하기 - 1. 설치

Nuxt.js를 시작하게 된 이유

Vue.js를 사내 프로젝트에 적용해야 했다.
맨땅에서 시작하자니 혼자 삽질을 많이 했고, 진도가 나가지 않는 상태였다.
구글링하다 Vue.js로 개발하려거든 Nuxt.js를 무조건 도입해라. 라는 글을 봤고, 그 때부터 쓰기 시작했다.

Nuxt.js는 무엇일까.

처음 시작할 땐 템플릿이라고만 생각했지만,
프로젝트를 하면서 Vue.js는 SPA 를 만들기에 적합한 프레임워크고, Nuxt.js는 SSR을 추가로 지원하는 템플릿 라이브러리라고 이해했다.
Vue.js의 문법만 알고있으면 당장이라도 build 하여 올릴 수 있을정도로 간편한 템플릿이다.

SPA와 SSR의 이해가 무조건적으로 필요하다.

Nuxt.js 시작하는 법

두 가지 방법이 있는걸로 알고 있는데, 내가 써보지도 않고 사용해보세요, 하는건 위험할 수 있으니 내가 프로젝트를 만들 때 여러번 사용했던 방법을 쓴다.

1.터미널에서 프로젝트를 저장할 경로로 이동하고, Vue CLI를 글로벌로 설치하는 다음 명령어를 작성한다. (npm or yarn이 설치되었다는 가정하에 작성합니다.)

$ npx create-nuxt-app <project-name>

project name 을 작성해주어야 프로젝트 폴더 생성 후 템플릿을 배치한다.

2.만들려고 하는 Nuxt 프로젝트 설정을 해준다.

create-nuxt-app v2.15.0
✨  Generating Nuxt.js project in .

2-1. 프로젝트 네임 지정.
? Project name <project-name>

2-2. 프로젝트 설명
? Project description <My perfect Nuxt.js project>

2-3. 프로젝트 생성자
? Author name <violajang>

2-4. 어떤 언어로 프로그래밍 할 것인가?
? Choose programming language <JavaScript>
> JavaScript
  TypeScript

2-5. Package Manager는 무엇을 쓸것인가?
? Choose the package manager <Npm>
  Yarn
> Npm

2-6. UI framework를 사용할 것인가? 사용한다면 어떤것을 사용할것인가?
? Choose UI framework <None>
> None
  Ant Design Vue
  Bootstrap Vue
  Buefy
  Bulma
  Element
  Framevuerk
  iView
  Tachyons
  Tailwind CSS
  Vuesax
  Vuetify.js

2-7. server framework를 사용할 것인가? 사용한다면 어떤것을 사용할것인가?
? Choose custom server framework <None (Recommended)>
> None (Recommended)
  AdonisJs
  Express
  Fastify
  Feathers
  hapi
  Koa
  Micro

2-8. Nuxt.js Module을 사용할 것인가? (axios를 사용하기 때문에 space 키를 눌러 설정해주었다.) 
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Axios
 ( ) Progressive Web App (PWA) Support
 ( ) DotEnv       

2-9. linting tools를 사용할 것인가? (ESLint를 사용하기 때문에 space 키를 눌러 설정해주었다.)
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
(*) ESLint
( ) Prettier
( ) Lint staged files
( ) StyleLint    

2-10. test framework를 사용할 것인가? 사용한다면 어떤것을 사용할것인가?
? Choose test framework <None>
> None
  Jest
  AVA

2-11. 렌더링 모드를 선택해라. 
? Choose rendering mode <Single Page App>
  Universal (SSR)
> Single Page App

3.프로젝트를 실행한다.

$ npm run dev

브라우저가 실행되면서 기재한 프로젝트 네임과 함께 Nuxt.js 로고를 보았다면 성공이다.
템플릿이라 이미 어느정도 다 되어있는 상태이지만 몇 가지 세팅해줄 부분이 있다.

To be Continue...