웹 앱의 HTTP 통신 방법
웹 앱에서 서버에 데이터를 요청하는 HTTP(HyperText Transfer Protocol) 통신은 필수로 구현해야 한다. 과거의 웹 사이트가 정적인 텍스트나 간단한 이미지를 나타내는 데 그쳤다면 .. 이제는 사용자와의 상호작용에 따라 데이터를 동적으로 화면에 표시해줘야 함~~
여기서 HTTP는 브라우저와 서버 간의 데이터를 주고 받는 통신 프로토콜이다. 웹 앱 HTTP 통신의 대표적인 사례로는 jquery의 ajax가 있다.
ajax: 서버에서 받아온 데이터를 표시할 때 화면 전체를 로드하지 않고도 일부분만 변경할 수 있게 하는 자바스크립트 기법. 이런 ajax를 지원하기 위한 라이브러리들이 있는데 가장 많이 사용하는 것이 axios 이다.
axios
뷰 커뮤니티에서 가장 많이 사용되는 http 통신 라이브러리이다. promise 기반의 api 형식이 다양하게 제공되어 별도의 로직을 구현할 필요 없이 간단하게 원하는 로직을 구현할 수 있다.
promise란 서버에 데이터를 요청하여 받아오는 동작과 같은 비동기 로직 처리에 유용한 자바스크립트 객체. 자바스크립트는 단일 스레드이다. 따라서 데이터를 요청하고 받아올 때까지 기다렸다가 화면에 나타내는 로직을 실행해야 할때 프로미스를 활용한다.
데이터 통신과 관련한 여러 라이브러리에서 promise를 활용함, axios에서도 promise 기반의 api를 지원함.
//http get 요청
axios.get('url 주소').then().catch();해당 url 주소에 대해 http get 요청을 보낸다. 서버에서 보낸 데이터를 정상적으로 받아오면 then()안에 있는 로직이 실행, 오류가 발생하면 catch()에서 ..
//http post 요청
axios.post('url 주소').then().catch();http post 요청을 보낸다.
//http 요청에 대한 옵션 속성 정의
axios({
method: 'get',
url: 'URL 주소',
...
});이와 같이 속성들을 직접 정의하여 보낼 수도 있음
[Reference]
Do it Vue.js 입문(이지스퍼블리싱)
