티스토리 뷰

ETC

Nuxt.js

LuxuryCoding 2022. 11. 20. 22:50
728x90

 

Nuxt.js 등장

  • Nuxt.js Projext의 첫 번째 커밋은 2016년도 10월이다. (0.x대 버전)
  • 1.0.0 alpha 버전은 2017년 5월 22이부터 시작된 것으로 보이고 정식으로 1.0.0이 release된 시점은 2018년 1월 9일이다.
  • Nuxt.js를 만든 팀이 Next.js를 만든 팀이다.

Nuxt.js 공식문서

기초지식

SSR 과 CSR 개념

Nuxt.js 란?

  • React 애플리케이션을 위한 Next.js 프레임워크가 있다면, Vue를 위해 SSR을 지원하는 프레임워크가 Nuxt.js이다.
  •  Nuxt.js는 Vue를 기반으로 하여 SSR 기반의 Web Application을 컴포넌트 단위로 개발 할 수 있게 해주는 프레임워크이다.
  • Angular, React, Vue SPA 삼대장들이 출시되고 나서 SPA의 단점을 극복하고자 많은 노력들이 있었지만, 정통 SSR(MPA) 방식의 장점을 완벽하게 커버하기란 불가능 하였다. SPA 상에서 SSR을 구축 할 수 있는 React.js 기반의 Next.js, Vue.js 기반의 Nuxt.js가 나오게 되었다.

 

Nuxt.js에 포함된 기능

  • Vue 2
  • Vue Router
  • Vuex (store 옵션 사용시 포함)
  • vue-meta
  • Vue Server Renderer (mode : ‘spa’를 사용하는 경우에는 제외)

vue-loader와 babel-loader와 함께 Werpark을 사용해서 코드를 묶고, 분할하며, 압축한다.

 

Nuxt.js 특징

  • Vue 파일 쓰기 (*.vue)
  • 코드 분할 자동화
  • SSR (서버 사이트 렌더링)
  • 비동기 데이터 기반의 강력한 라우팅 시스템
  • 정적 파일 전송
  • ES6/ES7 지원
  • JS & CSS 코드 번들링 및 압축
  • <head> 요소 관리 (<title>, <meta>, 기타)
  • 개발 중 Hot module 대체
  • 전 처리기 지원 : SASS, LESS, Stylus 등
  • HTTP/2 푸시 헤더 준비
  • 모듈식 아키텍처 확장

 

Nuxt.js 동작 구조

아래의 구조는 <nuxt-link>를 서버가 호출하거나 이를 통해 사용자가 이동한 경우, nuxt.js가 동작하는 구조이다.

 


 

 

'ETC' 카테고리의 다른 글

SSR(Server-Side-Rendering) / CSR (Client-Side-Rendering)  (0) 2022.11.20
Intellj db연동  (0) 2022.04.21
[생각해보기]  (0) 2022.03.22
댓글
최근에 달린 댓글
최근에 올라온 글
Total
Today
Yesterday
«   2025/09   »
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30