VUE HTTP 통신

 

웹 앱의 HTTP 통신 방법

요즈음 웹 앱에서 서버에 데이터를 요청하는 HTTP(HyperText Transfer Protocol) 통신은 필수로 구현해야 하는 기능입니다. 과거의 웹 사이트가 정적인 텍스트나 간단한 이미지를 나타내는 데 그쳤다면 이제는 사용자와의 상호 작용에 따라 데이터를 동적으로 화면에 표시해 줘야 하기 때문입니다.

여기서 HTTP는 브라우저와 서버 간에 데이터를 주고받는 통신 프로토콜(protocol)입니다. 브라우저에서 특정 데이터를 보내달라고 요청(request)을 보내면 서버에서 응답(response)으로 해당 데이터를 보내주는 방식으로 동작합니다. 서버에 ‘해당 데이터를 보내주세요.’라는 메시지를 보내는 게 바로 ‘HTTP 요청을 보낸다’와 같은 의미입니다.

웹 앱 HTTP 통신의 대표적인 사례로는 제이쿼리(jQuery)의 ajax가 있습니다. ajax는 서버에서 받아온 데이터를 표시할 때 화면 전체를 갱신하지 않고도 화면의 일부분만 변경할 수 있게 하는 자바스크립트 기법입니다. ajax가 대중화되면서 많은 웹 앱에서 ajax를 사용하고 있습니다. 리액트, 앵귤러 등에서도 활발하게 사용하고 있죠.

뷰에서도 마찬가지로 ajax를 지원하기 위한 라이브러리를 제공합니다. 뷰 프레임워크의 필수 라이브러리로 관리하던 뷰 리소스와 요즘 가장 많이 사용하는 액시오스(axios)가 바로 그것입니다. 

그럼 각 액시오스에는 어떤 특징이 있는지 함께 살펴보겠습니다.

 

 

액시오스

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

 

에반도 뷰 리소스 라이브러리를 공식 라이브러리에서 제외하면서 액시오스를 언급했습니다. 액시오스는 깃허브 리포지토리의 별이 3만 개가 넘는데, 이는 뷰 리소스의 8천 개에 비해 압도적으로 많습니다. 그만큼 많은 개발자들이 관심을 갖고 이용하고 있다는 증거입니다. 

 

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

 

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

 

 

Promise 기반의 API 형식이란?

Promise란 서버에 데이터를 요청하여 받아오는 동작과 같은 비동기 로직 처리에 유용한 자바스크립트 객체입니다. 자바스크립트는 단일 스레드(thread)로 코드를 처리하기 때문에 특정 로직의 처리가 끝날 때까지 기다려주지 않습니다.

 

따라서 데이터를 요청하고 받아올 때까지 기다렸다가 화면에 나타내는 로직을 실행해야 할 때 주로 Promise를 활용합니다. 그리고 데이터를 받아왔을 때 Promise로 데이터를 화면에 표시하거나 연산을 수행하는 등 특정 로직을 수행합니다. 

데이터 통신과 관련한 여러 라이브러리 대부분에서 Promise를 활용하고 있으며, 액시오스에서도 Promise 기반의 API를 지원합니다.