티스토리 뷰
Nuxt.js 공식 사이트에서 다음과 같이 소개하고 있다.
Nuxt is a progressive framework based on Vue.js to create modern web applications. It is based on Vue.js official libraries (vue, vue-router and vuex) and powerful development tools (webpack, Babel and PostCSS). Nuxt's goal is to make web development powerful and performant with a great developer experience in mind.
앞서 학습했던 vue, vue-router, vuex + webpack, babel 구성된 프레임워크이다. 여기서 중요한 단어는 프레임워크이다. 프레임워크에서 가이드하는 규칙이 있고 그 규칙을 따랐을 때 우리의 애플리케이션은 정상적으로 동작하게 된다.
또한 SSR(Server Side Rendering), SPA(Single Page Application), Pre-Render(static) 방식으로 쉽게 빌드 가능하며 구별해서 파일을 제공하기 때문에 편리하게 배포 가능하다. 또한 SEO 위해 Vue-Meta도 제공하고 있다. 물론 SSR로 했을 때 그 효력이 있다.
Nuxt.js도 CLI를 제공한다. npx create-nuxt-app <project-name> 명령어로 손쉽게 프로젝트를 만들 수 있다. npx는 node 5.2 이상이면 필수로 설치된다. <project-name>를 생략하면 현재 위치에 파일들이 생성되고 <project-name> 넣으면 폴더가 생성되고 아래에 설치된다.
vue-router를 사용할 때는 개발자가 작성해야 했지만 Nuxt에서는 pages 폴더 규칙에 따라 자동으로 라우터가 생성된다.
빌드 후. nuxt 폴더 안에 router 파일을 열어보면 그 결과를 확인해 볼 수 있다.
그 외 layout, middleware, plugins 같은 폴더도 생소한데 공식 문서 제공하는 각 폴더의 의미를 잘 알아둬야 한다.
다음에는 Todo를 Nuxt로 바꿔보는 작업을 해볼 예정이다.