12.[Nuxt.js] 프로젝트, 설정, 라우팅

1. Nuxt.js Project

  Nuxt.js 프로젝트를 신규로 생성하면 위의 구조를 가진다. nuxt.js는 vue를 이용한 페이지를 만들 수 있는 프레임워크다. 그렇기 때문에 nuxt.js에 대한 기본적인 구성을 알고 개발을 시작해야 한다.

- assets

  SASS, LESS나 빌드에 필요한 JavaScript 파일이 포함한다.

- component

  nuxt.js에서 사용되는 컴포넌트들을 포함한다. 컴포넌트는 화면에서 사용되는 각각의 요소를 의미한다. (vue.js에서 배운 component와 동일하다.)

- layouts

  nuxt.js에서 사용하는 기본 레이아웃이 존재한다. 애플리케이션에서 상단 탭이나 하단 탭과 같이 모든 페이지에서 동일하게 적용되는 레이아웃이 담긴다. 만약 사용자가 새로 레이아웃을 만들어 적용한다면 한번만 정의해서 페이지를 만들 수 있다.

- middleware

  레이아웃, 페이지가 렌더링되기 전에 실행되는 파일이 정의된다.

- pages

  웹 애플리케이션에서 보게되는 페이지 파일을 담는 곳이다. 앞서 배운 vue.js 파일이 해당 폴더에 포함된다.

- plugins

  vue로 만든 웹 애플리케이션이 생성되기 전에 실행시키고 싶은 js 파일이 담긴다. 주로 외부에서 설치한 모듈이 이곳에 들어간다. (axios, vue-notification 등)

- static

  정적 요소들이 들어간다. (CSS, JavaScript 등) 

- store

  데이터 관리를 도와주는 라이브러리인 vuex가 들어있다.

- Package.json

  프로젝트의 의존성 모듈, 스크립트를 포함하는 파일이다. JavaScript 파일에 있어 기본적인 요소를 포함한다. npm install을 하게 되면 모듈이 설치되는데, 이 떄 설치되는 모듈 정보를 이곳에서 포함하게 된다.

{
  "name": "test1",
  "version": "1.0.0",
  "description": "My delightful Nuxt.js project",
  "author": "  ",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "nuxt": "^2.0.0"
  },
  "devDependencies": {}
}

  프로젝트에 포함되는 각각의 구조들이 Nuxt에서 어떻게 작동히는지는 아래의 링크에 들어가면 파악할 수 있다.

링크 : https://ko.nuxtjs.org/guide/directory-structure

2. Nuxt.js Setting

  페이지를 개발하기 전 Nuxt.js에 대한 설정 관리 작업을 해줘야한다. 설정 관리란 우리가 만들려는 애플리케이션을 만들기 위한 기본 설정을 정의 내리기 위한 것이다. 우린 이 작업을 통해 프로젝트 전체에 영향을 미치게 되는 요소들을 쉽게 개발하고 유지보수를 할 수 있다. Nuxt.js는 Vue 애플리케이션을 개발하기 위한 프레임워크로 해당 부분에 대한 세팅이 무엇보다 중요하다. 

<nuxt.config.json>

 
export default {
  mode: 'universal',
  /*
  ** Headers of the page
  */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },
  /*
  ** Global CSS
  */
  css: [
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
  ],
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
  ],
  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {
    }
  }
}
 

  nuxt.config.json는 nuxt.js의 설정 정보를 정의해주는 파일이다. 이곳에서 build, cache, css, dev, env, generate, head, loading, plugin, rootDir, router, srcDir, transition의 기본 설정을 덮어 씌울 수 있다.

- head

  애플리케이션에서 사용하는 기본 메타에 대해 정의한다.

 head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  charset과 같이 웹 페이지에 head에 해당하는 기본 값들에 대한 정의를 내린다.

- cache

  컴포넌트 캐시의 허용 유무를 작성한다. 

  cache: {
    max: 1000,
    maxAge: 1000 * 60 * 60
  }

  캐시의 경우 너무 커지게 되면 메모리 공간을 많이 차지하게 되므로 적당한 값을 선정하는 것이 중요하다. 캐시의 경우 max에는 컴포넌트의 수와 캐시가 되는 시간 2가지를 설정해주면된다.

