Taewoong La
528
2017-04-09 20:29:16
7
12028

[Nuxt.js] 1. 소개 및 개발 환경


원문 : http://blog.naver.com/diy_lecko/220978874567


요새 Vue.js가 떠오르고 있는데요, React.js에는 Next.js가 있듯이 Vue.js에는 Nuxt.js가 있습니다.


번역부터 시작해서 하나하나 차근차근 써보려고 합니다.


블로그에 혼자 정리하려다가 공유도 할겸 다른 분들에게 공유한다는 생각을 하면 좀 더 꾸준히 할 수 있지 않을까 해서 공유해보려구요 ^^; 부족한 발번역이지만 잘 부탁드립니다.


Nuxt.js를 처음 접하고 든 생각은 딱 한 가지다.

"이 Vㅔ리 대단한 프레임워크는 뭐지? 써보고 싶다."

그래서 써보려고 한다.

소개
2016년 10월 25일, zeit.co의 개발팀은 서버사이드 렌더링 React 애플리케이션을 위한  Next.js 프레임워크를 발표했습니다. 발표 몇 시간 뒤, Next.js처럼 서버사이드 렌더링 Vue.js 애플리케이션을 위한 프레임워크를 만들자는 생각이 들었고, 그렇게 Nuxt.js가 탄생했습니다.

Nuxt.JS란?
Nuxt.js는 범용 Vue.js 애플리케이션을 만들기 위한 프레임워크입니다.

주요 범위는 클라이언트/서버 배포를 추상화하는 동안 UI 렌더링을 하는 것입니다.

우리의 목표는 Nuxt.js를 기반 프로젝트 혹은 Node.js 기반의 프로젝트에 추가함으로써 사용할 수 있도록 충분히 유연한 프레임워크를 만드는 것입니다.

Nuxt.js는 더 즐거운 서버사이드 렌더링 Vue.js 애플리케이션 개발을 위해 필요한 모든 설정들이 미리 준비되어있습니다.

또한 우리는 nuxt generate라는 배포 옵션을 제공합니다. 이 옵션은 정적으로 생성된 Vue.js 애플리케이션을 빌드 합니다. 우리는 이 옵션이 마이크로 서비스를 지향하는 웹 애플리케이션 개발의 다음 단계일 수 있다고 생각합니다.

프레임워크로서 Nuxt.js는 비동기 데이터, 미들웨어, 레이아웃 등과 같이 클라이언트 측과 서버 측 사이에서 개발하는데 도움이 되는 많은 기능을 제공합니다.

어떻게 동작하는가

출처 : https://nuxtjs.org/guide/

Nuxt.js는 훌륭한 웹 애플리케이션을 만들기 위해 아래의 기능들을 포함합니다.

 - Vue 2
 - Vue-Router
 - Vuex (store 옵션을 사용할 때만 포함됩니다.)
 - Vue-Meta

총용량은 min+gzip 28kb밖에 되지 않습니다. (vuex를 포함하면 31kb)

vue-loader 및 babel-loader을 사용한 Webpack을 사용하여 코드를 묶고, 분할하며, 압축합니다.

특징
 - Vue 파일 작성
 - 코드 분할 자동화
 - 서버사이드 렌더링
 - 강력한 비동기 데이터 기반 라우팅 시스템
 - 정적 파일 전송
 - ES6/ES7 지원
 - JS & CSS 코드 번들링 및 압축
 - html의 head 태그 관리
 - Hot reloading의 지원
 - SASS, LESS, Stylus 등의 전처리기 지원

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

출처 : https://nuxtjs.org/guide/

서버사이드 렌더링
당신은 nuxt.js로 프로젝트의 모든 UI 렌더링을 처리할 수 있습니다.

nuxt가 실행될 때, nuxt는 hot-reloading과 당신의 애플리케이션이 자동으로 서버사이드 렌더링이 되도록 하는 vue-server-renderer가 포함된 개발 서버를 실행합니다.

자세한 사항은 명령어 모음에서 확인합니다.

만약 당신이 이미 서버가 있다면, nuxt.js를 미들웨어로 사용할 수 있습니다만, 제약이 많을 경우 Nuxt.js를 프로그램적으로 사용하기 가이드를 참고합니다.

