HTTP 통신 라이브러리

Ajax

비동기적인 웹 애플리케이션의 제작을 위해 사용하는 개발 기법

싱 글페이지 애플리케이션을 이용하기 쉬워짐

ex) jQuery.ajax()

 

axios

Vue에서 권고하는 HTTP 통신 라이브러리

참고: axios github

 

자바스크립트의 비동기 처리 패턴

1. callback

2. promise

3. promise + generator

4. async & await

참고: 자바스크립트- https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/

 

axios 실습 및 this 설명

methods:{
  getData: function(){
    var vm = this;
    axios.get('https://jsonplaceholder.typicode.com/users/')
    // 성공했을 때 then 진입
    .then(function(response){
      console.log(response.data);
      vm.users = response.data;
    });
    // 실패했을 때 catch 진입
    .catch(function(error){
      console.log(error);
    });
  });
}

이 때 .then()의 vm.users 대신 this.users를 작성하면 정상적으로 데이터를 불러올 수 없다.

vm을 이용해서 this를 담아두고 users에 접근해야 한다.

> 호출 전 instance component를 바라보는 this를 의미한다.

> 호출 후 비동기처리할 때 실행 컨텍스트의 내용이 변하면서 this의 의미가 변한다.

 

웹 서비스에서의 클라이언트와 서버와의 HTTP 통신 구조

1) 클라이언트가 서버에 데이터를 요청

2) 특정 백엔드 로직 실행

3) 로직에 의해 DB 코드 실행

4) DB에서 데이터 결과를 전달

5) 특정 백엔드 로직 실행

6) 서버에서 응답으로 클라이언트에 값 전달

 

크롬 개발자 도구 네트워크 패널 보는 법

# Header: HTTP의 정보

General

- Request URL로 Method 요청을 보냈다는 것을 확인할 수 있다.

- Status Code: 데이터 응답 코드

Response Header

- 서버에서 어떻게 응답을 전달했는지 정보를 전달

Request Headers

- 브라우저에 대한 정보