Vue.js 기초 - Vue Router 설정

라우팅이란?

특정 웹 페이지에 접속했을 때, 메뉴 또는 특정 링크를 클릭했을 때 화면이 전환되는 때. 이때 브라우저 주소란에 페이지가 이동될 때마다 url이 달라지는것을 볼 수 있다.

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

라우팅이란 클라이언트에서 url 주소에 따라 페이지가 전환되는 것으로 이해하면 된다. 일반적인 웹 프로젝트가 아닌 Vue 프로젝트 내부에서는 미리 url 주소를 정의하고, 각 주소마다 Vue 페이지를 연결해 놓는다. 사용자가 메뉴를 클릭하거나, 브라우저 주소를 갱신했을 때 미리 정의된 url 주소에 해당하는 Vue 페이지로 화면 전환한다.

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

Vue-Router 설치

이 전 포스팅에서 3가지의 프로젝트를 생성했지만 Router과 Vuex에 대해서 직접 설치하며 알아볼 것이기에 가장 처음 기본으로 생성했던 vue-project로 이동한다.

터미널에 명령어 입력해서 라우터 설치 및 기본 설정을 완료할 수 있다.

@vue/cli-plugin-router가 설치된다.

설치가 완료되면 src 폴더에 router, views 퐅더와 파일이 생성된다.

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

서버 기동 후 http://localhost:8081/ 로컬주소를 통해 접속해본다.

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

App.vue 파일을 열어보면

<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </nav>
  <router-view/>
</template>

<router-link to="/">Home</router-link> 와

<router-link to="/about">About</router-link> 부분이 있다.

링크에서 Home과 About을 눌러보면 Home을 눌렀을때는 url이 http://localhost:8081/이고 About을 누르면 http://localhost:8081/about으로 바뀌는 것을 확인할 수 있다. url창에서 확인되는 주소에 해당하는 부분이 router-link to=”여기”와 동일한 것을 알 수 있다.

이번에는 router 폴더의 index.js파일을 열어보면

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

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 = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

router 배열에는 2개의 라우터가 등록되어 있는것을 볼 수 있다.

첫 번째는 home 컴포넌트이고, 두 번째는 about 컴포넌트에 대한 라우트이다.

    path: '/',    name: 'home',    component: HomeView

=> path : 브라우저에서 접속하는 url 주소를 정의한다. => component: 지정된 path로 들어왔을 때 보여줄 vue 컴포넌트

index.js 파일 두 번쨰 줄에 있는 import HomeView from ‘../views/HomeView.vue’가 실제 src->views 폴더에 있는 Home.vue 파일을 참조한다. 앞으로 개발할 화면에 해당하는 vue 파일을 이렇게 import하고, router 안에 특정 path와 맵핑을 해주면 사용자가 접속하는 브라우저 url 주소에 따라 원하는 vue 파일을 보여줄 수 있다.

router 배열 두번쨰 값(about 부분)에 path와 name 밑에 주석 처리된 부분이 있다.

// route level code-splitting

=> 라우트 레벨에서 코드를 분할하는 방법

// this generates a separate chunk (about.[hash].js) for this route

=> 이 라우트에 대한 chunk 파일이 분리되어 생성된다.

// which is lazy-loaded when the route is visited.

=> 이 라우트에 방문했을 때 lazy-load(지연로드) 된다.

 component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')

=> 주석처럼 라우트 레벨에서 코드를 분할한 후 별도의 chunk 파일을 생성하고, 실제 이 라우트를 방문했을 때 리소스를 로드하게 된다. 여기서 chunk 파일은 about이라는 이름으로 생성된다. 컴포넌트 import 시 /* webpackChunkName: “about” */ 라는 주석으로 chunk 파일 이름을 정의했기 때문

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

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

Vue CLI를 통해 빌드를 하면 소스코드가 하나의 파일로 합쳐지는데, 개인 프로젝트라면 몰라도 큰 규모의 프로젝트라면 전체 소스 코드가 하나로 합쳐지면서 파일 용량이 매우 커지게 된다. 이로인해 사용자가 초기에 웹 사이트를 방문하면 한 번에 큰 파일을 다운로드 받느라 초기 랜더링 시간이 오래 걸리게 되며 속도가 늦여져서 사용자에게 좋지 않다.

물론 페이지가 한번 로드되고 나면 페이지 전환이 매우 빠르다는 이점이 있지만, 사용자가 이용하는 페이지가 별로 없다면 사용하지도 않을 페이지 코드를 다운로드 받음으로써 속도가 느려지는 상황이 생긴다.

Lazy Load는 리소스를 컴포넌트 단위로 분리하여 컴포넌트 혹은 라우터 단위로 필요한 것들만 그때 그때 다운로드 받을 수 있게 하는 방법이다. Vue에서 Lazy Load를 사용할 때 한 가지 주의할 점이 있다. 앞서 살펴본 라우터에서 Lazy Load로 컴포넌트를 import 한 것은 내부적으로 Vue CLI의 prefetch 기능이 사용되는 것이다.

Vue CLI3부터 prefetch 기능이 추가되었다. prefetch 기능은 미래에 사용될 수 있는 리소스(앞 코드에서 보면 about과 같은 비동기 컴포넌트)를 캐시에 저장함으로써, 사용자가 접속했을 때 굉장히 빠르게 리소르를 내려줄 수 있다. 유용한 기능이지만 비동기 컴포넌트로 정의된 모든 리소스를 당장 사용하지 않더라도 캐시에 담아야 하는 부담이 있다.

Vue CLI에서 prefetch 기능은 기본값으로 true가 설정되어 있기 때문에 Lazy Load가 적용된 컴포넌트는 모두 prefetch 기능이 적용되어 캐시에 저장된다. prefetch 기능을 사용하면 request 요청 수가 증가한다. 비동기 컴포넌트로 정의된 모든 리소스를 캐시에 담기 때문에 Request 요청수가 많아지게 되므로 prefetch 기능을 적절한 곳에 적용하는 고민이 반드시 필요하다.

prefetch 기능이 기본적으로 true로 되어 있는 부분을 끄는 방법은

vue.config.js 파일에

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

위 코드를 추가해주면 prefetch 기능을 삭제할 수 있다. 기능을 삭제해도 비동기 컴포넌트, 즉 Lazy Load로 컴포넌트를 사용할 수 있다.

컴포넌트 import시 다음과 같이 처리하면 된다.

import(/* webpackChunkName: "about" */ '../views/AboutView.vue')

위 코드와 같이 import 시 주석 /* webpackChunkName: “about” */을 넣어주면 해당 컴포넌트에 대해서는 prefetch가 적용된다.

router/index.js의 첫 번째 줄을 보면 vue에서 라우팅을 처리하기 위해 vue-router를 import하는것을 볼 수 있다. 이렇게 정의된 router는 main.js에 등록을 해줘야 실제 적용이 되어서 사용할 수 있게 된다.

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

import { createApp } from 'vue'를 통해 router 폴더의 index.js가 import 된다.

마지막 줄에 createApp(App) 최상이 컴포넌트인 App.vue로 app을 생성하고, use(router) 코드를 주가해서 App.vue에서 router가 사용될 수 있도록 추가했다. 그리고 App.vue를 public 폴더의 index.html에 정의되어 있는 id = ‘app’인 html element에 마운트 시키게 된다.