Jkun.io

Nuxt.js 디렉토리 구조

https://ko.nuxtjs.org/nuxt-views-schema.svg

Assets

css, images, font와 같은 리소스들을 포함한 디렉토리이다.

Components

애플리케이션에서 사용될 컴포넌트들을 포함한 디렉토리이며, 해당 컴포넌트에서는 Nuxt.js의 비동기 데이터 함수인 asyncData나 fecth를 사용할 수 없다.

Layouts

애플리케이션의 레이아웃을 포함한 디렉토리이다. layouts/default.vue 파일이 기본으로 설정된다.

레이아웃을 생성할 때, 페이지 컴포넌트를 실제로 포함되도록 컴포넌트를 추가해야한다. 

<template>
  <nuxt />
</template>

Error Page

에러 페이지는 오류(404, 500 등)가 발생하였을 때 노출되는 페이지 컴포넌트이다.

공식문서에 따르면 layouts 디렉토리에 이 파일이 위치하더라도, page처럼 다뤄져야 한다고 명시되어 있다.

이 레이아웃은 특수한 케이스로 템플릿 안에 컴포넌트를 포함하면 안된다.

// layouts/error.vue
...

<script>
export default {
  props: ['error'],
  layout: 'error' // Error 페이지에 대한 custom layout, 설정하지 않는다면 default 가 설정된다.
}
</script>

Middleware

애플리케이션의 미들웨어를 포함하는 디렉토리이다. 미들웨어는 페이지나 레이아웃이 렌더링되기 전에 실행할 사용자 정의 함수를 정의할 수 있다.

모든 미들웨어는 middleware/ 디렉토리 안에 있어야한다. 파일 이름은 곧 미들웨어의 이름이 된다.

미들웨어는 아래의 세 가지에서 순차적으로 실행된다.

middleware/authenticated.js

export default function(context) {
  // 사용자가 인증을 하지 않은 경우
  if (!store.state.authenticated) {
    return context.redirect('/login');
  }
}

  1. nuxt.config.js

    // 전역 바인딩
...
router: {
  middleware: ['authenticated']
}
  2. 매칭된 레이아웃

  3. 매칭된 페이지

    pages/index.vue

    // 특정 페이지 바인딩
...
<script>
export default {
  middleware: 'authenticated'
}
</script>

Pages

애플리케이션의 view와 route를 포함하는 디렉토리이다.

Nuxt.js는 모든 .vue 파일을 읽고 애플리케이션의 라우터를 생성한다.

페이지 컴포넌트 내 개발의 용이함을 위한 Attr와 Func를 제공한다.

asyncData

컴포넌트가 로딩되기 전에 매번 호출된다. 애플리케이션의 최초 로드시, 서버 사이드에서 한 번 호출되고, 이후 route 이동 시 클라이언트 사이드에서 호출된다. context를 인자로 전달 받아 컴포넌트 데이터와 병합한다.

asyncData 안에서 컴포넌트를 참조하기 위해 this를 사용하지 않는다. 컴포넌트가 생성되기 전에 호출되기 때문에 this에 접근할 수 없다.

fetch

페이지가 랜더링되기 전에 데이터를 Store에 넣기위해 사용한다. 컴포넌트의 데이터를 세팅하지 않는 점을 빼고는 data 메소드와 비슷하다.

현재 페이지에 대한 특정 태그를 설정한다.

export default {
  head () {
    return {
      title: '타이틀',
      meta: [
        { 
          hid: '유니크한 아이디', 
          name: '설명', 
          content: '커스텀한 설명' 
        }
      ]
    }
  }
}

공식문서에 따르면 하위 컴포넌트 사용할 때, 중복을 피하려면 유니크한 id인 hid 값을 부여하도록 한다.

layout

layouts 폴더에 정의된 정의된 레이아웃을 지정할 수 있다.

export default {
  layout: 'custom',
  // 또는
  loyout(context) {
    return 'custom'
  }
}

페이지 컴포넌트에서 사용할 layout을 정의하기 위해서 loyout 키를 정의한다.

정의하지 않으면 layouts 디렉토리의 default.vue가 기본값으로 정의된다.

loading

Nuxt.js 자체 컴포넌트를 이용하여 경로 사이의 progress bar를 설정할 수 있다.

