[vue]라우팅 방식 이해하기

서론

프레임워크 vue는 SPA(Single Page Application) 방식을 사용합니다. Single page라는 말 그대로 화면에 표현되는 html 파일은 단 한개인데, 이 안에 보여질 화면 요소들을(Components) JS코드를 이용해 동적으로 보여주는 구조를 갖고 있습니다. 즉, 사이트 내에서 사용자가 다른 화면으로 이동하면, html은 그대로 있고, 사용자가 보려는 화면의 url정보를 인식하고 해당 url에 맞는 컴포넌트를 동일한 html파일 내부에서 보여주게 됩니다.

 

이러한 과정을 라우팅이라고 하며, url경로에 따라 보여질 파일을 (1) 사이트에 접속하자 마자 다운받아서 준비해놓을지 (2) 사용자가 요청하면 그때 서버에 요청해서 처리할지 (3) 사용자가 요청은 안했지만, 일단 브라우저 캐시에 준비라도 시켜놓지 등에 따라 라우팅 방식을 3가지로 구분할 수 있습니다.

 

 

 

 

목차

• 라우터 작동 방식
• app.js 파일에 포함된 컴포넌트
• 별도의 js파일로 준비된 컴포넌트
• 브라우저 캐시에 미리 다운되고, 별도의 js파일로 준비된 컴포넌트

 

 

 

 

---

라우터 작동방식

라우터 기능을 포함한채로 vue프로젝트를 생성 했다면, 프로젝트의 router 폴더내 index.js 파일이 생성됩니다.

그 파일을 보면 아래와 같은 코드가 있습니다.

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

const routes = [
  {
    path: '/',  // url에 이용될 경로
    name: 'home', // 보여질 페이지의 이름
    component: HomeView // 보여질 컴포넌트
  }]

routes라는 배열안에 특정 path에 따라 표현될 componets가 적혀있고, path는 url의 일부가 되며, 사용자가 해당 url로 접근하면 위에 표기된 componets가 화면에 표시되는 구조를 갖고 있습니다.

 

 

 

 

 

 

---

app.js 파일에 포함된 컴포넌트

먼저, 첫 번째 방식인 app.js에 컴포넌트를 담는 방식을 알아보겠습니다.

위에서 작성한 코드를 다시 한번 보겠습니다.

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue' // 미리 import된 컴포넌트

const routes = [
  {
    path: '/',  // url에 이용될 경로
    name: 'home', // 보여질 페이지의 이름
    component: HomeView // 보여질 컴포넌트
  }]

위 코드를 보면 보여질 컴포넌트 HomeView는 이미 파일상단에 import가 되어있습니다. 즉, 사용자가 해당 path를 이용하지 않더라도 일단 사이트가 켜지면, 해당 컴포넌트를 다운받게 됩니다. 이럴 경우, 해당 컴포넌트는 app.js라는 파일에 담겨서 전송이 됩니다.

 

아래 화면은 개발자 도구에서 본 네트워크 화면입니다. app.js 파일에 컴포넌트 파일이 담겨있게됩니다.

 

 

 

 

 

 

---

별도의 js파일로 준비된 컴포넌트

그럼 위 코드에 새로운 path를 추가해보겠습니다.

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

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () =>
      import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }]

path: '/about'에 대응되는 component를 보시면, 앞서 설명드렸던 방식과 달리 화살표 함수로 구현을 해놨습니다. 즉, 사용자가 해당 url로 접근을 하면 그때 화살표 함수가 작동되며, 컴포넌트를 다운받습니다.

 

해당 url로 접근해보니, about.js라는 파일이 추가되었습니다. url로 접근하니 새롭게 다운로드 된겁니다.

그리고 컴포넌트를 담고 있는 파일 이름은 import 내부의 /* webpackChunkName: "about" */ 에서 정하는 것도 알 수 있습니다.

 

 

 

 

 

 

---

브라우저 캐시에 미리 준비되는 컴포넌트(prefetch 방식)

만약 컴포넌트가 무거워서 사용자의 url 접근에 따라 다운로드 하는 방식이 부담될 수 있습니다. 화면을 구성하는 데 시간이 소요될 수 있기 때문입니다. 이럴 때는 캐시에 미리 다운로드 받는 방법이 있습니다.

 

위 코드를 다시 갖고와서 path:'/about'의 component의 import 안에 webpackPrefetch:true라는 문구를 추가해 보았습니다.

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

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () =>
      import(/* webpackChunkName: "about", webpackPrefetch:true */ '../views/AboutView.vue')
  }]

 

 

webpackPrefetch:true 를 추가하자, 네트워크의 해당 컴포넌트 파일에 prefetch cache라고 표시된 것도 확인할 수 있고,

 

html 요소를 보면 head태그 내부에 link태그로 추가된 걸 확인할 수 있습니다.

이 방식은 페이지 리소스를 캐시에 미리 준비함으로서, 캐시에서 소스를 가져와 빠르게 화면을 구성할 수 있는 장점이 있습니다.

 

 

 

 

 

 

---

결론

위에서 라우터 3가지 방식에 대해 알아 보았습니다.

 

(1) 컴포넌트를 무조건 import 시키기(app.js에 컴포넌트가 담기는 구조) 

    - 사용자가 무조건 접속을 할 수밖에 없는 페이지일 경우에 활용

(2) 별도의 js파일로 분리하기(prefetch 미사용)

    - 사용자가 방문할 확률이 고정되지 않거나, 파일 크기가 작은 경우에 활용

(3) 별도의 js파일로 분리하면서 prefetch로 캐시에 미리 다운받기

    - 사용자가 방문할 가능성이 높은 페이지나, 용량이 무거운 경우에 활용

 

단순히 보기에, 대부분의 파일을 3번 방식으로 구성하면 좋을 것 같아 보입니다. 하지만, 이 방식 또한 브라우저 캐시 메모리를 차지하기 때문에 너무 많은 파일을 prefetch하게 되면, 오히려 사이트의 첫 화면을 구성하는 데 시간이 소요되어 사용자에게 속도가 느리다는 느낌을 줄 수 있습니다. 목적에 맞게 라우터 방식을 분배하여 효율화 하는 것이 중요할 것으로 생각됩니다.