티스토리 뷰
Nuxtjs에는 정해진 디렉터리 별 목적이 있습니다. 그 목적을 알고 사용해야 원하는 결과물 얻을 수 있습니다.
aseets
컴파일되지 않아야 하는 css, sass, image, fonts를 넣는 디렉터리입니다.
static
서버 루트에 직접 매핑되어 바뀌지 않을 파일을 넣는 디렉터리입니다. 대표적으로 파비콘(favicon) 있습니다.
static 폴더 아래 파비콘이 존재하면 http://localhost:3000/favicon.ico 형태로 접근 가능합니다.
pages
애플리케이션의 view와 routes와 관련 있는 중요한 디렉터리입니다.
언더바(_)로 파일명이 시작할 경우 동적으로 라우팅 됩니다.
예를 들어 pages/todo/create.vue 형태로 구성하면 localhost/todo/create로 접근하면 해당 페이지가 노출됩니다.
특정 id 값을 가진 todo를 보고 싶다면 pages/todo/_id.vue 형태로 구성하면 localhost/todo/1로 접근하면 됩니다.
layouts
특정 page의 layout을 변경하고 싶을 때 사용합니다.
layouts 폴더 아래에 정의해두고 각 페이지에서 layout 값을 변경하여 사용할 수 있습니다.
header, footer는 같고 콘텐츠 영역만 변경되어야 하는 경우 사용하면 편리합니다.
layouts/default.vue 생성하면 모든 pages에 동일하게 적용됩니다.
layouts/blog
<template>
<div>
<Header />
<Nuxt />
<Footer />
</div>
</template>pages/post
<script>
export default {
layout: 'blog',
// OR
layout (context) {
return 'blog'
}
}
</script>
components
Vue.js 컴포넌트를 넣은 디렉터리입니다.
store
Vuex Store를 넣는 디렉터리입니다. Vuex Store는 Nuxt.js와 함께 제공되지만 기본적으로 비활성화되어 있습니다.
이 디렉터리에 index.js 파일을 만들면 스토어가 활성화됩니다.
middleware
미들웨어를 사용하면 페이지 또는 페이지 그룹 (레이아웃)을 렌더링 하기 전에 실행할 수 있는 사용자 정의 기능을 정의할 수 있습니다.
기명 방식과 무기명 방식이 있습니다.
기명 방식은 다음처럼 사용합니다. 별도의 미들웨어 파일을 생성한 후
middleware/authenticated.js
export default function ({ store, redirect }) {
// If the user is not authenticated
if (!store.state.authenticated) {
return redirect('/login')
}
}사용할 곳에 middleware 속성으로 추가합니다. 한 개는 아래처럼 문자열로 여러 개는 배열로 추가합니다.
<template>
<h1>Secret page</h1>
</template>
<script>
export default {
middleware: 'authenticated'
}
</script>무기명 방식은 별도의 파일을 생성하지 않고 다음과 같이 middleware 속성에 직접 구현합니다.
<template>
<h1>Secret page</h1>
</template>
<script>
export default {
middleware({ store, redirect }) {
// If the user is not authenticated
if (!store.state.authenticated) {
return redirect('/login')
}
}
}
</script>
plugins
최상위 Vue.js 애플리케이션을 인스턴스 화하기 전에 실행할 자바 스크립트 플러그인이 포함되는 디렉터리입니다.
외부 Vue 플러그인에 함수 또는 상수 추가할 수 있습니다. plugins /에 파일을 만들고 매번 Vue.use()를 사용해서 추가해야 하고 nuxt.config.js의 플러그인에 경로를 추가해야 합니다.
nuxtjs/aixos 같은 외부 패키지를 추가할 때
아래 코드는 500 에러가 발생할 경우 sorry 페이지로 리다이렉트 합니다. 동작을 플러그인에 추가했습니다.
nuxt.config.js의 modules에 axios를 추가하면 $axios로 접근 가능합니다.
plugins/axios.js
export default function ({ $axios, redirect }) {
$axios.onError(error => {
if (error.response.status === 500) {
redirect('/sorry')
}
})
}nuxt.config.js
module.exports = {
modules: ['@nuxtjs/axios'], // 그냥 axios는 안됨
plugins: ['~/plugins/axios.js']
}pages/index.vue
아래처럼 사용 가능합니다.
<template>
<h1>{{ post.title }}</h1>
</template>
<script>
export default {
async asyncData ({ $axios, params }) {
const post = await $axios.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
return { post }
}
}
</script>pages/index.vue
axios 모듈을 import 해서 사용하는 경우에는 아래처럼 사용 가능합니다.
<script>
import axios from 'axios'
export default {
async asyncData ({ params }) {
const { data: post } = await axios.get(`https://api.nuxtjs.dev/posts/${params.id}`)
return { post }
}
}
</script>Vue 플러그인을 사용할 경우
해당 플러그인을 import 한 후 Vue.use로 등록해서 사용합니다.
plugins/vue-tooltip.js
import Vue from 'vue' import VTooltip from 'v-tooltip' Vue.use(VTooltip)
그리고 plugins 목록에 추가합니다.
export default {
plugins: ['~/plugins/vue-tooltip.js']
}
$root 및 컨텍스트에 삽입
애플리케이션 전체에서 사용되는 플러그인인 경우 다음처럼 사용 가능합니다.
plugins/hello.js
export default ({ app }, inject) => {
// Inject $hello(msg) in Vue, context and store.
inject('hello', msg => console.log(`Hello ${msg}!`))
}export default {
plugins: ['~/plugins/hello.js']
}example-component.vue
export default {
mounted() {
this.$hello('mounted')
// will console.log 'Hello mounted!'
},
asyncData({ app, $hello }) {
$hello('asyncData')
// If using Nuxt <= 2.12, use 👇
app.$hello('asyncData')
}
}store/index.js
export const state = () => ({
someValue: ''
})
export const actions = {
setSomeValueToWhatever({ commit }) {
this.$hello('store action')
const newValue = 'whatever'
commit('changeSomeValue', newValue)
}
}클릭하거나 어떤 특정한 동작을 했을 때 로그를 쌓고 싶다면 이 방법을 활용해 봐도 좋겠네요.
