여태껏 Axios, Fetch가 뭔지도 잘 모르고, 그냥 API 호출할 때 사용하는 일종의 함수라고 생각하며 사용했다.

앞으로의 각오를 상기시키며,
JS에서 비동기 HTTP 통신을 위해 사용되는 Ajax, Axios, Fetch에 대해서 알아보자.

들어가기 전에, 비동기 통신과 동기 통신이란 무엇인지 살펴보고 오자.

Ajax

Ajax란 Asynchronous JavaScript and XML의 약자이다.
Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법 중 하나이다.

• Ajax를 이용하면 백그라운드 영역에서 서버와 통신하며, 그 결과를 웹 페이지의 일부분에만 표시할 수 있다.
• 간단히 말하면, 서버와 통신하기 위해 XMLHTtpRequest 객체를 사용하는 것을 말한다.
• JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있다.

즉, Ajax는 JavaScript에서 비동기 방식으로 HTTP 통신이 가능하게 해준다.

Ajax의 장점

• 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다 → 비동기
• 웹 페이지가 로드된 후에 서버로 데이터 요청을 보낼 수 있다.
• 웹 페이지가 로드된 후에 서버로부터 데이터를 받을 수 있다.
• 백그라운드 영역에서 서버로 데이터를 보낼 수 있다.

Ajax의 한계

• Ajax는 클라이언트가 서버에 데이터를 요청하는, 클라이언트-풀링 방식을 사용하므로, 서버-푸시 방식의 실시간 서비스를 만들기는 어렵다.
• Ajax로는 Binary 데이터를 송/수신 할 수 없다.
• 다른 서버로 Ajax 요청을 보낼 수는 없다.
• 클라이언트의 PC로 Ajax 요청을 보낼 수는 없다.

예시 코드

var httpRequest = new XMLHTTPRequest();
var serverURL = "/examples/media/request_ajax.php?city=Seoul&zipcode=06141";

// GET 방식으로 요청을 보내면서 데이터를 동시에 전달
httpRequest.open("GET", serverURL, true);
httpRequest.send();

---

Axios

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다.
return 값이 Promise 객체이므로 response 데이터를 다루기가 쉽다.

Axios의 특징

• 브라우저를 위해 XMLHTTPRequests 생성
• Node.js를 위해 http 요청 생성
• Promise API를 지원
• 요청 및 응답 인터셉트
• 요청 및 응답 데이터 변환
• 요청 취소
• JSON 데이터 자동 변환
• XSRF를 막기위한 클라이언트 사이드 지원

XSRF(Cross-site request forgery, CSRF)는 사이트 간 요청 위조로 웹 사이트 취약점 공격의 하나로, 사용자가 자신의 의지와는 무관하게 공격자가 의도한 행위를 특정 웹 사이트에 요청하게 하는 공격을 말한다.

예시 코드

GET

axios.get(`${URL}`)
.then(res => console.log(res)); // console.log 생략 가능

POST

axios.post(`${URL}`, {
  `${data}`
}).then(res => console.log(res)); // console.log 생략 가능 

---

fetch

fetch는 ES6부터 내장된 JavaScript의 라이브러리이다.
Promise 기반으로 만들어졌기 때문에 Axios와 마찬가지로 데이터를 다루기에 어렵지 않고,
내장 라이브러리라는 장점으로 인해 코드 구현이 편리하고 간단하다.

예시 코드

GET

const url = 'https://velog.io/@49crehbgr';
const resp = await fetch(url);
const data = await resp.json();

POST

const url = 'https://velog.io/@49crehbgr';
const data = { username: "lunarmoon" };
const resp = await fetch(url, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(data),
});

const data = await resp.json();

---

Axios vs fetch

Axios

장점

• Request 취소, Request Timeout 설정이 가능하다.
• HTTP 요청과 응답의 Intercept가 가능하다.
• JSON 데이터를 자동으로 변환 해준다.
• 브라우저 호환성이 좋다.
• Promise 기반으로 처리하기 쉽다.

단점

• 모듈을 따로 설치해야 한다. (npm install axios)

---

fetch

장점

• 따로 설치가 필요없는 내장된 라이브러리이다.
• Promise 기반으로 처리하기 쉽다.

단점

• JSON 데이터 변환을 사용자가 명시해야 한다.(JSON.stringify())
• Axios에서 기본적으로 제공하는 것들이 fetch에서는 제공이 되지 않는다.