[Vue.js 강의] 4강 Vue Router 설정

Vue Router 설정

사용자가 접속한 주소에 따라 페이지(컴포넌트)가 달라지는 것을 라우팅이라고 한다.
라우팅이 무엇인지 이해하고
Vue에서 라우팅 처리를 위해 사용하는 플러그인인 vue-router에 대한 설치 및 사용 방법에 대해서 알아본다.
또한 Vue CLI의 prefetch 기능에 대해서 정확히 이해하고,
컴포넌트의 로딩 시점을 설계하는 방법에 대해서 익힌다.

---

라우팅이란?

Vue와 같은 단일 페이지 애플리케이션의 경우 페이지를 이동할 때마다 서버에 요청해서 페이지를 새로 갱신하는 것이 아니라 클라이언트에서 미리 가지고 있던 페이지를 라우팅을 이용해서 화면을 갱신한다.
라우팅이랑 클라이언트에서 url 주소에 따라 페이지가 전환되는 것으로 이해하면 된다.

---

Vue-Router 설치

1. vue.cmd add router
2. npm run serve -- --port 8081
3. Home - About 링크가 생성된 것을 확인하고 클릭을 해본다.

#index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'  //1. 실제 파일 참조, path에 접근하지 않더라도 로딩

const routes = [
  {
    path: '/',  // 2. 브라우저에서 접속하는 url 주소
    name: 'Home',
    component: Home // 3. 지정된 path로 들어왔을 때 보여줄 vue 컴포넌트
  },
  {
    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.
    // 4. lazy load 적용하기, path에 접근할때 로딩
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')     
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

---

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

Vue CLI를 통해 빌드하면 소스 코드가 하나의 파일로 합쳐지는데, 큰 프로젝트에서는 전체 소스 코드가 하나로 합쳐지면서 파일 용량이 매우 커진다. 이 때문에 사용자가 웹사이트에 처음 접속했을 때 한 번에 큰 파일을 다운로드 받느라 초기 랜더링 시간이 오래 걸리게 되며 랜더링 속도가 너무 늦어져서 사용자가 좋지 않은 경험을 가질 수 있다.
Lazy Load는 리소스를 컴포넌트 단위로 분리하여 컴포넌트 단위로 분리하여 컴포넌트 혹은 라우터 단위로 필요한 것들만 그때 그때 다운받을 수 있게 하는 방법이다.
Vue CLI3로부터 prefetch 기능이 추가가 되었다. prefetch 기능은 미래에 사용될 수 있는 리소스(about과 같은 비동기 컴포넌트)를 캐시에 저장함으로써, 사용자가 접속했을 때 굉장히 빠르게 리소스를 내려줄 수 있다. 굉장히 유요한 기능이지만, 비동기 컴포넌트로 정의된 모든 리소스를 당장 사용하지 않더라도 캐시에 담는 비용이 발생한다.

#prefetch 기능을 끄는 방법
module.exports = {
  chainWebpack: config => {
    config.plugins.delete('prefetch'); //prefetch 삭제
  }
}

#prefetch 삭제 후 사용하는 방법
import(/* webpackPrefetch: true*/ './views/About.vue');

Vue 애플리케이션 개발 시 기본적으로 prefetch 기능은 끄는 것을 권장한다.