서론

최근 포스팅 "Axios로 전문가처럼 HTTP 요청하는 방법"에서 Axios 라이브러리 사용의 장점에 대해 설명했습니다. 하지만 Axios가 항상 이상적인 솔루션은 아니며 때로는 더 나은 HTTP 요청 옵션이 있다는 점을 인정하는 것이 중요합니다.

의심할 여지 없이 일부 개발자는 사용 편의성 때문에 기본 제공 API보다 Axios를 선호합니다. 그러나 많은 사람들이 그러한 라이브러리의 필요성을 과대평가합니다. fetch() API는 Axios의 주요 기능을 완벽하게 재현할 수 있으며, 모든 최신 브라우저에서 쉽게 사용할 수 있다는 추가적인 장점이 있습니다.

이 글에서는 fetch()와 Axios를 비교하여 서로 다른 작업을 수행하는 데 어떻게 사용할 수 있는지 살펴보겠습니다. 이 글이 끝날 때쯤이면 두 API에 대해 더 잘 이해하실 수 있기를 바랍니다.

기본 Syntax

Axios의 고급 기능을 살펴보기 전에 기본 구문을 fetch()와 비교해 보겠습니다.

다음은 Axios를 사용하여 사용자 정의 헤더가 포함된 POST 요청을 URL로 보내는 방법입니다. Axios는 데이터를 JSON으로 자동 변환하므로 사용자가 직접 변환할 필요가 없습니다:

// Using Axios

const url = '<https://jsonplaceholder.typicode.com/posts>'
const data = {
  a: 10,
  b: 20,
};
axios
  .post(url, data, {
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json;charset=UTF-8",
    },
  })
  .then(({data}) => {
    console.log(data);
});

// Using Fetch API

const url = "<https://jsonplaceholder.typicode.com/todos>";
const options = {
  method: "POST",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json;charset=UTF-8",
  },
  body: JSON.stringify({
    a: 10,
    b: 20,
  }),
};
fetch(url, options)
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  });

<aside> 💡 Notice:

데이터를 보내려면 fetch()는 post 요청의 body 속성을 사용하여 데이터를 엔드포인트로 보내고, Axios는 data 속성을 사용합니다.
fetch()의 데이터는 JSON.stringify 방법을 사용하여 문자열로 변환됩니다.
Axios는 서버에서 반환된 데이터를 자동으로 변환하지만, fetch()를 사용하면 response.json 메서드를 호출하여 데이터를 자바스크립트 객체로 파싱해야 합니다.
Axios를 사용하면 서버가 제공하는 데이터 응답에 data 객체 내에서 접근할 수 있으며, fetch() 메소드의 경우 최종 데이터는 어떤 변수로든 명명할 수 있습니다. </aside>

이전 버전과의 호환성

Axios의 주요 포인트 중 하나는 광범위한 브라우저 지원입니다. IE11과 같은 구형 브라우저에서도 문제 없이 Axios를 실행할 수 있습니다. 이는 내부적으로 XMLHttpRequest를 사용하기 때문입니다.

반면 Fetch()는 Chrome 42+, Firefox 39+, Edge 14+, Safari 10.3+만 지원합니다(전체 호환성 표는 CanIUse.com에서 확인할 수 있습니다).

Axios를 사용하는 유일한 이유가 이전 버전과의 호환성 때문이라면 HTTP 라이브러리가 필요하지 않습니다. 대신 fetch()를 지원하지 않는 웹 브라우저에서 이와 같은 폴리필과 함께 fetch()를 사용하여 유사한 기능을 구현할 수 있습니다.

fetch() 폴리필을 사용하려면 다음과 같이 npm 명령을 통해 설치합니다:

npm install whatwg-fetch --save