라우팅
사용자가 접속한 주소에 따라 페이지(컴포넌트)가 달라지는 것을 "라우팅" 이라고 한다.
Vue와 같은 SPA(단일 페이지 애플리케이션)의 경우 페이지를 이동할 때마다 서버에 요청해서 페이지를 새로 갱신하는 것이 아니라 클라이언트에서 미리 가지고 있던 페이지를 라우팅을 이용해서 화면을 갱신하게 된다.
즉, 라우팅이란 클라이언트에서 url 주소에 따라 페이지가 전환되는 것으로 이해하면 된다.
Vue 프로젝트 내부에서는 미리 url 주소를 정의하고, 각 주소마다 Vue 페이지를 연결해 둔다.
사용자가 메뉴를 클릭하거나, 브라우저 주소를 직접 갱신했을 때 미리 정의된 url 주소에 해당하는 Vue 페이지로 화면을 전환한다.
Vue는 vue에서 제공하는 공식 플러그인인 vue-router를 이용해서 라우팅을 쉽게 구현할 수 있다.
Vue-Router 설치
vue add router
위 명령어를 통해 vue-router 설치 및 기본 설정을 모두 완료할 수 있다.
설치 중간에 history mode 사용 여부를 묻는 질문이 나오는데, Y를 입력한다.
@vue/cli-plugin-router가 설치된다.
설치가 끝나면 src 폴더 내에 router, views 폴더와 파일이 생성된다.
이 상태에서 다음 명령어를 통해 서버를 재시작한다.
npm run serve
크롬에 http://localhosts:8080 을 입력하여 아래 화면을 확인한다.
화면 상단에 Home, About 두 개의 링크가 있다.
번갈아서 링크를 클릭해보면 화면이 전환되는 것을 확인할 수 있다.
vue-router를 설치했더니 자동으로 시작 화면에 링크가 추가되고, router가 동작되는 샘플 파일이 자동으로 생성되었다.
새로 추가된 파일들을 좀 더 자세히 확인해보자.
App.vue
링크에 대해 정의된 부분이 나온다.
브라우저의 url을 보면 Home을 클릭했을 때는 localhost:8080,
About을 클릭하면 localhost:8080/about 으로 바뀌는 것을 확인할 수 있다.
이제 router 폴더의 index.js 파일을 확인해보자.
index.js
routes 배열에 2개의 라우트가 등록되어 있다.
첫번째는 Home 컴포넌트이고, 두번째는 About 컴포넌트에 대한 라우트이다.
{path: '/', name: 'Home', component: Home}
-> path: 브라우저에서 접속하는 url 주소를 정의
-> component: 지정된 path로 들어왔을 때 보여줄 vue 컴포넌트, 앞으로 구현할 vue 파일을 연결하고, 해당 파일을 실행시킨다.
index.js 파일 두번째 줄에 있는 import 문이 실제 src/views 경로 내에 있는 Home.vue 파일을 참조한다.
앞으로 개발할 화면에 해당하는 vue 파일을 이렇게 import하고, routes 안에 특정 path와 맵핑을 해주면 사용자가 접속하는 브라우저 url 주소에 따라 원하는 vue 파일을 보여줄 수 있다.
routes 배열의 두번째 값에 path와 name 밑에 주석 처리된 부분이 있다.
// route level code-splitting
=> 라우트 레벨에서 코드를 분할하는 방법.
// this generates a separate chunk (about. [hash].js) for this route
=> 이 라우트에 대한 chunk 파일이 분리되어 생성된다.
// which is lazy-loaded when the route is visited
=> 이 라우트에 방문했을 때 lazy-load(지연 로드) 된다.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
=> 주석처럼 라우트 레벨에서 코드를 분할한 후 별도의 chunk 파일을 생성하고, 실제 이 라우트를 방문했을 때 리소스를 다시 로드하게 된다. 여기서 chunk 파일은 about이라는 이름으로 생성된다. 컴포넌트 import 시 /* webpackChunkName: "about" */ 라는 주석으로 chunk 파일 이름을 정의했기 때문이다.
첫번째 라우트와 두번째 라우트의 가장 큰 차이는 첫번째는 사용자가 해당 경로에 접근하지 않아도 이미 vue 파일을 import 하는 것이고, 두번째 방법은 path에 접근하기 전까지는 vue 파일에 대한 import 가 일어나지 않는다.
Lazy Load(비동기 컴포넌트)
Vue CLI를 통해 빌드를 진행하면 소스 코드가 하나의 파일로 합쳐지는데, 프로젝트가 클수록 전체 코드가 하나로 합쳐지면서 파일 용량이 커지게 된다.
이로 인해, 사용자가 웹사이트에 처음 접속했을 때 한 번에 큰 파일을 다운로드하느라 초기 랜더링 시간이 길어지게 된다.
페이지가 한번 로드되고 나서는 페이지 전환이 매우 빠르기 때문에 굉장한 이점이 있긴 하다.
하지만 사용하는 페이지가 별로 없다고 한다면, 사용하지도 않을 페이지를 로드하는게 불편해지게 되는 것이다.
Lazy Load는 리소스를 컴포넌트 단위로 분리하여 컴포넌트 혹은 라우터 단위로 필요한 것들만 그때 그때 다운받을 수 있게 하는 방법이다.
Vue CLI3부터 prefetch 기능이 추가가 되었는데, prefetch 기능은 미래에 사용될 수 있는 리소스(about과 같은 비동기 컴포넌트)를 캐시에 저장함으로써 사용자가 접속했을 때 빠르게 리소스를 내려줄 수 있다.
굉장히 유용한 기능이지만, 비동기 컴포넌트로 정의된 모든 리소스를 당장 사용하지 않더라도 캐시에 담아야 하는 단점이 있다.
Vue CLI에서 prefetch 기능은 기본값으로 true이다.
때문에 Lazy Load가 적용된 컴포넌트는 모두 prefetch 기능이 적용되어 캐시에 저장된다.
prefetch 기능을 사용하지 않을 때
- 요청 수가 훨씬 줄어든다.
- 라우터가 이동될 때마다 해당 라우터에서 필요한 리소스를 그때 그때 가져온다.
(한번 가져온 리소스는 다시 요청하지 않는다.)
prefetch 기능을 사용할 때
- 요청 수가 많아진다.
- 애플리케이션의 첫 화면 접속 시 랜더링 속도가 느려질 수 있다.
- 첫 화면에서 사용되는 리소스는 마지막에 다운받게 되는데, 아직 사용하지 않는 화면의 리소스를 모두 내려받고 첫 화면의 리소스를 다운받기 때문이다.
오히려 초기 랜더링은 prefetch 기능을 사용하지 않아야 로딩이 빠르다.
prefetch 기능은 다른 화면에서 사용할 리소스를 미리 내려 받아, 빠른 화면 전환을 위해 사용되기 때문에..
"정말 필요한 컴포넌트에 대해 prefetch 기능을 적용하는 것이 좋다."
Vue CLI에서 prefetch 기능이 디폴트로 true이기 때문에 prefetch 기능을 끄는 법을 알아보자.
vue-project/blob/master/ 경로에 Vue.config.js 파일을 생성하고 다음 코드를 추가한다.
prefetch 기능을 삭제해도, 비동기 컴포넌트인 Lazy Load로 컴포넌트를 사용할 수 있다.
컴포넌트를 import할 때, 다음과 같이 처리하면 된다.
import(/* webpackPrefetch: true */ './views/About.vue');
/* webpackPrefetch: true */ 를 넣어주면 해당 컴포넌트에 대해 prefetch가 적용된다.
Vue 개발 시 기본적으로 prefetch 기능은 끄는 것을 추천한다.
routes/index.js의 첫번째 줄을 보면 vue에서 라우팅을 처리하기 위해 vue-router를 import 하는 것을 볼 수 있다.
이렇게 정의된 router는 main.js 에 등록을 해줘야 실제 적용이 되어 사용할 수 있다.
main.js 파일을 살펴보자.
3번째 라인을 보면 './router' 를 통해 router 폴더의 index.js가 import 된다.
마지막 라인에서는 최상위 컴포넌트인 App.vue로 app을 생성하고, use(router) 코드로 App.vue에서 router가 사용될 수 있도록 추가했다.
그리고 App.vue를 public 폴더의 index.html에 정의되어 있는 id="app"인 html element에 마운트 시키는 것이다.
Home, About을 클릭할 때마다 연결되어 있는 vue 파일이 호출이 되고, 해당 파일의 코드가 실행되어서 화면에 나타나는 것을 보았다.
이렇게 .vue로 작성된 파일을 컴포넌트로 한다.
'Study > Front' 카테고리의 다른 글
| [Vue.js] Vue CLI로 Vue 프로젝트 생성하기 (0) | 2021.11.14 |
|---|---|
| VSCode 단축키 (0) | 2021.03.02 |
| VSCode 확장 기능 설정하기 (0) | 2021.02.23 |
