서버와의 연결/통신 (AJAX , Axios, Fetch)

AJAX (Asynchronous Javascript And XML)

JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 데이터를 주고받는 기술
AJAX란, JavaScript의 라이브러리중 하나이다. 웹 페이지 전체를 렌더할 필요 없이 페이지의 일부만을 위해 데이터를 로드하는 기법이다. 동적인 웹 페이지를 만들기 위한 개발 방법이라고 할 수 있다.

• JavaScript에서 비동기 HTTP 통신이 가능하도록 해준다. 비동기 Http 통신이란 response와 request를 비동기 식으로 다룰 수 있다는 것을 의미한다.

• 페이스북에서 좋아요 버튼을 누를 때마다 페이지가 갱신이 된다면, 구글에서 검색을 하는데 추천 검색어가 로드될때마다 페이지가 새로고침 된다면? 비동기식으로 데이터를 주고받으며 이 같은 문제들을 해결하는 것이다.

Axios와 Fetch

기존에 WEB에서 어떤 리소스를 비동기로 요청하기 위해서는 XHR(XML HTTP Request)객체를 사용했어야 했었는데, XHR은 잘 디자인되어 있는 API가 아니다. 이를 보완하기 위해 HTTP 요청에 최적화 되어 있고 상태도 잘 추상화 되어 있는 api들이 생겨나기 시작했다. 대표적으로 Axios와 fetch가 있다.

Axios

Promise based HTTP client for the browser and node.js

즉, node.js와 브라우저를 위한 HTTP통신 라이브러리이다. 비동기로 HTTP 통신을 가능하게 해주며 return을 promise 객체로 해주기 때문에 response 데이터를 다루기도 쉽다.

Axios의 post method 구현

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Yongseong',
    lastName: 'Kim'
  }
});

Fetch

fetch는 ES6부터 JavaScript의 내장 라이브러리로 들어왔다. promise기반으로 만들어졌기에 Axios와 마찬가지로 데이터를 다루는데 어렵지 않다.

fetch(url)
  .then((response) => response.json()) // 자체적으로 json() 메소드가 있어, 응답을 JSON 형태로 변환시켜서 다음 Promise로 전달합니다
  .then((json) => console.log(json)) // 콘솔에 json을 출력합니다
  .catch((error) => console.log(error)); // 에러가 발생한 경우, 에러를 띄웁니다