•   max: 캐시에 사용되는 컴포넌트의 수
•   maxAge: 캐시 시간 (ms)

- CSS

  애플리케이션에서 전역으로 사용되는 css를 정의한다.

- loading

  페이지 이동 시에 상단에 뜨는 프로그래스 바에 대한 설정을 한다. 

  프로그래스 바의 사용을 원치 않는 다면 아래와 같이 작성하면 된다.

 /*
  ** Customize the progress-bar color
  */
  loading: false,

  사용자 정의의 프로그래스 바를 세팅한다면 아래와 같이 진행할 수 있다.

  loading: { 
    color: 'yellow',
    height: '5px',
    failedColior: 'red',
    duration: 1000 * 10 
  },

• color : 프로그래스 바의 색상
• height :  프로그래스 바의 높이
• failedColor : 에러 발생 시 프로그래스 바 색상
• duration : 프로그래스 바의 최대 진행시간

  

  위에서 설명된 내용 이외의 설정 세팅 정보는 아래 링크에서 확인 가능하다.

링크 : https://ko.nuxtjs.org/guide/configuration

3. Nuxt.js Route

  라우트는 pages의 디렉터리 구조를 기반으로 vue-router를 설정해준다. 즉, 이 곳에 정의된 정보를 통해 pages 안에 존재하는 디렉터리와 파일에 대한 주소가 만들어진다. 

  라우팅은 크게 동적과 정적으로 구분이 된다.

- 정적 라우트

  고정된 URL을 사용하여 페이지를 요청한다. Pages 폴더의 구조가 아래와 같다.

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

  이 경우 URL은 각각 다음과 같이 설정이 된다.

• pages/index.vue : [domain]/
• pages/user/index.vue : [domain]/user/

  정적라우트에서 user 디렉터리 아래 one.vue 라는 신규 페이지를 만들게 되면 해당 URL은 다음과 같다.

• pages/user/one.vue : [domain]/user/one

  이 의미는 각 디렉터리의 첫 페이지는 index가 담당하게 되고 나머지 페이지의경우 우리가 저장한 페이지의 이름에 따라 정의를 내리면 된다.

  이렇게 선언된 경우 동적으로 생성된 페이지를 nuxt-link 태그를 이용하여 이동한다.

<nuxt-link to="/one" target="_blank" class="button--green">
          Documentation
</nuxt-link>

- 동적 라우팅

  동일한 페이지를 여러개 만드는 경우도 발생한다. 예를 들어 사용자의 이름만 다른 중복된 페이지를 여러개 만드는 경우를 생각 할 수 있다. 이런 경우 사용자 마다 모든 페이지를 하나하나 만드는 것은 사실상 불가능하다. 이 경우 우리는 URL을 동적으로 생성해주어야 한다.

  동적 URL을 만들기 위해서는 이름 앞에 언더바 키워드(_)를 사용한다.

pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue

 위의 구조로 디렉터리를 세팅하게 된다면 라우팅 정보는 아래와 같이 담기게 된다.

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'users-id',
      path: '/users/:id?',
      component: 'pages/users/_id.vue'
    },
    {
      name: 'slug',
      path: '/:slug',
      component: 'pages/_slug/index.vue'
    },
    {
      name: 'slug-comments',
      path: '/:slug/comments',
      component: 'pages/_slug/comments.vue'
    }
  ]
}

  이처럼 언더바 앞에 붙은 페이지의 경로에 " : " 가 붙은 것을 확인 할 수 있다. 그리고 이는 URL에서 선택정 경로를 설정할 수 있는 것을 의미한다.

  그리고 _id 자리에는 어떠한 값이 들어가도 해당 URL로 이동하게 된다. 

<nuxt-link to="users/1" target="_blank" class="button--green">
    사용자 1 정보
</nuxt-link>
<nuxt-link to="users/2" target="_blank" class="button--green">
    사용자 2 정보
</nuxt-link>
<nuxt-link to="users/3" target="_blank" class="button--green">
    사용자 3 정보
</nuxt-link>