Vue router 살펴보기

cho·2022년 2월 23일
0

Vue router

vue router는 routing 기능을 도와주는 vue의 라이브러리다. routing은 웹 페이지 간의 이동 방법이다. 주로 싱글 페이지 애플리케이션(SPA)에서 사용하며 Vue는 SPA구조를 가지고있다. router를 사용하면 매끄러운 화면 전환으로 사용자 경험을 향상 시킬 수 있다.

SPA(Single Page Application)

페이지를 이동할 때 서버에서 완전한 새로운 웹 페이지를 불러와 사용자에게 돌려주지 않고 미리 가지고 있다가 동적으로 화면을 전환해서 사용자와 소통하는 형태.

  • 장점
    1. 향상된 사용자 경험
    1. 필요한 리소스만 교체하기 때문에 효율이 좋아짐
    2. 서버의 부담을 클라이언트가 대신해 서버 효율 증가
    3. 컴포넌트별로 개발해 관리가 편해짐
    4. 앱과 웹이 동일한 API를 사용할 수 있음
  • 단점
    1. 처음에 모든 파일을 다 받기 때문에 초기 구동 속도가 느릴 수 있다.
    • 코드를 분할해서 다운로드하는 Code Splitting으로 해결
    1. 검색엔진 최적화(SEO)가 어렵다. -> 페이지가 1개고 JavaScript로 필요한 부분을 바꿔주는데 주로 html을 파싱해서 정보를 만들어서 노출시키기 때문에 이걸 인식을 못함.
    • SSR(Server Side Rendering)을 사용해서 해결
    1. 보안에 취약함
    • 사용자 정보가 서버기반 세션이 아닌 클라이언트 기반 쿠키다
    • 비즈니스 로직을 사용자가 볼 수 있다.

SSR을 Vue에 적용시키면?

검색엔진최적화(SEO)가 가능해지고 초기 구동 속도가 빨라진다.
몇가지 단점이 생기는데
1. 프로젝트가 복잡해지고 개발에 제약이 생긴다(뷰 spa의 라이프 사이클에 대한 이해가 필요해짐)
2. 서버에 부하가 커진다 -> 클라이언트가 아닌 서버가 요청을 계속 처리해주기 때문

만약 ssr을 구현할 여건이 안 된다면 html의 메타태그를 넣어주는 방법과 프리렌더링을 사용하는 방법이 있다.

ssr이 반드시 프로젝트에 반드시 필요한지 고민해보고 사용해야한다!

Vue-router 사용법

<router-view></router-view>

router-view 태그는 페이지를 표시해주는 태그다. 변경되는 URL에 따라 해당 컴포넌트를 뿌려준다.

  1. Vue, Vue-router를 import하고 Vue.use(VueRouter)를 호출한다.

  2. 라우트 컴포넌트를 정의한다.

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
  1. 라우트를 정의한다.
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]
  1. routes 옵션과 함께 router 인스턴스를 만든다.
const router = new VueRouter({
  routes
})
  1. 루트 인스턴스를 만들고 mount한다.
const app = new Vue({
  router
}).$mount('#app')
이후에 html에서 태그를 이용해서 페이지를 이동할 수 있다.
<router-link to="/이동할 페이지"></router/-link>
router-link 태그는 "/이동할 페이지" 로 이동시켜주며 
<a>태그로 렌더링된다

JavaScript에서는

router.push('/path');

push를 이용해 다른 컴포넌트에 접근할 수 있다.

참고자료

vue router 공식문서

0개의 댓글