127. Reviewing the Router Configuration

vue cli start 링크open in new window

npm create vue@latest

프로젝트 링크

이번엔 CLI가 생성한 라우터 구성을 에디터에서 검토할 시간을 갖겠습니다.
소스 디렉토리 안의 main.ts 파일을 엽니다.
이 파일은 구성이 시작되는 곳입니다.

import './assets/base.css'
import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import type { App as AppType } from 'vue'
import App from './App.vue'
import router from './router'
import VeeValidatePlugin from './includes/validation'
import { auth } from './includes/firebase'

let app: AppType | null = null
auth.onAuthStateChanged(() => {
  if (!app) {
    app = createApp(App)

    app.use(createPinia())
    app.use(router)
    // app.use(VeeValidatePlugin, { foo: 100 })
    app.use(VeeValidatePlugin)

    app.mount('#app')
  }
})

vue-router 모듈은 플러그인 형태로 제공됩니다.
사용하려면 다른 import문과 함께 상단에 import해야 합니다.
router라는 파일이 import되고 있습니다. 이 파일의 내용은 곧 살펴보겠지만, 어디에서 사용되는지 먼저 살펴봅시다.
아래쪽에서 use 함수를 호출하고 있고, router 객체가 전달되고 있습니다.
설정이 조직을 위해 별도의 파일에 구성되어 있다고 추론할 수 있습니다.
다음으로 라우터 파일을 엽니다.

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

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  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('../views/AboutView.vue')
    }
  ]
})

export default router

이 파일은 라우터 디렉토리 안의 index.js 파일입니다.
세 가지가 import되고 있는데, 처음 두 개는 createRouter와 createWebHistory 함수이고, 세 번째는 홈 컴포넌트입니다.
홈 컴포넌트는 Views 디렉토리 안에서 찾을 수 있습니다.
우리는 지금 그것을 무시하고, 라우터가 어떻게 구성되는지에 집중하고자 합니다.

router라는 변수가 정의되고 있으며, 그 값은 createRouter 함수에 의해 반환된 객체입니다.
이 객체는 애플리케이션에서 사용할 수 있는 메소드, 속성 및 컴포넌트를 포함합니다.
이 객체는 파일에서 export되고, main.ts 파일에서 새 플러그인을 등록하는 데 사용되는 객체입니다.

라우터 구성 파일로 돌아가 보면, 함수는 구성 설정의 객체를 인수로 받습니다.
하나씩 살펴보겠습니다.
첫 번째 설정은 히스토리입니다.
이 옵션을 사용하여 브라우저에서 히스토리 모드를 활성화할 수 있습니다.
대부분의 최신 브라우저는 History API라는 API를 제공하며, 페이지를 새로고침하지 않고도 주소 표시줄의 URL을 변경할 수 있습니다.
이 속성의 값은 createWebHistory 함수에 전달되며, 앱을 탐색하는 데 사용할 History API를 계획하는 방식에 대한 객체여야 합니다.

다음 속성은 경로들입니다.
이 속성은 사용자가 애플리케이션에서 접근할 수 있는 경로들의 배열이 될 것입니다.
이 경로들은 우리 애플리케이션을 위해 생성되었습니다.
이것들은 단지 예시일 뿐이며, 우리는 처음부터 경로를 생성할 것입니다.
경로 배열은 비어 있습니다.
홈 컴포넌트는 더 이상 사용되지 않으므로 import 문을 안전하게 제거할 수 있습니다.
저는 더 나은 관리를 위해 경로들을 변수로 외부화하는 것을 선호합니다.
이 단계는 선택 사항입니다.
router 변수 위에 paths라는 빈 배열을 정의합니다.

다음으로 이 변수로 구성 객체를 업데이트합니다.
이 파일에서 마지막으로 발생하는 것은 router 객체가 export됩니다.
export된 객체는 Vue 인스턴스에 등록되며, 애플리케이션에 라우팅을 가능하게 합니다.
다음 강의에서는 일부 경로를 생성하기 시작할 것입니다.

요약하자면, 이 강의에서는 Vue CLI로 생성된 라우터 설정을 검토하고, Vue 라우터 모듈의 사용 및 구성 방법에 대해 설명합니다.
구성은 main.ts 파일과 라우터 설정이 있는 별도의 index.js 파일에서 이루어집니다.
라우터는 브라우저의 히스토리 모드를 활성화하고 애플리케이션의 기본 URL을 설정하는 등의 기능을 제공합니다.
경로 설정은 애플리케이션에서 사용자가 접근할 수 있는 다양한 경로를 배열로 정의하며, 이 구성을 통해 라우팅이 애플리케이션에 적용됩니다.

# 127. Reviewing the Router Configuration

127. Reviewing the Router Configuration