nuxt.config.js

module.exports = {
  loading: false
  // 또는
  loading: {
    color: "blue",
    height: "5px"
  }
}
  • color: progress bar의 CSS 색상
  • failedColor: 경로 렌더링에 에러가 발생한 경우의 progress bar의 CSS 색상
  • height: progress bar의 높이
  • duration: progress bar의 최대 진행시간

사용자가 Loading 컴포넌트를 정의할 수 있다.

nuxt.config.js

module.exports = {
  loading: '~/components/loading.vue'
}

components/loading.vue

<template>
  <div class="loading-page" v-f="loading">
    로딩중...
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false
    }
  },
  methods: {
    // 경로가 변경될 때 호출
    start() {
      this.loading = true
    },
    // 경로가 로드되었을 때 호출
    finish() {
      this.loading = false
    },
    // 경로가 로드되지 않았을 떄 호출
    fail(error) {}
  }
}
</script>

<style scoped>
.loading-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding-top: 200px;
  font-size: 30px;
  font-family: sans-serif;
}
</style>

validate

동적 라우트에 대한 유효성을 검사한다.

Nuxt.js 라우트에서 확인

middleware

페이지에 대한 미들웨어를 설정하면 미들웨어는 페이지를 렌더링하기 전에 호출한다.

모든 미들웨어는 middleware/ 디렉토리에 있어야한다. 파일 이름은 곧 미들웨어 이름이 된다.

Plugins

애플리케이션이 생성되기 전 실행하고 싶은 자바스크립트 플러그인을 포함하는 디렉토리이다.

Store

Vuex Store 파일을 포함하는 디렉토리이다. 기본적으로 비활성화 상태이며, store/index.js 파일을 생성하면 프레임워크가 자동으로 Store를 활성화 시킨다.

Nuxt.js는 store 디렉토리가 존재한다면,

  1. Vuex 활성화

  2. Vue 인스턴스에 store 옵션 추가

    Nuxt.js에서는 2가지 store 모드를 지원한다.

모드와 관계없이, 서버 측에서 원치 않을 상태 공유를 방지하려면 state 값은 항상 함수여야 한다.

모듈 모드

store 디렉토리에서 모든 모듈을 관리하며, 모듈 별로 store를 생성한다.

store/index.js

// 위 언급한 바 state는 항상 함수여야 한다.
export const state = () => ({
  counter: 0
})

export const mutations = {
  increment(state) {
    state.counter++
  }
}

store/todos.js

export state = () => ({
  list: []
})

export const mutations = {
  ADD(state, text) {
    state.list.push({ text, done: false });
  },
  REMOVE(state, { todo }) {
    state.list.splice(state.list.indexof(todo), 1);
  },
  TOGGLE(state, todo) {
    todo.done = !todo.done;
  }
}

페이지 컴포넌트에서 todos 모듈 사용

pages/todos.vue

<template>
  ...
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  computed: {
    todos() {
      return this.store.state.todos.list
    }
  },
  methods: {
    addTodo(e) {
      this.$store.commit('todos/ADD', e.target.value);
      e.target.value = '';
    },
    ...mapMutations({
      toggle: 'todos/TOGGLE'
    })
  }
}
</script>

클래식 모드

공식문서에 따르면 Next3에서는 삭제될 예정이다.

nuxt.config.js

Nuxt.js의 사용자 정의 설정을 포함하는 파일이다.

Nuxt.js 기본 설정된 기능을 이 파일을 통해서 덮어 쓸 수 있도록 되어있다.

따로 설정을 변경하지 않는다면 ~ 또는 @은 src 디렉토리를 가리킨다.

API: Context

인자 혹은 파라미터로 전달되는 context의 요소

{ app, store, route, params, env, isDev, isHMR, redirect, error }

  • app (NuxtAppOptions): 모든 플러그인을 포함하고 있는 Vue 인스턴스 옵션
  • store (Vuex Store)
  • route (Vue Router Route)
  • params (Object): route.params
  • query (Object): route.qurey
  • env (Object): nuxt.config.js에 설정되어 있는 환경변수
  • isDev (Boolean)
  • isHMR (Boolean)
  • redirect (Function)
  • error (Function)
Written by@Jkun
...

GitHub