[Vue.js] Vue Router 설정_ch.4

목차

• 라우팅이란?
• Vue-Router 설치
• Lazy Load 적용하기(비동기 컴포넌트)

 

 

 

본격적으로  프로그램을 구현하기에 앞서 가장 먼저 해야 할 일은 라우터를 설정하는 일이다.

 

 

 

라우팅이란?

vue와 같은 단일 페이지 애플리케이션의 경우 페이지 이동할 때마다 서버에 요청해서 페이지를 새로 갱신하는 것이 아니라, 클라이언트에서 미리 가지고 있던 페이지를 라우팅을 이용해서 화면을 갱신하게 된다.

즉, 라우팅이란 클라이언트에서 url 주소에 따라 페이지가 전환되는 것으로 이해하면 된다. 

Vue 프로젝트 내부에서는 미리 url 주소를 정의하고, 각 주소마다 Vue 페이지를 연결해 놓아 사용자가 메뉴를 클릭하거나 브라우저 주소를 갱신했을 때 미리 정의된 url 주소에 해당하는 Vue 페이지로 화면을 전환시킨다. 

 

Vue는 vue에서 제공하는 공식 플러그인 vue-router를 이용해서 라우팅을 쉽게 구현할 수 있다. 

 

 

Vue-Router 설치

터미널에 다음 명령어를 입력하여 vue-router 설치 및 기본 설정이 가능하다.

vue add router

history mode 사용 여부를 묻는데 'Y'를 입력한다.

@vue/cli-plugin-router가 설치된다. 설치가 끝나면 src 폴더에 router, views 폴더와 파일이 생성된다.

이 상태에서 다음 명령어를 입력하여 서버를 재시작한다.

npm run serve

브라우저에 http://localhost:8080을 입력한다.

화면 상단에 Home, About 링크가 생기고, 두 개를 번갈아 클릭해 보면 화면이 전환되는 것을 확인할 수 있다. vue-router 설치후 자동으로 시작 화면에 링크가 추가되고, router가 동작되는 샘플 파일이 자동으로 생성된다. 

 

vue-project/src/App.vue

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
  </div>
</template>

vue-project/src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

첫 번째 등록된 라우트와 두 번째 등록된 라우트의 가장 큰 차이는 첫 번째는 사용자가 해당 path에 접근하지 않더라도 이미 vue 파일을 import하는 것이고, 두 번째 방법은 path에 접근하기 전까지는 vue 파일에 대한 import가 일어나지 않는다. 

 

 

Lazy Load 적용하기(비동기 컴포넌트)

Vue CLI를 통해 빌드하면 소스 코드가 하나의 파일로 합쳐지는데, 큰 프로젝트에서는 전체 소스 코드가 하나로 합쳐지면서 파일 용량이 매우 커진다. 이 때문에 초기 렌더링 시간이 오래 걸리게 되며 렌더링 속도가 너무 늦어져서 사용자가 좋지 않은 경험을 가질 수 있다. 사용자가 이용하는 페이지가 별로 없다면, 사용하지도 않을 전체 페이지 코드를 다운받음으로써 생기는 이점이 없다.  

 

Lazy Load는 리소스를 컴포넌트 단위로 분리하여 컴포넌트 혹은 라우터 단위로 필요한 것들만 그때 그때 다운받을 수 있게 하는 방법이다. 

Vue에서 Lazy Load 사용 시 한 가지 주의사항이 있다. 앞에서 살펴본 라우터에서 Lazy Load로 컴포넌트를 import 한 것은 내부적으로 Vue CLI의 prefetch 기능이 사용되는 것이다. 

 

Vue CLI3부터 prefetch 기능이 추가되었다. prefetch 기능은 미래에 사용될 수 있는 리소스(about과 같은 비동기 컴포넌트)를 캐시에 저장함으로써, 사용자가 접속했을 때 빠르게 리소스를 내려줄 수 있다. 매우 유용한 기능이나, 비동기 컴포넌트로 정의된 모든 리소스를 당장 사용하지 않더라도 캐시에 담는 비용이 발생한다. 즉, 별도로 분리된 chunk 파일 각각에 대한 request가 일어나고, 각각의 파일을 다운받아 캐시에 저장하게되는 것이다. preftech 사용 이유가 렌더링 시간을 줄이기 위함인데, 잘못 사용하면 오히려 렌더링 시간이 늘어나게 된다. 

 

