06. Vue.js - 뷰 HTTP 통신: 뷰 리소스 & 액시오스

(2021.01.19)

 

 

 

웹 앱의 HTTP 통신 방법

 

웹 앱에서 서버에 데이터를 요청하는 HTTP(HyperText Transfer Protocol) 통신은 필수로 구현해야 하는 기능이다.

 

 

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

--> 프로토콜: 컴퓨터나 단말기 간에 통신하기 위해 상호간에 정의한 규칙

 

출처: https://joshua1988.github.io/web-development/http-part1/

 

 

브라우저에서 서버에 데이터를 보내달라고 요청(request)을 보내면, 서버에서 응답(response)으로 해당 데이터를 보내준다.

 

웹 앱 HTTP 통신의 대표적인 사례로는 제이쿼리(jQuery의 ajax가 있다.

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

--> 뷰 리소스 & 액시오스(axios)

 

 

 

 

 

뷰 리소스

 

뷰 리소스를 사용하는 방법은

1. CDN을 이용해서 라이브러리를 로딩하는 방식

2. NPM으로 라이브러리를 설치하는 방법이 있다.

 

 

 

 

 

1. 버튼은 <div> 태그 안에 <button> 태그로 추가한다.

v-on:click을 이용해서 버튼을 클릭했을 때 getData()가 호출되도록 클릭 이벤트를 설정한다.

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

3. 버튼을 클릭해서 해당 URL로 HTTP GET 요청을 보내면, .then() 안에서 응답을 받은 데이터 response 를 콘솔에 출력한다.

 

 

 

실행 화면

 

 

 

 

 

 

액시오스

 

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

액시오스 역시 뷰 리소스 사용법과 비슷하다.

 

 

1. CDN을 이용하여 설치하는 방법과

2. NPM을 이용하여 설치하는 방법이 있다.

 

 

//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 요청을 보낸다. then()과 catch() 동작은 위와 같다
axios({옵션 속성})	HTTP 요청에 대한 자세한 속성들을 직접 정의하여 보낼 수 있다.

 

 

 

 

 

실행 화면

 

 

 

 

 

---

참고도서: 두잇뷰입문

book.naver.com/bookdb/book_detail.nhn?bid=13256615

Do it! Vue.js 입문