JavaScript와 HTML, CSS등에 대해서는 일체 다루지 않는다.
기초지식은 다른 강의를 참조하도록 하라.
참고:
이번에는 라우팅에 대해서 알아보자.
라우팅을 프론트엔드에서 한다는게 조금 신기할 수도, 생소할 수도 있다.
그러나 큰변화가 없는 부분들을 프론트에서 라우팅 하는 것은 서버에 부하를 줄여준다.
먼저 라우팅이 뭔가에 대해서 이야기를 한다면 url을 연결시켜주는 작업이다.
가령 아래의 예를 들어보자.
http://www.theceres.net/hi
http://www.theceres.net/hello
위의 예제의 경우 http://www.thecers.net까지를 컨텍스트 루트라고 부른다. 즉 뼈대가 되는 페이지이다.
그리고 hi와 hello는 컨텍스트루트에 라우팅되어있다.
그리고 아래와 같은 또 다른 예제를 보자.
http://www.theceres.net/user/kukaro
http://www.theceres.net/user/jiharu
이 경우에는 http://www.theceres.net/user에 kukaro와 jiharu가 라우팅 된 것이다.
위의 사례들 처럼 특정 url에서 서브 url로 분기를 결정하는 작업을 라우팅이라고 한다.
사실 이 때까지 라우팅은 백엔드에서만 했었는데 프론트에서도 라우팅을 하는 것을 이번에 해보려고한다.
프론트에서의 라우팅은 사실 백엔드와는 조금 다르다.
왜냐하면 해시태그(#)를 붙혀서 프론트에서 라우팅 됬음을 알리기 때문이다.
가령 아래와 같이 말이다.
http://www.theceres.net/user/#/kukaro
http://www.theceres.net/user/#/jiharu
위와 같이 되어있다면 이는 #이하부터는 프론트엔드에서 라우팅 됬다는 것을 알게 된다.
프론트엔드에서 vue로 라우팅하기 위해서는 단순히 vue만 있으면 되는게 아니라 vue-router가 필요하다.
https://router.vuejs.org/en/installation.html
위에서 설치할 수 있다.
CDN으로 사용해도 되며 npm으로 설치를 해도된다.
이번에는 cdn을 사용해서 테스트 해보자.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
{{hello}}
<p>
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<router-view></router-view>
</div>
</body>
<script>
Vue.use(VueRouter);
const Foo = {template: '<div>foo</div>'};
const Bar = {template: '<div>bar</div>'};
const routes = [
{path: '/foo', component: Foo},
{path: '/bar', component: Bar}
];
const router = new VueRouter({
routes
});
new Vue({
el: '#app',
router,
data: {
hello: 'Hello world!'
}
});
</script>
</html>
라우터를 쓰는 매우 기초적인 예제이다.
먼저 Vue.use에 VueRouter를 넣음으로써 Vue 외부 플러그인을 사용함을 알린다.
그 다음 간단한 컴포넌트를 만든다.
그걸 routes라는 변수로 라우팅시킨다.
그리고 그걸 Vue 루트 컴포넌트에 붙혀주면된다.
이러면 준비는 끝난 셈이다.
실행을 해보면 위와같이 작성된다.
router-link는 결국 a태그로 치환된다. 즉 해당 태그에 넣은 url은 a태그로 붙게되는 것이다.
a태그에서 #을 쓰면 프론트라우팅이 된다는것을 알것이다.
router-view는 해당 url을 맞게 라우팅되는 태그이다.
결과를 보면 알 수 있다. 가령 /foo를 보자.
url을 보면 프론트 라우팅 foo로 되어있다.
그리고 거기에 맞게 foo만 출력된다.
bar역시 마찬가지이다.
그럼 실제 서버에서 돌리면 어떻게 될까?
그 경우에도 마찬가지이다.
만약 해시태그를 지우고 싶다면 아래와 같이 수정한다.
const router = new VueRouter({
mode: 'history',
routes
});
mode에서 history라는 변수를 붙혀주면된다. 단 권장하지는 않는데 그 이유는 다음과 같다.
보다시피 해시태그가 삭제된걸 확인할 수 있다.
하지만 url을 다시 들어가보면,
없다고 뜨는걸 확인할 수 있다.
왜냐하면 프론트에서 라우팅된것인데 재요청시에 서버에 요청하기 떄문이다.
서버에 해당 url이 없기에 에러가 뜬다.
따라서 hash태그는 그냥 나두는게 바람직하다.
'Programming > JavaScript-Vue' 카테고리의 다른 글
| [Vue-13]vue cli 프로젝트 사용하기, 그리고 vue 컴포넌트 (0) | 2018.09.26 |
|---|---|
| [Vue-12]값의 동적 변경과 v-model(맛보기편) (0) | 2018.09.26 |
| [Vue-10]컴포넌트 (0) | 2018.03.13 |
| [Vue-09]이벤트 수식어 (0) | 2018.02.23 |
| [Vue-08]이벤트 (0) | 2018.02.20 |