정적 파일 생성
nuxt.js에서 가장 큰 혁신은 nuxt generate 명령어가 될 것입니다.

nuxt generate는 애플리케이션을 빌드 할 때 모든 라우트를 HTML 파일로 생성합니다.

예를 들어,

-| pages/ ----| about.vue ----| index.vue

는 아래와 같이 생성됩니다.

-| dist/ ----| about/ ------| index.html ----| index.html

이는 당신이 어느 정적 호스팅에서든 웹 애플리케이션을 호스트 할 수 있다는 것입니다!
가장 좋은 예는 바로 이 웹사이트입니다. 이 웹사이트는 GitHub 페이지에 호스팅 및 생성되었습니다.

 - 소스 코드
 - 생성된 코드

우리는 수동으로 애플리케이션을 매번 생성하고 docs repostiory를 업데이트하고 싶지 않습니다. 그래서 매번 푸시를 하면 아래의 AWS Lambda를 호출하도록 했습니다.

 1. nuxtjs.org repository를 클론 합니다.
 2. npm install로 디펜더 시를 설치합니다.
 3. nuxt generate를 실행합니다.
 4. gh-pages 브랜치로 dist 폴더를 push 합니다.

우리는 이제 서버가 없는 정적 웹 애플리케이션을 가지게 되었습니다.

우리는 nuxt generate로 만들어지고 CDN에 호스팅 되며 재고가 있거나 없는 경우 항상 웹앱을 재생성 하는 방식의 e-commerce 웹 애플리케이션을 생각함으로써 더 나아갈 수 있습니다. 만약 사용자가 그동안 웹앱을 탐색하는 경우, e-commerce API를 호출하면 최신 정보가 제공됩니다. 서버의 다중 인스턴스와 캐싱을 더 이상 고민할 필요가 없습니다!

개발 환경
필자의 환경은 이렇다.

 1. MacBook Pro (13-inch, 2016, Two Thunderbolt 3 ports), macOS Sierra 10.12.4
 2. Atom (language-vue 패키지)

먼저 Nuxt.js 프로젝트는 Node.js 기반이기 때문에 npm이 필수다. npm이 없다면 npm을 먼저 설치하도록 한다.

이제 아래의 명령어를 순차적으로 실행하자.

$ npm install -g vue-cli $ vue init nuxt/starter projectname $ cd projectname $ npm install $ npm run dev

끝이다.

사실상 vue init nuxt/starter projectname 하나의 명령어로 엄청나게 복잡한 설정이 끝난다. 미쳤다.

이제 http://localhost:3000/으로 접속해보자.

엄청난 기능들을 이렇게 빨리 세팅할 수 있다니?


여기까지 Nuxt.js라는 새로운 프레임워크에 대한 간략한 발번역소개와 개발 환경을 세팅해 봤다.

다음 글에서는 디렉터리 구조 및 환경설정, 라우팅에 대한 내용을 다룰 것 같다.

7
2
  • 댓글 7

  • 마침 vue.js를 도입할 가능성이 있었는데 좋은 정보 감사합니다. 

    아 근데 서버 측 프레임워크군요.. ㅠㅠ

    1
  • Taewoong La
    528
    2017-04-09 20:42:45

    감사합니다.


    개인 프로젝트로 이것저것 기술들 찾아보고 리서치하던 도중에 정착했습니다.


    버전은 이제 0.10.5에 불과하지만, 뒤에 든든한 알리바바가 버티고 있으니 기대가 됩니다.

    0
  • 덕구
    590
    2017-04-10 11:24:41

    흥미롭네요. 

    좋은 정보 감사합니다.

    1
  • LUHAVIS
    2017-04-11 20:32:44

    좋은 정보 감사합니다.

    1
  • 창천향로
    4k
    2017-04-12 08:18:36

    오! 감사합니다

    잘보겠습니다!

    1
  • 서비스지향개발자
    7k
    2017-04-13 01:58:42

    좋은정보 감사합니다. 점점 javascript로 넘어가는군요..

    1
  • CU편돌이
    57
    2017-07-25 21:38:45 작성 2017-07-26 01:15:09 수정됨

    재밌게 잘 일었습니다. 

    0
  • 로그인을 하시면 댓글을 등록할 수 있습니다.