nuxt.js 활용하기

nuxt.js 활용하기

 react, angular진영에 비해 vue.js의 단점은 '서버'와의 연계다. 리액트나 앵귤러는 typescript 방식 혹은 ES6를 활용한 MVC프레임워크를 자체적으로 지원한다. 반면, vue.js는 백엔드랑 연결하기에 완벽하지 않다. 앵귤러 역시 angular.js시절에는 제이쿼리 같은 라이브러리 느낌이었지만 angular2.0이후부터 급변했다. vue.js는 가벼운 맛에 사용하는 추세지만, nuxt.js와 함께라면 서버영역까지 진행할 수 있다.

nuxt.js를 실행하기 위해서는, 먼저 vue-cli를 설치해야 한다. `` npm install -g vue-cli `` 명령어를 실행해서 전역으로 vue-cli를 설치한다. 

vue init nuxt-communitiy/starter-template [프로젝트 이름] 

 위의 명령어로 nuxt 기본 뼈대를 생성한다. 설치 중에 프로젝트 이름을 입력하고, 개발자를 기입한다. 이후 cd 명령어로 프로젝트 폴더로 이동한 후에 npm install을 통해 모듈을 설치한다. 모듈을 모두 설치하고 나면, npm run dev 명령어를 통해 localhost:3000에서 실행할 수 있다. 

 

vue cli를 통해 nuxt를 설치하고 나면, 총 9개의 디렉터리(폴더)가 생성된다. 

---

-Asset

-Component

-Layout

-Midware

-Node module

-Plugin

-Page

-Static

-Store

---

``A-C-L-M-N-P-P-S-S`` 로 기억해두자. 

1:: Assets

 assets는 SASS, LESS나 빌드가 필요한 Javascript 파일이 포함되는 디렉터리이다. 

 

2:: Component

 nuxt.js에 사용되는 컴포넌트들을 포함하는 디렉터리로, 화면을 구성하고 있는 요소를 컴포넌트라 부른다. 모듈, 부품의 개념으로 이해할 수 있으며, 컴포넌트에서는 vue문법을 활용한 .vue파일을 사용한다. 

3:: Layouts

 nuxt.js에서 사용하는 기본 레이아웃을 포함하는 폴더이다. 프론트 페이지의 레이아웃을 개발 때 상단, 하단, 좌/우 탭은 모든 페이지에서 동일하게 적용된다. 따라서 layout은 한번만 정의하면 된다. 모든 레이아웃에 공통된 부분을 적용할 경우, 사용하는 폴더가 layouts이다. layout을 사용한다면 핵심적인 부분을 개발하는데에만 집중할 수 있다. 

4:: middware

 미드웨어는 레이아웃, 페이지가 랜더링되기 전에 실행되는 파일이 정의되는 폴더다. 미들웨어는 클라이언트 뿐만 아니라 서버에서도 쓰이는 개념이므로 개념 자체를 알아두면 도움이 된다.

5:: pages

 pages는 일반적인 vue파일을 포함한다. pages 역시 컴포넌트의 일종이며, vue 확장자를 사용한다. pages 폴더에 있는 파일은 vue파일이어야 한다. 

6:: plugin

 plugins는 vue로 만든 웹 어플리케이션이 생성되기 전에 실행시키고 싶은 js파일을 포함한다. 여기에서는 외부에서 설치한 모듈이나 직접 만든 모듈 모두 포함 가능하다. 

7:: static

 static은 정적이라는 의미다. 정적인 파일들, 가령 이미지 파일이나 각종 CSS 혹은 Javascript와 같은 임의로 만든 외부 파일(정적)을 포함한다.

8:: Store

 store는 상태(데이터)관리를 도와주는 라이브러리인 vuex가 포함된 디렉터리이다. 

 

 

** nuxt 프로젝트[수동방식] 제작
 보일러 플레이트가 아닌 직접 nuxt 프로젝트를 만들어보자.

01:: 패키지.json파일 만들기 

 test01폴더를 생성하고, 아래와 같은 package.json파일을 저장한다. 

---

{

   "name":"hello world",

   "scripts":{

   "dev":"nuxt"

   }

}

---

패키지.json파일을 생성하고, dev명령어 npm run dev로 실행할 수 있다. 단 먼저 nuxt를 설치해야만 해당 명령어(nuxt)를 사용할 수 있다. nuxt는 다음 명령어로 설치가능하다.

 

`` npm install --save nuxt ``

 

npm을 활용해서 모듈을 설치하면 해당 폴더에 node_modules가 추가된다. 또한 nuxt를 추가했기 때문에 package.json파일에 nuxt가 추가된다.

 

