[do it! Vue.js 입문] 04-2. 뷰 HTTP 통신

웹 앱의 HTTP 통신 방법

HTTP : 브라우저 - 서버 간 데이터를 주고 받는 통신 프로토콜(protocol)

동작방식 : 브라우저 특정 데이터를 보내달라고 요청(request) => 서버에서 응답(response)으로 데이터를 보내주는 방식

 

ajax : 웹 앱 HTTP 통신의 대표적인 사례. 제이쿼리의 ajax.

ajax는 서버에서 받아온 데이터를 표시할 때, 화면 전체를 갱신하지 않고 화면의 일부분만 변경할 수 있게 하는 자바스크립트 기법

뷰에서도 마찬가지로 ajax를 지원하기 위한 라이브러리를 제공함

뷰 프레임워크의 필수 라이브러리로 관리하던 뷰 리소스와 요즘 가장 많이 사용하는 엑시오스(axios)

 

뷰 리소스

초기 코어 팀에서 공식적으로 권하는 라이브러리였으나 2016년 말에 에반이 공식적인 지원을 중단하기로 결정하면서 다시 기존에 관리했던 PageKit 팀의 라이브러리로 돌아감

그 이유는 HTTP 통신 관련 라이브러리는 뷰 라우팅, 상태 관리와 같은 라이브러리와 다르게 프레임워크에 필수적인 기능이 아니라고 판단했기 때문

 

뷰 리소스를 사용하는 방법 : CDN을 이용해 라이브러리를 로딩하는 방식 / NPM으로 라이브러리를 설치하는 방법

뷰 리소스에서 제공하는 API인 this.$http.get()을 사용해 해당 URL에서 제공하는 데이터를 받아옴

this.$http.get()은 HTTP GET 요청을 서버에 보내고 특정 데이터를 받아옴

또한 응답 데이터의 body값이 문자열일 경우, JSON.parse() 자바스크립트 API를 이용해 자바스크립트 객체로 보기 쉽게 변환함

 

액시오스

뷰 커뮤니티에서 가장 많이 사용되는 HTTP 통신 라이브러리

에반도 뷰 리소스 라이브러리를 공식 라이브러리에서 제외하면서 액시오스를 언급함

일반적으로 오픈 소스 라이브러리의 장래성은 깃허브 리포지토리가 얼마나 활성화되어있느냐로 판단할 수 있는데, 액시오스가 그런 면에서는 뷰 리소스보다 더 안정적으로 지원되는 라이브러리라고 할 수 있음

또한 액시오스는 Promise 기반의 API 형식이 다양하게 제공되어 별도의 로직을 구현할 필요 없이 주어진 API만으로 간편하게 원하는 로직을 구현할 수 있음

Promise 기반의 API 형식이란? Promise란 서버에 데이터를 요청하여 받아오는 동작과 같은 비동기 로직 처리에 유용한 자바스크립트 객체 자바스크립트는 단일 스레드(thread)로 코드를 처리하기 때문에 특정 로직의 처리가 끝날 때까지 기다려주지 않음 따라서 데이터를 요청하고 받아올 때까지 기다렸다가 화면에 나타내는 로직을 실행할 때 주로 Promise를 실행함 그리고 데이터를 받아왔을 때 Promise로 데이터를 화면에 표시하거나 연산을 수행하는 등 특정 로직을 수행함 데이터 통신과 관련한 여러 라이브러리 대부분에서 Promise를 활용하고 있으며, 액시오스에서도 Promise 기반의 API를 지원함

 

액시오스 설치 및 사용하기

<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({
	method: 'get',
	url: 'URL주소',
	...
});

 

API 유형	처리 결과
axios.get('URL주소').then().catch();	해당 URL 주소에 대해 HTTP GET 요청을 보냄 서버에서 보낸 데이터를 정상적으로 받아오면 then() 안에 정의한 로직이 실행 데이터를 받아올 때 오류가 발생하면 catch()에 정의한 로직이 수행
axios.post('URL주소').then().catch();	해당 URL 주소에 대해 HTTP POST 요청을 보냄
axios({ 옵션 속성 })	HTTP 요청에 대한 자세한 속성들을 직접 정의하여 보낼 수 있음 데이터 요청을 보낼 URL, HTTP 요청 방식, 보내는 데이터 유형, 기타 등등

 

뷰 리소스 실습 예제와 비교했을 때, CDN 주소와 GET 요청을 보내는 API 형식 부분만 다름

response 객체를 확인해보면 data 속성이 일반 문자열 형식이 아니라 객체 형태이기 때문에 별도로 JSON.parse()를 사용해 객체로 변환할 필요가 없음

이런 부분들이 뷰 액시오스가 뷰 리소스보다 사용성이 좋다는 것을 증명