[Vue.js] Vue Router

SPA란?

Vue.js는 SPA이다.
SPA : Single Page Aplication의 약자로, 하나의 HTML을 뜻한다.

특징 :
1. 최초 한번 페이지 전체를 로드
2. 특정 부분만 AJAX를 통해 데이터 가져와 변경된 부분만 변경
3. SEO 불편

CSR는 Client Side Randering은 SPA와 같은 특징들을 가지고 있지만, 개념이 살짝 다르다.
CSR : 클라이언트(브라우저)에서 렌더링한다.

웹페이지 작성 시 Vue없이 MPA 방식(HTML/CSS/JS 만으로도 구현가능)하지만 불편하다. 따라서, 이 불편함을 해소하기 위해 대표적인 라이브러리(프레임워크)인 Vue를 사용한다.
MPA 방식 : Multiple Page Aplication으로, 전통적인 방식으로 여러개의 HTML를 뜻한다.

즉, Vue Router가 안에 있는 내용을 바꾸어 보여주는 원리로 구현하여, 한 페이지에서 내용만 바꾸면서 보여주는 방식이다.

Vue Router

Vue Router란 URL에 맞는 데이터를 제공하고, 매핑시켜준다.
매핑 : URL와 소소코드를 매칭시킨다.

즉, Vue Router 란 어떤 URL를 렌더링 할지 결정하기 위한 라이브러리로, 라우터에 컴포넌트를 매핑시킬 수 있다.
Express Router와는 목적이 자체가 다르므로 대체가 불가능하다.

사용 이유

Vue Router를 사용하는 이유는 Vue는 SPA이기 때문에 하나의 HTML만으로 구성되어 있습니다.
따라서, 다른 화면들을 보여주고 싶을 때 경로별 라우터를 설정해주는것이 필수이다!

Router의 종류는 크게 2가지가 있다.

Backend Router vs Frontend Router

백엔드 라우터 : API(데이터에 접근하여 연산을 한 후 반환)에 접근하는 경로
프론트엔드 라우터 : 보여줄 화면에 접근하는 경로

따라서, Vue Routing은 프론트엔드 라우터에 해당되며, URL마다 다른 컨텐츠를 보여주게 된다.
Rest API및 EJS에 사용되는 Express Routing 백엔드 라우터에 해당된다.

과거 vs 현재 Frontend 개발자

단순 정보를 예쁘게 보여주도록 작성하는 프론트앤드 개발자를 무시하는 경향이 있었던 과거와 달리 현재에는 프론트앤드 개발자가 할 수 있는게 매우 많아졌습니다.
옛날 : 브라우저에서 동작하는 코드만 구현하므로, 서버 지식 없기 개발 가능하였다.
현재 : 프론트엔드 서버까지 알고 있어야, 개발에 용이하다. ex) Node.js

Router 코드

라우터와 라우트 개념

Router(라우터) : 라우트를 가능하게 만드는 프로그램 / 코드
Route(라우트) : 경로로 보여지는 대표적인 화면

App.vue에서 각각의 라우트로 빠질 수 있는 네비게이션 바(버튼들)과 보여줄 영역을 관리해준다.
Src – router – index.js에서 라우트를 관리한다.

각각의 화면을 맡게 될 라우트 컴퍼넌트(최상위/부모 컴퍼넌트)
최상위 컴퍼넌트는 컴퍼넌트임에도 컴퍼넌트 파일에 넣지 않고 views 파일에 넣어 대우를 해준다.

App.vue

<template>
  <div id="app">
    <div id="nav">
      <!-- to 경로로 이동시켜주는 링크 설정 -->
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/board">Board</router-link>
    </div>
    <!-- 해당 링크로 이동하면 보여지는 것 -->
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>

<router-link to> 사용하지 않고 라우터 주소로 이동 가능케 하는 방법이 1가지 더 있다.

<button v-on:click = "AnotherMethod">다른 방법 </button>
<!-- 버튼에 함수를 달아준 후 하단에 methods  생성 -->

methods: {
	AnotherMethod(){
      // $는 전역함수를 의미
		this.$router.push('라우터 주소');
	}
	
}

참고
$router : Router 함수등을 활용할 수 있게 모아둔 것
$route : 현재 route 정보

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Board from "../views/Board.vue"

Vue.use(VueRouter)

const routes = [
  {
    // App.vue에서 지정한 경로를 여기서 연결해준다.
    // APP.vue에서 지정한 경로와 일치
    path: '/',
    name: 'Home',
    // App.vue의 router-view에 home 컴퍼넌트로 되어있다.
    component: Home
  },
  {
    // APP.vue에서 지정한 경로와 일치
    path: '/about',
    name: 'About',
    // 상단에 import를 해야 가져오기 가능
    component: About
  },
  {
    path: '/board',
    name: 'Board',
    component: Board
  }
]

const router = new VueRouter({
  // 뒤로가기 지원
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

import vs require
import는 Vue에서 사용되고, require은 Node에서 사용됩니다. JS에서도 버전들이 다양한데, require은 import보다는 버전이 낮습니다. 이러므로, 모든 브라우저에서 인식이 가능하여, 일반적으로 모듈을 가져올 때는 require을 사용합니다. import는 꽤나 최신 버전이므로, 특정 브라우저에서는 아직 지원하지 않습니다.
Vue에서는 require을 사용하지 않기 때문에, Babel이라는 번역기를 통해 import를 사용하는 것입니다.

각각의 라우트를 이동하게 되어도 한 개의 HTML이기 때문에 새로고침(깜빡임)이 되지 않습니다.