자바스크립트에서 API 요청 보내기: fetch vs axios

자바스크립트에서 API 요청을 보내는 방법은 대표적으로 두 가지가 있습니다. 하나는 자바스크립트에 내장된 fetch 함수를 이용하는 것이고, 다른 하나는 외부 라이브러리인 axios를 사용하는 방법입니다. 이번 프로젝트에서는 fetch 함수의 기본 동작과 비동기 처리 방식에 익숙해지고자 별도의 라이브러리를 사용하지 않고 fetch를 활용하는 방향으로 진행하였습니다.

어떤 걸 사용할까?

fetch와 axios는 문법적으로 크게 다르지 않습니다. 두 방식 모두 프로미스(Promise) 기반의 HTTP 클라이언트로, 네트워크 요청 후 결과를 담은 프로미스를 반환하는 점은 동일합니다. 하지만 세부적인 차이점을 비교해보면 다음과 같습니다:

✅ fetch

자바스크립트에 내장되어 있어 별도의 설치나 import가 필요 없습니다.
브라우저에 기본적으로 포함되어 있어 업데이트에 따른 오류 발생 가능성이 적습니다.
다만, 일부 구형 브라우저에서는 지원하지 않습니다.
기본적으로 response timeout 설정이 없어, 네트워크 오류 발생 시 처리가 어렵습니다.
응답 데이터를 JSON으로 변환하기 위해 .json() 호출이 필요합니다.

✅ axios

response timeout 설정 기능이 있어 네트워크 문제를 보다 유연하게 처리할 수 있습니다.
크로스 브라우징 최적화가 잘 되어 있어 호환성이 뛰어납니다.
사용을 위해 모듈 설치가 필요합니다 (npm install axios).

fetch를 사용한 이유

저희 팀이 이번 프로젝트에서 fetch를 선택한 이유는 다음과 같습니다.

팀의 공통 이해를 고려한 선택
이번 프로젝트는 팀 프로젝트였습니다. fetch는 자바스크립트를 학습한 팀원들에게 익숙한 함수였고, API 요청 로직은 저 혼자 담당했기 때문에 모든 팀원이 쉽게 이해할 수 있는 방식이 좋겠다고 판단했습니다. 여러 팀원이 공통으로 사용할 함수이므로, 누구든지 함수 내부를 확인하고 수정할 수 있어야 했고, axios를 사용한다면 따로 학습해야 하는 불편이 있었을 것입니다.
추가 모듈 설치가 필요 없음
프로젝트 진행 중, 라이브러리 간 버전 충돌이 자주 발생했습니다. 예를 들어 ESLint 버전 문제로 인해 새로 설치한 라이브러리가 작동하지 않거나, yarn.lock 파일에서 충돌이 일어나기도 했습니다. fetch는 내장 함수이기 때문에 이러한 문제를 피할 수 있었습니다.
작은 규모의 단기 프로젝트
이 프로젝트는 2주 내 완성을 목표로 한 소규모 프로젝트였습니다. 기능이 복잡하지 않았고 API도 단순했기 때문에 fetch만으로도 충분하다고 판단했습니다. 물론 크로스 브라우징이나 네트워크 에러 처리까지 신경 쓰진 못했지만, 이번에는 fetch와 프로미스에 익숙해지는 것 자체가 학습 목표였기에 적절한 선택이었다고 생각합니다.

axios처럼 쓰기 위한 fetch 래핑

fetch를 사용하기로 결정했기에, 팀원들이 API 함수를 더욱 편리하게 사용할 수 있도록 래핑해서 작성하였습니다.

직관적인 함수 이름과 주석을 추가하여, 함수의 역할과 인자에 대한 설명을 명확히 했습니다.
JSON 직렬화 작업은 API 함수 내부에서 처리하도록 만들었습니다. axios는 자동으로 JSON으로 변환해주지만, fetch는 그렇지 않기 때문에 사용자가 신경 쓰지 않도록 배려했습니다.

하지만 프로젝트를 진행하면서, JSON 직렬화를 호출하는 쪽에서 처리하는 게 더 나은 상황도 있을 수 있다는 걸 알게 되었습니다. 이유는 API 함수에서 직렬화를 고정하면, 객체의 특수성(예: Date나 순환 참조 객체 등)이 문제가 될 수 있기 때문입니다.

트러블슈팅

저희는 비동기 함수(async/await)를 이용해 API 요청 로직을 구성했습니다. fetch를 이용하여 콜백 지옥을 방지하고, 각 HTTP 메서드(GET, POST, DELETE 등)마다 별도의 함수를 선언하여 책임을 분리했습니다.

❗ 이슈: POST 요청 시 415 에러 발생

fetch를 이용해 POST 요청을 보냈을 때, 415 Unsupported Media Type 에러가 발생했습니다. 일반적으로 이 에러는 클라이언트가 서버에 전송하는 데이터 타입이 잘못되었을 때 발생합니다. API의 엔드포인트나 메서드, 데이터 형태는 모두 올바른데 에러가 발생해 당황스러웠습니다.

✅ 해결: Content-Type 설정 누락

문제는 HTTP 요청 메시지의 헤더(Header)에 있었습니다. axios는 기본적으로 Content-Type: application/json으로 설정되지만, fetch는 기본값이 없기 때문에 명시하지 않으면 application/x-www-form-urlencoded로 전송됩니다. 서버는 application/json을 기대하고 있었기 때문에, 형식 불일치로 인해 에러가 발생한 것이었습니다.

const postRequest = async (data) => {
  const response = await fetch('api 주소', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  });
};

따라서, fetch를 사용할 경우 GET, DELETE를 제외한 데이터 전송 요청에는 headers에 Content-Type을 꼭 명시해야 합니다.

마무리하며

이번 프로젝트를 통해 fetch의 기본 사용법과 한계를 직접 경험해보면서, 왜 많은 개발자들이 axios를 사용하는지 이해할 수 있었습니다. 대부분의 웹 API가 JSON 기반으로 이루어지기 때문에, axios처럼 JSON 처리를 자동으로 해주는 도구가 개발자의 생산성을 높여주는 건 분명한 사실입니다.

다음 프로젝트에서는 axios를 도입해보고, 실제 개발 생산성에 얼마나 도움이 되는지 비교해보려고 합니다.

ref.

javascript.info

[번역] 입문자를 위한 Axios vs Fetch

[[번역] 입문자를 위한 Axios vs Fetch

Axios와 Fetch API에 대해 소개하고 비교하는 글입니다. 제목에서도 알 수 있듯이 설치방법 부터 간단한 성능 비교까지 기본적인 내용들을 다루고 있습니다.

velog.io](https://velog.io/@eunbinn/Axios-vs-Fetch)