브라우저와 서버간의 통신을 위해 HTTP라는 프로토콜을 통한다. 이때 웹 앱 HTTP 통신의 대표적인 방법으로 jQuery의 ajax가 있다.
이는 서버에서 받아온 데이터를 표시할 때 화면 전체를 갱신하지 않고 화면의 일부분만 변경할 수 있게 하는 자바 스크립트의 기법이다.
뷰에서도 마찬가지로 이를 지원하기 위한 라이브러리로 뷰 리소스와 axios를 지원한다.
뷰 리소스(resource)는 초기에 지원되는 라이브러리였으나, 2016년 말에 지원이 중단되어 기존에 관리했던 PageKit 팀의 라이브러리로 돌아갔다.
현재도 계속하여 사용가능하며, CDN을 이용해 라이브러리를 로딩하는 방법과 NPM으로 라이브러리를 설치하는 방법이 있다.
하지만 뷰의 창시자인 에반이 2016년 말에 지원을 중단하며 대안으로 axios가 뷰의 대세를 이루게 되었다.
뷰 리소스는 본 포스팅에서는 다루지 않는다.
액시오스(Axios)는 현재 뷰 커뮤니티에서 가장 많이 사용되는 HTTP 통신 라이브러리이다.
Promise 기반의 API 형식이 다양하게 제공되어 별도의 로직을 구현할 필요 없이 주어진 API로 구현이 가능하다.
Promise 기반의 API
Promise란 서버에 데이터를 요청하여 받아오는 동작같은비동기로직 처리에 유용한 자바스크립트 객체이다.
자바스크립트는 단일 스레드로 처리하기에 비동기 동작을 처리하기 위해 promise와 같은 방법을 활용한다.
액시오스는 CDN을 활용하여 사용할 수 있는데, 다음과 같은 코드를 추가하면 된다.
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios API에 대한 자세한 설명은 이곳을 참조
이를 활용해 간단하게 GET 요청을 보내 데이터를 출력하는 코드는 다음과 같다.
<html>
<head>
<title>Vue with Axios Sample</title>
</head>
<body>
<div id="app">
<button v-on:click="getData">프레임워크 목록 가져오기</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> <!-- 액시오스 라이브러리 로딩 -->
<script>
new Vue({
el: '#app',
methods: {
getData: function() {
// 액시오스 GET 요청 API
axios.get('https://raw.githubusercontent.com/joshua1988/doit-vuejs/master/data/demo.json')
.then(function(response) {
console.log(response);
});
}
}
});
</script>
</body>
</html>
여기까지 진행하며 간단하게 뷰의 라우터 및 HTTP 통신에 대해 알아보았다.
다음 글에서는 뷰 템플릿과 프로젝트 구성에 대해 알아보자.