[Vue] Nuxt.js

Nuxt.js

서버사이드 렌더링 프레임워크로 Vue.js로 서버사이드 렌더링을 구현할때 가장많이 쓰는 프레임워크.. 
서버사이드렌더링 기술은 실무자들의 가장 큰 고민인 빠른페이지 로딩속도와 성능 최적화에 대한 해답을 제시하고 있다.
더많은 사용자들에게 전달할 수 있도록  SEO와 사이트 정보 전달 측면에서도 강하다. 
기존의 Vue SPA에 추가적인 규칙이나 기능들을 제공하며
웹 애플리케이션을 제작할 때 필요한  Vuex,Router,Axios 같은 라이브리들을 Nuxt.js에서 미리 구성하여
SPA, 서버사이드 렌더링, 정척 웹사이트를 쉽게 제작할 수 있다. 

선수 지식으로는 Reactivity, Component, VueRouter, Vuex, axios 등이 필요하다.

 

서버사이드 렌더링이란?
- 웹페이지 내용을 서버에서 모두 작성하여 클라이언트(브라우저)로 보낸 뒤 화면에 그리는 방식

 

 

Nuxt.js의 장점

• 검색 엔진 최적화
• 초기 프로젝트 설정 비용 감소와 생산성 향상
  • ESLint, Prettier
  • 라우터, 스토어 등의 라이브러리 설치 및 설정 파일 필요 X
  • 파일 기반의 라우팅 방식. 설정 파일 자동 생성
• 페이지 로딩 속도와 사용자 경험 향상
  • 브라우저가 하는 일을 서버에 나눠준다
  • 모르면 지나칠 수 있는 코드 스플리팅이 기본으로 설정

 

Nuxt.js의 특징 

Nuxt의 특징을 요약해보면 크게 아래와 같이 구분됩니다.

• 서버 사이드 렌더링
• 규격화된 폴더 구조(layout, store, middleware, plugins 등)
• pages 폴더 기반의 자동 라우팅 설정
• 코드 스플리팅
• 비동기 데이터 요청 속성
• ES6/ES6+ 변환
• 웹팩을 비롯한 기타 설정

 

Nuxt 시작하기

Nuxt 설치 명령어

npm init nuxt-app [프로젝트명]

nuxt-app 프로젝트 설치 명령어

 

실행하기

cd [프로젝트명]
npm run dev

 

 

 

프로젝트 폴더구조

Nuxt.js 버전 2.15.7부터 프로젝트 폴더 구조가 변경됨

.nuxt - Nuxt의 빌드 결과물이 담기는 폴더 

 

 

https://nuxtjs.org/

The Intuitive Vue Framework

 

https://joshua1988.github.io/vue-camp/nuxt/intro.html

Introduction | Cracking Vue.js

https://github.com/nuxt/eslint-plugin-nuxt

GitHub - nuxt/eslint-plugin-nuxt: ESLint plugin for Nuxt.js [WIP]

https://develop365.gitlab.io/nuxtjs-0.10.7-doc/ko/faq/github-pages/

GitHub Pages에 배포하기 - Nuxt.js