[Vue.js] Nuxt.js - Vue를 좀 더 쉽게 적용해주는 프레임워크

Nuxt.js란?

Nuxt.js는 Vue.js 애플리케이션 개발을 보다 강력하고 사용하기 쉽게 만들어 주는 프레임워크이다. 우리는 앞서 Vue.js가 어떻게 구성되고 웹 어플리케이션으로 만들어 지는지 확인해보았다. 이후 개발자들은 조금 더 빠른 개발 속도를 위해 Vue.js를 빠르게 적용하는 방법을 고안했고, 이를 프레임워크로 만들었다.

Nuxt.js 설치

Nuxt.js는 프레임워크이기 때문에 미리 개발 환경 세팅을 위한 설치가 필수적이다. 비슷한 개념으로 Spring Framework와 React.js를 생각하면 편할 것이다. nuxt 프레임워크를 사용하기 위해 우선 패키지를 만들고 해당 패키지에 Nuxt 프레임워크 사용을 알려야한다.

yarn create nuxt-app </Directory>

? Project name {프로젝트 이름}

? Project description My epic {프로젝트 설명}

? Use a custom server framework {사용할 프레임워크 선택}

? Use a custom UI framework {사용할 UI 프레임워크 선택}

? Choose rendering mode {렌더링 모드(SPA / Universal) 선택}

? Use axios module {Axios 모듈 사용 유무 선택}

? Use eslint {ESLint 사용 유무 선택}

? Use prettier {Prettier 사용 유무 선택}

? Author name {제작자 이름}

? Choose a package manager {사용할 패키지 매니저(yarn, npm) 선택}

Nuxt.js 폴더 구성

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

.nuxt

보통은 nuxt 프로젝트 생성 시 내부적으로 생성되는 파일모음인 듯? 직접 건들이는 일은 거의 없음, 대충 보면 axios를 쓰는지, middleware를 쓰도록 초기에 설정했는지 알 수 있을 듯

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을 하게 되면 모듈이 설치되는데, 이 떄 설치되는 모듈 정보를 이곳에서 포함하게 된다.

Nuxt.js Setting

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

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

head

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

1
2
3
4
5
6
7
8
9
10
11

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' }
    ]
  },
Colored by Color Scripter

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

cache

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

1
2
3
4

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

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

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

CSS

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

loading

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

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

1
2
3
4

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

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

1
2
3
4
5
6

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

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

★ Nuxt.js Route

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

=> 파일과 폴더 생성에 따라 Url이 생성된다.

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

정적 라우트

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

1
2
3
4
5

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

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

pages/index.vue : [domain]/
pages/user/index.vue : [domain]/user/ -> 폴더에 대한 주소로 url을 설정하고 싶을 때, 폴더 내에 index.vue 생성

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

pages/user/one.vue : [domain]/user/one -> 파일에 대한 주소로 url을 설정하고 싶을 때, vue 파일 단순 생성

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

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

1
2
3

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

동적 라우팅

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

동적 URL을 만들기 위해서는 디렉토리 또는 vue 파일 이름 앞에 언더바 키워드(_)를 사용한다.

-> Angular의 동적 url 파라미터 역할을 한다.

1
2
3
4
5
6
7

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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'
    }
  ]
}
Colored by Color Scripter

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

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

1
2
3
4
5
6
7
8
9
10

<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>

Colored by Color Scripter

Pages 개념과 신규 API

(기존 vue component에서 제공하는 것 이외의 API 항목이 추가됨)

Nuxt 프로젝트의 페이지는 모두 vue 문서로 구성된다. Nuxt 프로젝트에서는 수월한 페이지 구성을 위해서 여러 형태의 메소드 제공을 제공한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Pages API는 페이지의 Script 태그에 존재한다.(vue와 동일)

asyncData () : Data() 항목의 비동기 버전

- 서버에서 데이터를 가져와서 사용할 때 asyncData 메소드를 통해 구현할 수 있다.

- 매우 기본적으로 사용되는 메소드로 사용자 입장에서는 Data 메소드와 동일한 기능을 수행한다.

- 두 방식의 차이는 초기화시키는 데이터가 동기적으로 실행되는지, 비동기적으로 실행되는지에 대한 차이입니다.

- context엔 url에 있는 params나 query를 가져온다.

fetch()

- 페이지가 렌더링 되기 전에 스토어를 채우기 위해 사용한다.

- asyncData처럼 데이터를 가져오는 기능을 수행하지만 데이터를 초기화 하는 대상이 다르다.

- asyncData는 컴포넌트에서 사용하는 데이터를 초기화 하는 반면에 fetch는 데이터 스토어에 데이터를 넣기 위해 사용한다.

fetch 메소드에 있는 데이터는 페이지를 이동하거나 서버사이드로 가기 전에 데이터를 로딩

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<template>
  <h1>Stars: {{ $store.state.stars }}</h1>
</template>

<script>
export default {
  fetch ({ store, params }) {
    return axios.get('http://my-api/stars')
      .then((res) => {
        store.commit('setStars', res.data)
      })
  }
}
</script>

head()

- 페이지에 대한 특정 메타를 설정할 수 있다. 각 페이지에서 html의 head 태그를 수정하는 기능을 담당한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<template>
  <h1>{{ title }}</h1>
</template>

<script>
export default {
  data () {
    return {
      title: 'Hello World!'
    }
  },
  head () {
    return {
      title: this.title,
      meta: [
        { hid: 'ID', name: 'context', content: 'discription' }
      ]
    }
  }
}
</script>

Layout 메소드

Layout 메소드는 해당 페이지에서 사용할 레이아웃을 가져오는 기능을 한다. 레이아웃은 Layout 디렉터리에 반드시 저장되어 있어야 한다. 레이아웃은 속성 형태로 정의될 수 있고 메소드 형태로도 정의할 수 있다. 별도로 설정하지 않으면 default로 설정 됩니다.