Vue CLI에서 prefetch 기능은 기본값으로 true로 설정되어 있어, Lazy Load가 적용된 컴포넌트는 모두 prefetch 기능이 적용되어 캐시에 저장된다. prefetch 기능을 사용하면 request 요청 수가 증가한다. 비동기 컴포넌트로 정의된 모든 리소스를 캐시에 담기 때문에 Request 요청 수가 많아지게 된다. 요청수가 많다는 것은 서버와의 통신 수가 증가한다는 것이고, 내려받는 리소스 크기도 크다는 것이다.

prefetch 기능을 사용하지 않으면 라우터가 이동될 때마다 해당 라우터에서 필요한 리소스를 그때 그때 가져오게 된다. 물론 한번 가져온 리소스는 다시 요청하지는 않는다. 

prefetch 기능을 사용하면 애플리케이션의 첫 화면 접속 시 렌더링 속도가 느려질 수 있다. 아직 사용하지 않고 있는 화면에 대한 리소스를 모두 내려받고 나서야 첫 화면에서 사용되는 리소스를 내려받는다. 

 

오히려 초기 렌더링은 prefetch 기능을 사용하지 않아야 더 빨리 로딩이 된다. prefetch 기능은 다른 화면에서 사용될 리소스를 미리 내려 받아서, 애플리케이션에서 화면 전환 시 빠른 성능을 가져온다는 장점 때문에 사용된다. 그래서 정말 필요한 컴포넌트에 대해서 prefetch 기능을 적용하는 것이 좋다. 이동하는 컴포넌트에서 사용되는 리소스가 매우 크다면, prefetch 기능을 사용하면 좋다는 것.

 

그래서 prefetch 기능을 적절한 곳에 적용하는 고민이 반드시 필요하며, 이 부분을 반드시 고려해야 좋은 애플리케이션을 서비스할 수 있다. 

 

prefetch 기능을 끄는 방법은 다음과 같다.

vue.config.js 파일을 생성하고 다음 코드를 추가한다. 

module.exports = {
	chainWebpack: config => {
    	config.plugins.delete('prefetch'); //prefetch 삭제
    }
}

 

prefetch 기능을 삭제해도 비동기 컴포넌트 즉, Lazy Load로 컴포넌트를 사용할 수 있다. 컴포넌트 import 시 다음과 같이 처리하면 된다.

import(/* webpackPrefetch: true */ './views/About.vue');

import 시 주석 /* webpackPrefetch: true */을 넣어주면 해당 컴포넌트에 대해서는 prefetch가 적용된다. Vue 애플리케이션 개발 시 기본적으로 prefetch 기능은 끄는 것을 권장한다. 

 

Vue에서 prefetch 기능을 사용해서 비동기 방식으로 컴포넌트를 로드하는 것은 매우 중요한 부분이다.
어떤 컴포넌트는 하나의 파일로 내려받을지, 어떤 컴포넌트는 prefetch 적용해서 캐시에 넣어 사용할지, 어떤 컴포넌트는 prefetch 없이 사용자 접속 시점에 내려줄지를 어떻게 설계하느냐에 따라 전체 애플리케이션을 효율적으로 사용할 수 있게 되는 것이다. 
사용자가 접속할 가능성이 높은 컴포넌트는 한 번에 다운로드 할 수 있게 설정하고, 사용자 접속 빈도가 낮은 컴포넌트는 prefetch를 적용하거나, 사용자 접속 시점에 리소스를 다운받게 해서 전체 애플리케이션에 대한 리소스를 내려받는 시점을 분리한다. 
시스템 운영을 통해 사용자가 접속하는 페이지 및 빈도에 대한 현황 조사를 통해 지속적으로 라우터 설정을 개선해 나가는게 중요하다. 

 

 

다시 본론으로 돌아와, 이렇게 정의된 router는 main.js에 등록을 해줘야 실제 적용이 되어 사용할 수 있게 된다. 

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

 

 

 

 

 

 

※ 출처 고승원, 『Vue.js 프로젝트 투입 일주일 전』, 비제이퍼블릭, p72-81.