웹 앱의 HTTP 통신 방법
HTTP는 브라우저와 서버 간에 테이터를 주고받는 통신 프로토콜(protocol)이다.
브라우저에서 특정 데이터를 보내달라고 요청을 보내면 서버에서 응답으로 해당 데이터를 보내주는 방식으로 동작한다.
서버에 '해당 데이터를 보내주세요'라는 메시지를 보내는 게 바로 'HTTP 요청을 보낸다'와 같은 의미이다.
웹 앱 HTTP 통신의 대표적 사례로 JQuery와 Ajax가 있다. Ajax는 서버에서 받아온 데이터를 표시할 때 화면 전체를 갱신하지 않고도 화면의 일부분만 변경할 수 있게 하는 자바스크립트 기법이다. Ajax가 대중화되면서 많은 웹 앱에서 Ajax를 사용하고 있다.
리액트와 앵귤러등에서도 활발히 사용되고 있는 것처럼 뷰에서도 Ajax를 지원하기 위한 라이브러리를 제공하는 데 뷰 프레임워크의 필수 라이브러리로 관리하던 뷰 리소스와 요즘 가장 많이 사용되고 있는 axios(액시오스)이다.
Vue resource(뷰 리소스)
초기에 코어 팀에서 공식적으로 권하는 라이브러리였으나 2016년 말에 공식적인 지원을 중단하기로 결정하면서 다시 기존에 관리했던 PageKit 팀의 라이브러리로 돌아갔습니다. 그 이유는 HTTP 통신 관련 라이브러리는 뷰 라우팅, 상태관리와 같은 라이브러리와는 다르게 프레임워크에 필수적인 기능이 아니라고 판단했기 때문입니다.
그럼에도 불구하고 뷰 리소스는 아직 계속 사용할 수 있는 라이브러리입니다.
axios(액시오스)
현재 뷰 커뮤니티에서 가장 많이 사용되는 HTTP 통신 라이브러리이다.
액시오스는 Promise기반의 API 형식이 다양하게 제공되어 별도의 로직을 구현할 필요없이 주어진 API만으로 간편하게 원하는 로직을 구현할 수 있다.
액시오스 설치하기
CDN을 이용해 설치하는 방법과 NPM을 이용하여 설치하는 방법이 있다.
CDN -> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 코드를 HTML파일에 추가하면 사용가능
//HTTP GET 요청
axios.get('URL 주소').then().catch();
//HTTP POST 요청
axios.post('URL 주소').then().catch();
//HTTP 요청에 따른 옵션 속성 정의
axios({
methods: 'get',
url: 'URL 주소',
...
})
<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 () {
axios.get('https://raw.githubusercontent.com/joshua1988/doit-vuejs/master/data/demo.json')
.then(function (response) {
console.log(response);
});
}
}
});
</script>
</body>
</html>위 코드는 프레임워크 목록 가져오기 버튼을 클릭하여 HTTP GET요청을 보내고 데이터를 받아와서 로그에 출력하는 예제이다. 이 코드를 실행하여 확인하면 알겠지만 response 객체를 확인해보면 data속성이 일반 문자열 형식이 아닌 객체 형태이기 때문에 별도로 JSON.parse()을 사용하여 객체로 변환할 필요가 없다.
이 라이브러리에 대한 자세한 사용방법과 가이드
뷰 리소스 = www.npmjs.com/package/vue-resource
vue-resource
The HTTP client for Vue.js
www.npmjs.com
'JavaScript > Vue.js' 카테고리의 다른 글
| Vue Template(뷰 템플릿) - 2 (0) | 2021.01.12 |
|---|---|
| Vue Template(뷰 템플릿) - 1 (0) | 2021.01.12 |
| Vue Router(뷰 라우터) (0) | 2021.01.09 |
| Vue Component teleport(뷰 컴포넌트 통신) - 2 (0) | 2021.01.07 |
| Vue Component teleport(뷰 컴포넌트 통신) - 1 (0) | 2021.01.07 |
댓글