1
2
3
4
5
6
7
8
9

middleware 메소드

컴포넌트가 호출되기 전에 특정 코드를 실행시키는 Middleware를 지정해준다. 미들웨어는 페이지를 렌더링 하기 전에 호출된다. 미들웨어 역시 Middleware 디렉터리에 미리 파일이 저장되어 있어야 한다.

-> 주로 권한 체크 용도에 사용되는 듯 하다.

1
2
3
4
5

middleware./authenticated.js

1
2
3
4
5
6

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

ScrollToTop 메소드

- ScrollToTop은 페이지의 스크롤 상단/하단 여부를 결정짓는 속성이다.

1
2
3
4
5
6
7
8
9

<template>
<h1>My child component</h1>
</template>

<script>
export default {
scrollToTop: true
}
</script>

ScrollToTop 속성이 false라면 하단으로, true라면 상단으로 움직인다.

Layout

Document의 개념

Nuxt 프로젝트에서 화면 구성은 페이지에 들어가게 된다. 하지만 header나 footer 처럼 여러 페이지에 거쳐 공통으로 들어가는 요소들은 매번 렌더링 하는 작업은 매우 번거롭다. 이러한 반복적인 요소를 모아서 한번에 담을 수 있도록 제공하는 방법이 있다. 그것이 바로 Layout이다. 그리고, 레이아웃을 포함하는 문서를 만들기 위해 프로젝트에서 사용하는 HTML file에 대한 기본 양식을 만들 수 있다. 이것이 바로 도큐먼트(Document)이다.

레이아웃 (Layout)

Nuxt 프로젝트에서 사용할 레이아웃은 layouts 디렉터리에 생성한다.

<default.vue>

1
2
3
4

레이아웃의 기본 코드는 위와 같이 구성된다. 레이아웃을 만들기 위해서는 반드시 <nuxt> 컴포넌트가 있어야한다. 레이아웃을 호출하기 위한 컴포넌트가 이곳에 작성되기 때문이다.

- error 레이아웃

네트워크 프로젝트에서는 에러가 자주 발생한다. 사용자 입장에서 네트워크 에러가 나왔을 때 아무런 메세지가 주어지지 않는다면 서비스 사용에 혼란이 올 것이고. 서비스 이탈의 주요 원인이 된다. 따라서, 적절한 에러 메세지를 통해 사용자가 이탈하지 않도록 서비스를 구성하는 것이 중요하다.

네트워크 서비스를 사용하던 도중 존재하지 않는 페이지에 접속하게 된다면 404 에러가 나타나게 된다. URL에 사용자가 잘못 입력하거나, 서비스의 링크를 잘 못 설정하는 경우에 나타나는 에러로 아마 많은 사람들이 자주 겪은 에러일 것이다.

레이아웃 예제

3-1) default.vue

NBA의 선수들과 각 팀을 소개하는 서비스를 만들고자 한다. 이를 위해서 우리는 웹 페이지에 총 3개의 디렉토리를 만들것이다. 처음 홈페이지에 접속하게 되면 Team / Player / Rank 버튼을 눌러서 각각의 디렉토리 초기 화면으로 이동할 수 있다. 그리고 어느 페이지에서든 이동이 가능하도록 레이아웃으로 설정 할 것이다.

1
2
3
4
5
6
7
8
9

<template>
  <div class =" ">
    <nuxt-link to ="/"> Home Page </nuxt-link><br>
    <nuxt-link to ="/player"> 1.Player </nuxt-link><br>
    <nuxt-link to ="/team"> 2.Team </nuxt-link><br>
    <nuxt-link to ="/rank"> 3.Rank </nuxt-link><br>
    <nuxt />
  </div>
</template>
Colored by Color Scripter

해당 레이아웃은 서비스의 모든 페이지에 노출이 될 것이다.(page에서 따로 layout 항목을 지정하지 않으면 기본값이 default이기 때문이다.)

3-2) 사용자 정의 레이아웃

default.vue에 선언되는 기본 레이아웃이 아닌 사용자 정의 레이아웃도 만들 수 있다.

<layout/player.vue>

1
2
3
4
5
6
7

<template>
  <div class =" ">
    <h3> NBA Player </h3>
    <div> This page will show NBA Player Infomation</div>
    <nuxt />
  </div>
</template>
Colored by Color Scripter

다음과 같은 사용자 정의 레이아웃을 만들었다. 이 레이아웃은 player 디렉터리 아래에 등록된 페이지에 해당된다.

<pages/player/main.vue>

1
2
3

export default {
layout: 'player'
}

페이지 디렉토리 중 player 하위에 새로운 vue 페이지를 만든다. 그리고 선언부에 다음과 같이 레이아웃 키워드를 연결해준다. 그리고 main.vue 상단에는 웹 페이지의 내용을 구성한다. 이런 구조를 통해 만들어진 웹 페이지는 아래와 같다.

# 참고

- https://adrian0220.tistory.com/195?category=813348

저작자표시

'[DEV] App Dev ∕ Web Front > Framework ∕ Vue' 카테고리의 다른 글

[Vue.js] Nuxt.js 강의 요약 (0)	2022.03.17
[vue.js] 사용자 입력 폼 만들기[메인 튜토리얼] (0)	2020.12.03
[vue.js] 싱글 파일 컴포넌트 (0)	2020.12.03
[vue.js] 프로젝트 생성 도구 : Vue CLI (0)	2020.12.03
[vue.js] 템플릿 문법 - 실전 (0)	2020.12.02

[Vue.js] Nuxt.js - Vue를 좀 더 쉽게 적용해주는 프레임워크

Nuxt.js란?

Nuxt.js 설치