---

{

          "name" : "hello_world",

         "scripts" : { "dev" : "nuxt" },

"dependencies" : { "nuxt": "^1.4.1" }

}

---

name을 작성할 때는 중간 공백이나 숫자 시작 같은 변수 규칙에 어긋나는 이름을 적어서는 안 된다는 사실을 알아두자.

02:: page에 화면 만들기 

 현재 폴더구조는 다음과 같다.

---

01_firstNuxt -- node_modules

                -- package.json

                -- package-lock.json 

---

pages 폴더를 생성하고 폴더 안에 index.vue 파일을 넣자.

---

01_firstNuxt -- node_modules

                -- package.json

                -- package-lock.json

                -- pages

                       --(하위폴더) index.vue

---

pages폴더 아래의 index.vue파일은 간단하게 작성한다.

---

<template>

     <h1>Hello vue!~</h1>

</template>

---

위의 index.vue파일을 pages폴더에 넣고, `` npm run dev `` 명령어를 실행해보자. localhost:3000에 접속하면 Hello vue!~를 볼 수 있을 것이다. vue파일 같은 경우에는 글자를 변경하면 자동으로 바뀐다. npm run dev처럼 시작을 했다면, 변경된 내용은 자동감지가 되므로 재실행 할 필요가 없다. 

03:: page폴더 내, 라우팅 만들기
 pages폴더 아래에 다른 vue파일을 만들면 파일 이름이 그대로 라우팅 주소가 된다.

pages폴더 아래에 users.vue라는 템플릿 파일을 만들어보자. nuxt에서 .vue파일의 구조는 아래와 같다. 

---

<template>

</template>

<script>

export default {

//vue 인스턴스가 생성되기 전 store 초기화

  fetch( { store, params} ){

  },

//인스턴스가 생성될 때 호출

  created ( ) {

   }.

//비동기적으로 데이터 생성 json형태로 반환하면 data( )와 머지됨

asyncData (context) { 

 return { }

},

//데이터 생성

data ( ) {

return{ }

},

//해당 파일에 동작시킬 매소드 정의

methods: {

},

//복잡한 계산식일 때 computed 사용

computed: { 

},

//외부 컴포넌트 추가 { a, b, c }의 형태로 작성. 각각의 컴포넌트는 import a from 'a' 방식으로 가져옴

components: {

  }

}

</script>

---

           midware:' ',

scrollToTop: true || false ,

layout: '  '

위의 코드는 없어도 되는 부분이다.

3-1) asyncData 메소드

 asyncData는 컴포넌트에서 데이터 설정을 할 때 비동기적으로 생성되는 데이터에 asyncData를 사용한다. 서버에서 데이터를 가져와서 사용한다면 asyncData를 사용한다. asyncData로 생성한 데이터는 data로 생성한 데이터와 머지되어 사용하는 입장에서는 asyncData와 data는 차이가 없다. 단지 초기화시키는 데이터가 동기적으로 실행되는지 비동기적으로 실행되는지에 대한 차이가 있을 뿐이다.

---

export default {

asyncData (context) {

//서버에서 데이터를 받아오는 부분

return { message2 : 'world' }

},

data ( ) {

return { message1 : 'hello' }

}

}

---

asyncData는 첫 번째 인자로 context를 받는다. context는 url에 있는 params나 query를 가져올 수 있다. redirect나 error를 활용하여 원하는 페이지로 리다이렉트 시키거나 에러 페이지를 띄워줄 수 있다. 만일 vuex가 설정된 경우라면, store를 사용할 수 있다. env를 이용하면, nuxt.config.js에 설정된 환경변수를 확인할 수 있다. 

 

3-2) fetch 메소드

 fetch메소드도 data와 asyncData처럼 데이터를 가져오는 것은 똑같지만 데이터를 초기화하는 대상이 다르다. asyncData와 data는 컴포넌트에서 사용하는 데이터를 초기화하지만 fetch는 vuex인 데이터 스토어에 데이터를 넣기 위해 사용한다. 물론 비동기적으로 작동도 가능하다. 

 

---

<template>

<h1>message: {{ $store.state.data  }} </h1>

</template>

<script>

export.default {

fetch( { store, param } ){

//데이터 가져오는 부분

store.commit( 'dataUpdate' , data )

}

}

</script>

---

fetch도 context인자를 받고 store와 params 키를 사용한다. 위의 예문에서 store는 웹 애플리케이션 전역에서 사용하는 데이터 저장소로 이해할 수 있다. store.commit은 데이터 저장소에 있는 특정 함수를 실행하여 필요한 데이터로 초기화/수정하는 역할을 한다.