티스토리 뷰
뷰 라우터
라우팅
라우팅은 웹 페이지간의 이동방법을 말한다. 현대 웹 앱 형태 중 하나인 싱글 페이지 애플리케이션(Single Page Application, SPA)에 주로 사용된다.
라우팅을 이용하면 화면이 매끄럽게 전환되어 사용자 경험을 상승시킬 수 있다. 프론트엔드 프레임워크(뷰, 리액트 등)를 사용하거나, 순수 자바스크립트의 라이브러리(router.js 등)를 이용하여 라우팅을 통한 페이지 이동이 가능하다.
싱글 페이지 애플리케이션
페이지를 이동할 때마다 웹 페이지를 요청하여 새로 갱신하는 것이 아니라, 미리 해당 페이지르 받아놓고 페이지 이동 시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴을 적용한 애플리케이션
뷰 라우터
뷰 라우터는 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리이다.
- <router-link to="URL"> : 페이지 이동 태그, 화면에서는 <a>로 표시된다.
- <router-view> : 페이지 표시 태그, 변경 되는 URL에 따라 해당 컴포넌트를 뿌려주는 영억.
<body>
<div id="app">
<h1>뷰 라우터 예제</h1>
<p>
<router-link to="/main"> Main 컴포넌트로 이동</router-link>
<router-link to="/login"> Login 컴포넌트로 이동</router-link>
</p>
<router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!-- <script src="js/app.js"></script> -->
<script>
var Main = { template: '<div>main</div>'};
var Login = { template: '<div>login</div>'};
var routes = [
{ path: '/main', component: Main },
{ path: '/login', component: Login }
];
var router = new VueRouter({ routes });
var app = new Vue({ router }).$mount('#app');
</script>
</body>$mount() API
el 속성과 동일하게 인스턴스를 화면에 붙이는 역할을 한다. 인스턴스 생성 시 el 속성을 넣지 않아도, 생성 후 $mount()를 이용하여 강제로 인스턴스를 화면에 붙일 수 있다.
라우터 URL에서 해시(#) 값 없애기
뷰 라우터의 기본 URL 형식은 해시 값을 사용한다. 해시 값을 없애고 싶을 경우 뷰 라우터 인스턴스 생성 시 히스토리 모드를 활용한다.
var router = new VueRouter({
mode: 'history',
routes
});네스티드 라우터
네스티드 라우터는 라우터로 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있다.
<body>
<div id="app">
<h1>뷰 라우터 예제</h1>
<router-link to="/user"> User </router-link>
<router-view></router-view> <!-- 상위 컴포넌트 영역 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!-- <script src="js/app.js"></script> -->
<script>
// 컴포넌트 내용 정의 시작
var User = {
template: `
<div>
User Component
<p>
<router-link to="/user/posts">User Post</router-link>
<router-link to="/user/profile">User Profile</router-link>
</p>
<router-view></router-view>
</div>
`
}
var UserPost = {
template: '<div>User Post</div>'
}
var UserProfile = {
template: '<div>User Profile</div>'
}
// 컴포넌트 내용 정의 끝
// 네스티드 라우팅 정의 시작
var routes = [
{
path: '/user',
component: User,
children: [
{
path: 'posts',
component: UserPost
},
{
path: 'profile',
component: UserProfile
}
]
}
];
// 네스티드 라우팅 정의 끝
// 뷰 라우터 인스턴스 생성
var router = new VueRouter({
mode: 'history',
routes
});
// 뷰 인스턴스 생성
var app = new Vue({ router }).$mount('#app');
</script>
</body>네임드 뷰
네임드 뷰는 특정 페이지로 이동했을 때, 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식이다. 네스티드 라우터는 상위 컴포넌트가 하위 컴포넌트를 포함하는 형식인데 반해, 네임드 뷰는 같은 레벨의 컴포넌트가 여러개 존재하는 것 이다.
<body>
<div id="app">
<h1>뷰 라우터 예제</h1>
<router-view name='header'></router-view>
<router-view></router-view> <!-- name이 없는 경우 default -->
<router-view name='footer'></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!-- <script src="js/app.js"></script> -->
<script>
// 컴포넌트 내용 정의 시작
var Header = { template: '<div> This is Header </div>' };
var Body = { template: '<div> This is Body </div>' };
var Footer = { template: '<div> This is Footer </div>' };
// 컴포넌트 내용 정의 끝
// 뷰 라우터 인스턴스 생성
var router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
components: // router-view의 name 속성과 컴포넌트 연결
{
default: Body, // name 없는 경우 default
header: Header,
footer: Footer
}
}
]
});
// 뷰 인스턴스 생성
var app = new Vue({ router }).$mount('#app');
</script>
</body>뷰 HTTP 통신
웹 앱의 HTTP 통신 방법
HTTP는 클라이언트와 서버 간 데이터를 주고 받는 통신 프로토콜을 의미한다. 최근 웹 사이트는 HTTP 통신을 필수적으로 구현하는데, 이는 사용자와의 상호 작용에 따라 데이터를 동적으로 화면에 표시해 줘야 하기 때문이다.
웹 앱 HTTP 통신의 대표적인 예로, jQuery의 ajax가 있다. 대부분의 프레임워크와 같이 뷰 또한 ajax를 위한 라이브러리를 제공한다. 뷰 프레임워크의 필수 라이브러리로 관리하던 뷰 리소스와 최근 가장 많이 사용하는 axios가 있다.
뷰 리소스
초기에는 코어 팀에서 공식적으로 권하는 라이브러리였으나, 현재는 아님.
<body>
<div id="app">
<button v-on:click="getData"> 프레임 워크 목록 가져오기</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script>
<!-- <script src="js/app.js"></script> -->
<script>
new Vue({
el: "#app",
methods: {
getData: function() {
this.$http.get('https://raw.githubusercontent.com/joshua1988/doit-vuejs/master/data/demo.json')
.then(function(response){
console.log(response);
console.log(JSON.parse(response.data));
})
}
}
})
</script>
</body>엑시오스
엑시오스는 현재 뷰 커뮤니티에서 가장 많이 사용되는 HTTP 통신 라이브러리이다. 엑시오스는 Promise 기반의 API 형식이 다양하게 제공되어 별도의 로직을 구현할 필요 없이 주어진 API만으로도 간편하게 원하는 로직을 구현할 수 있다.
axios.get('URL').then().catch()해당 URL에 HTTP GET 요청을 보낸다. 서버에서 보낸 데이터를 정상적으로 받아오면, then() 안에 정의한 로직이 수행되고, 데이터를 받아올 때 오류가 발생하면 catch() 안에 정의한 로직이 수행된다.
axios.post('URL').then().catch()해당 URL에 HTTP POST요청을 보낸다. 서버에서 보낸 데이터를 정상적으로 받아오면, then() 안에 정의한 로직이 수행되고, 데이터를 받아올 때 오류가 발생하면 catch() 안에 정의한 로직이 수행된다.
axios({ 옵션 속성 });HTTP 요청에 대한 자세한 속성들을 직접 정의하여 보낼 수 있다.
<body>
<div id="app">
<button v-on:click="getData"> 프레임 워크 목록 가져오기</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- <script src="js/app.js"></script> -->
<script>
new Vue({
el: "#app",
methods: {
getData: function() {
axios.get('https://raw.githubusercontent.com/joshua1988/doit-vuejs/master/data/demo.json')
.then(function(response){
console.log(response);
})
}
}
})
</script>
</body>
response 객체를 확인 해보면 데이터가 문자열이 아닌 객체 형태이기 때문에 JSON.parse()를 할 필요가 없다.
'Vue.js' 카테고리의 다른 글
| [Vue.js] 템플릿 (0) | 2021.06.24 |
|---|---|
| [Vue.js] 뷰 인스턴스와 컴포넌트 (0) | 2021.06.21 |
| [Vue.js] Vue.js 소개 (0) | 2021.06.21 |