[Vue.js] - 뷰 라우터(Vue Router) 설치 및 사용 방법

#Vue Router란?

Vue Router는 Vue.js 애플리케이션에서 클라이언트 측 라우팅을 가능하게 해주는 공식 라우팅 라이브러리입니다. Vue Router를 사용하면 다중 페이지 애플리케이션을 작성할 때 사용되는 전통적인 서버 측 렌더링과 달리, 사용자 경험을 향상시키는 빠른 페이지 로드와 부드러운 페이지 전환을 제공합니다.

Vue Router는 URL을 사용하여 애플리케이션의 상태를 관리하며, 이를 통해 사용자가 브라우저의 뒤로 가기 및 앞으로 가기 버튼을 사용하여 이전 페이지로 쉽게 이동할 수 있습니다. 또한 Vue Router는 중첩된 라우트, 동적 라우트, 네비게이션 가드 등과 같은 고급 라우팅 기능을 제공합니다.

Vue Router는 Vue.js와 함께 사용되며, Vue.js 애플리케이션에서 Vue.use()를 사용하여 쉽게 추가할 수 있습니다.

 

 

#라우팅이란?

라우팅(Routing)은 네트워크에서 데이터 패킷을 한 장치에서 다른 장치로 전송하는 과정을 말합니다. 인터넷에서 라우팅은 데이터 패킷을 목적지로 안전하게 전달하는 것을 목적으로 합니다.

웹 개발에서 라우팅은 사용자가 웹 페이지에서 URL을 변경할 때 새로운 페이지로 이동하는 것을 의미합니다. 클라이언트 측 라우팅은 브라우저에서 URL이 변경될 때마다 새로운 페이지를 로드하는 것이 아니라, 브라우저에서 페이지를 동적으로 변경하는 방법입니다. 이를 통해 웹 애플리케이션의 성능을 향상시킬 수 있으며, 더 나은 사용자 경험을 제공할 수 있습니다.

클라이언트 측 라우팅은 JavaScript 프레임워크 및 라이브러리 (예 : Vue Router, React Router)를 사용하여 구현할 수 있습니다. 이러한 라우팅 라이브러리는 URL을 사용하여 애플리케이션의 상태를 관리하며, 이를 통해 사용자가 브라우저의 뒤로 가기 및 앞으로 가기 버튼을 사용하여 이전 페이지로 쉽게 이동할 수 있습니다.

 

 

#Vue-Router 설치 방법

1. 터미널에서 명령어 vue add router를 입력합니다.

-history mode 사용 여부는 y를 입력합니다.

 

 

2. Vue-Router 설치가 완료되면 Vue 프로젝트 src 폴더에 router와 views 폴더와 파일들이 생성됩니다.

 

 

3. 명령어 npm run serve를 입력하여 서버를 재시작합니다.

-서버가 재시작 되고 브라우저에서 http://localhost:8080/를 입력하고 들어가면 상단에 Vue-Router를 설치하고 생성된 Home과 About 두 개의 샘플 링크를 확인하실 수 있습니다.

 

 

 

#Lazy Load(비동기 컴포넌트)란 ?

Vue.js에서 Lazy Loading은 애플리케이션의 성능을 향상시키기 위한 기술 중 하나입니다. Lazy Loading은 꼭 필요한 컴포넌트만 불러오므로, 초기 로드 시간을 줄여 더 빠른 로드 속도와 사용자 경험을 제공합니다.

Vue.js에서는 Lazy Loading을 구현하기 위해 비동기 컴포넌트를 사용합니다. 비동기 컴포넌트는 코드 스플리팅을 통해 구현됩니다. 코드 스플리팅은 애플리케이션의 코드를 작은 청크로 분할하여 필요한 시점에 로드할 수 있도록 합니다.

Vue.js에서 비동기 컴포넌트를 구현하려면, `Vue.component()` 대신 `Vue.asyncComponent()` 또는 `Vue.lazy()`를 사용하여 컴포넌트를 정의할 수 있습니다. 이를 통해 컴포넌트의 로딩을 지연시키고, 필요한 시점에 컴포넌트가 로드되도록 할 수 있습니다. 

Vue Router에서는 `vue-router`의 `component` 옵션 대신 `component: () => import('./MyComponent.vue')`와 같이 `import()` 함수를 사용하여 비동기로 컴포넌트를 가져올 수 있습니다. 이를 통해 라우트에 필요한 컴포넌트만 로드하여 초기 로딩 속도를 개선할 수 있습니다.

 

 

#vue prefetch란?

Vue의 prefetch는 웹 페이지를 로드할 때 브라우저가 미리 필요한 리소스를 백그라운드에서 다운로드하는 기능을 말합니다. 이를 통해 사용자가 실제로 해당 리소스를 요청하기 전에 미리 다운로드하여 로딩 시간을 줄일 수 있습니다.

Vue에서 prefetch는 `<router-link>`를 사용하여 특정 경로로 이동할 때 자동으로 활성화됩니다. prefetch 기능을 사용하면 사용자가 특정 링크에 마우스를 가져가거나 클릭하기 전에 해당 경로에 필요한 컴포넌트 파일 등과 같은 리소스를 백그라운드에서 미리 다운로드합니다. 이렇게 하면 페이지 전환 시에 해당 리소스가 이미 로드되어 있어 로딩 속도가 향상됩니다.

prefetch 기능은 Vue Router에서 기본적으로 활성화되어 있으며, 사용자 경험을 개선하고 성능을 최적화하는 데 도움을 줍니다. 그러나 모든 링크에 prefetch를 적용하는 것이 항상 좋은 것은 아니므로, 특정 링크에 대해서는 수동으로 prefetch를 비활성화할 수도 있습니다.