뷰 HTTP 통신

뷰 HTTP 통신

---

HTTP 통신이란 브라우저와 서버 간 데이터를 주고받는 통신 프로토콜이다.

브라우저에서 데이터를 보내달라고 서버에게 요청하면 서버가 그에 알맞는 데이터를 응답해주는 방식이다.

(브라우저와 서버간 HTTP 통신 흐름)

웹 앱에서 HTTP 통신을 하는데 대표적인 사례로는 제이쿼리의 ajax가 있다. (vanilla JS에서는 XmlHttpRequest)

ajax는 서버에서 받은 데이터를 화면에 표현할 때 화면 전체를 갱신(새로고침)하지 않아도 일부분만 변경할 수 있게 하는 자바스크립트 기법이다.

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

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

뷰 리소스

---

뷰 리소스는 초기에 공식적으로 권하는 라이브러리였으나 2016년 말에 공식 지원을 중단된 라이브러리다.

그 이유는 HTTP 통신 관련 라이브러리는 프레임워크에 필수적인 기능이 아니라고 판단했기 때문이다.

그럼에도 뷰 리소스는 아직 사용할 수 있는 라이브러리이기 때문에 간단하게 살펴보도록 하자.

뷰 리소스 라이브러리를 이용하여 HTTP GET 통신을 하는 방법을 예제를 통해 알아보자.

(뷰 리소스 라이브러리를 통한 HTTP GET 통신 예제)

(예제 코드를 작성하고 수행한 결과)

뷰 리소스 라이브러리를 이용하면 서버로부터 데이터를 받아와 화면에 나타낼 수 있다.

액시오스(Axios)

---

액시오스는 현재 뷰 커뮤니티에서 가장 많이 사용되는 HTTP 통신 라이브러리이다.

액시오스는 깃 허브 레포지토리에서 가장 인기가 많은 HTTP 통신 뷰 라이브러리이다.

액시오스는 자바스크립트의 Promise 기반의 API 형식이 다양하게 제공되어 별도의 로직을 구현할 필요 없이 API만으로 간편하게 원하는 로직을 구현할 수 있다.

Q : Promise 기반의 API 형식이란 무엇인가? A : Promise란 서버에 데이터를 요청하여 받아오는 동작과 같은 비동기 로직 처리에 유용한 자바스크립트 객체이다. 자바스크립트는 단일 쓰레드로 코드를 처리하기 때문에 특정 로직의 처리가 끝날 때 까지 기다려주지 않는다. 따라서 데이터를 요청하고 받아올 때 까지 기다렸다가 화면에 나타내는 로직을 실행해야할 때 Promise를 사용한다. 데이터를 받아왔을 때 Promise로 데이터를 화면에 표시하거나 연산을 수행하는 등 로직을 처리한다.

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

상세한 내용은 액시오스 API 문서를 참고하자.

액시오스 API 문서 : https://github.com/axios/axios#axios-api

그럼 이제 액시오스를 이용한 예제를 작성해보자.

(액시오스 라이브러리를 이용한 비동기 통신 예제)

(액시오스 라이브러리로 HTTP GET 통신을 한 결과)

response 객체를 확인해보면 data 속성이 뷰 리소스 라이브러리와 다르게 일반 문자열 형식이 아닌 객체 형태로 데이터를 받아오기 때문에 JSON.parse()를 사용하여 객체를 파싱할 필요가 없다는 특징이 있다.

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

해당 내용은 'Do it! Vue.js 입문'을 참고하여 공부한 내용을 정리한 글입니다.