Vue 002 라우터

• index.js
• 사용자가 메뉴를 클릭할 때 마다 해당하는 path가 있고 App.vue 에서 경로가 path 정보에 해당하는 값이다.

.
.
.

const routes = [         //오브젝트로 들어가 있다.
  {
    path: '/',           // App.vue에서 연결되는 path key
    name: 'home',        // 동일한 이름이 있으면 안된다.
    component: HomeView  // path키를 사용해 불러왔을 때 실제로 가져올 컴포넌트
  },
  
.
.
.

• Router에 컴포넌트를 import 하는 방법1
  상단에 임포트해서 불러오기

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue' //이런식으로 상단에 정리할 수 있다.
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView //여기로 불러온 것
  },
  .
  .
  .

• Router에 컴포넌트를 import하는 방법2 
  오브젝트 안에서 불러오기

.
.
.
  {
    path: '/about',
    name: 'about',
    // route level code-splitting 
    // 라우터 레벨로 코드 나누기
    // this generates a separate chunk (about.[hash].js) for this route
    // 이 라우트를 위해 분리된 chunk파일(about.[hash].js)을 만든다.
    // which is lazy-loaded when the route is visited.
    // 지연로드한다
    //컴포넌트 안에 화살표 함수 형대로 들어가서 import해준다 {}로 감싸줘도됨 
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]
.
.
.

• 차이
  • chunk-venders.js에서는 내가 제작하지 않았지만  필요한 외부 js코드가 들어가 있다. 
  • app.js 에는 내가 생성하고 import한 컴포넌트가 컴파일되어 들어간다.
• webpackChunkName 이름을 바꾸면 브라우저 Network에서 이름이 바뀐다. 
• 괄호 안에 "webpackPreFetch:true" 를 추가하면 rel="prefetch"로 등록되는데
  미래에 사용될 가능성이 높을 리소스들을 prefetch로 등록해주면 리소스를 가져와서 캐시에 저장한다.
  캐시에 저장된 파일은 해당 기능을 사용할때 출력된다.
  --반대로 prefetch가 안되어있으면 캐시에 저장하지 않는 것이다.
  
  • 장점 : 캐시에 이미 저장되어있는 것이기 때문에 사이즈가 커져도 기능 사용이 빠르다.
  • 단점 : 처음에 화면 열리는 순간에 시간이 오래 걸리고
    혹시 그 기능을 사용하지 않을 수도 있는데 로드 되어서 낭비가 될수도 있다.
  • 대다수의 사용자가 사용할 것 같은 기능 or 페이지나 복잡도가 높은 기능 or 페이지는 prefetch 해 두면 좋다.
  • 사용자가 접속할 빈도가 낮은 기능 or 페이지나 사이즈가 작은 기능 or 페이지는 안해도 된다.

화면 하나하나 개발하는것도 중요하지만 이런식으로 사용자를 생각해주는것도 아주 중요하다.

화면 구성과 시각적으로의 경험 뿐만 아니라 보이지 않고 느끼는 것만으로의 사용자 경험 역시 중요한 것이다.

 

디자인과 경험에만 대단한 초점을 맞추고 있었고 흔히들 듣기만 할 수 있었던 무슨 시간 몇퍼센트 단축한 경험이 있습니다 등등의 것들은 어디에서도 접해볼 수 없었다. vue의 route를 공부하면서 경험의 기준을 다시금 잡게 된 것 같다