anchors.log()

React Library – Axios

프론트엔드 개발에서 서버와 데이터를 주고받는 작업은 필수적입니다. 이를 위해 가장 많이 사용되는 도구 중 하나가 Axios입니다. 한때 React 프로젝트에서 사실상의 표준으로 자리 잡았던 Axios는 여전히 강력한 HTTP 클라이언트 라이브러리로 널리 사용되고 있습니다. 하지만 최근에는 Axios의 용량 부담과 Fetch API의 발전으로 인해 Fetch API만 사용하는 프로젝트도 늘어나고 있습니다.

이번 포스트에서는 Axios와 Fetch API를 비교하며, 각각의 특징, 장단점, 그리고 현대 프론트엔드 개발에서의 올바른 선택 기준에 대해 알아보겠습니다.

1. Axios란 무엇인가?

Axios는 브라우저와 Node.js 환경에서 모두 사용할 수 있는 Promise 기반의 HTTP 클라이언트 라이브러리입니다. 주로 REST API와 통신할 때 사용되며, HTTP 요청(GET, POST, PUT, DELETE 등)을 간단하고 직관적으로 처리할 수 있도록 도와줍니다.

Axios는 다음과 같은 상황에서 유용합니다:
  • 서버에서 데이터를 가져와 화면에 렌더링할 때
  • 폼 데이터를 서버로 전송할 때
  • 파일 업로드 및 다운로드를 처리할 때

2. Axios의 주요 특징

Axios는 다음과 같은 특징을 가지고 있습니다:

  1. Promise 기반 Axios는 ES6의 Promise를 기반으로 동작하므로, 비동기 작업을 처리할 때 async/await 문법을 사용할 수 있습니다.
  2. 브라우저와 Node.js 환경 모두 지원 Axios는 브라우저뿐만 아니라 Node.js 환경에서도 사용할 수 있어, 클라이언트와 서버 양쪽에서 활용 가능합니다.
  3. 요청 및 응답 데이터 변환 요청 데이터를 JSON으로 자동 변환하거나, 응답 데이터를 쉽게 처리할 수 있습니다.
  4. 인터셉터(Interceptors) 지원 요청 또는 응답 전에 특정 작업(예: 토큰 추가, 로깅)을 수행할 수 있습니다.
  5. 취소 토큰(Cancel Token) 진행 중인 요청을 취소할 수 있는 기능을 제공합니다.
  6. 타임아웃 설정 요청이 일정 시간 내에 완료되지 않으면 자동으로 요청을 중단할 수 있습니다.
  7. CSRF 보호 Axios는 기본적으로 XSRF 토큰을 지원하여 보안성을 높입니다.

3. Axios 사용 예제

3.1 GET 요청

서버에서 데이터를 가져오는 가장 기본적인 예제입니다:

import axios from 'axios';

axios.get('<https://jsonplaceholder.typicode.com/posts>')
  .then(response => {
    console.log(response.data); // 응답 데이터
  })
  .catch(error => {
    console.error(error); // 에러 처리
  });

3.2 POST 요청

서버로 데이터를 전송하는 예제입니다:

axios.post('<https://jsonplaceholder.typicode.com/posts>', {
  title: 'Axios Example',
  body: 'This is a POST request example.',
  userId: 1,
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

3.3 요청 취소

진행 중인 요청을 취소하는 방법입니다:

const controller = new AbortController();

axios.get('<https://jsonplaceholder.typicode.com/posts>', {
  signal: controller.signal,
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('Request canceled:', error.message);
    } else {
      console.error(error);
    }
  });

// 요청 취소
controller.abort();

4. Fetch API의 부상과 Axios의 부담

4.1 Fetch API의 발전

Fetch API는 브라우저에 내장된 HTTP 요청 API로, Axios와 유사한 기능을 제공합니다. 특히 최근에는 다음과 같은 기능이 추가되면서 Fetch API만으로도 충분히 강력한 HTTP 요청 처리가 가능해졌습니다:

  • Promise 기반: Fetch API는 기본적으로 Promise를 지원합니다.
  • AbortController: 요청 취소 기능을 제공합니다.
  • JSON 처리: 응답 데이터를 JSON으로 변환하는 것이 간단합니다.

4.2 Axios의 용량 부담

Axios는 약 20KB(gzip 기준)의 추가 용량을 차지합니다. 이는 성능 최적화가 중요한 프로젝트에서 부담이 될 수 있습니다. 반면, Fetch API는 브라우저에 내장되어 있어 추가 용량이 필요하지 않습니다.

참고로 작년에 진행된 팀네이버 컨퍼런스 DAN 24에서 Naver Financial에서는 번들 사이즈 최소화를 위해 axios를 제거하고 native Fetch를 사용하기로 결정했다는 내용을 발표했습니다.

4.3 Axios와 Fetch API 비교

특징AxiosFetch API
브라우저 호환성IE 등 구형 브라우저 지원최신 브라우저만 지원
요청 취소CancelToken 지원AbortController로 지원
인터셉터지원직접 구현해야 함
추가 용량약 29kb없음
사용성간결하고 직관적약간의 추가 코드 필요

5. 관성적으로 라이브러리를 선택하는 것은 잘못된 방법

6.1 관성적 선택의 문제점

많은 개발자들이 “Axios는 React 프로젝트에서 필수”라는 생각으로 관성적으로 Axios를 설치하고 사용합니다. 하지만 이는 다음과 같은 문제를 야기할 수 있습니다:

  • 불필요한 의존성 추가: Fetch API로 충분히 해결할 수 있는 작업에 굳이 Axios를 추가하면 프로젝트의 복잡성과 용량이 증가합니다.
  • 최적화 기회 상실: 성능 최적화가 중요한 프로젝트에서 불필요한 라이브러리를 사용하는 것은 최적화 기회를 놓치는 결과를 초래합니다.
  • 기술 부채: 라이브러리를 추가하면 해당 라이브러리의 업데이트, 보안 패치 등을 관리해야 하는 부담이 생깁니다.
6.2 올바른 선택 기준

라이브러리를 선택할 때는 다음과 같은 기준을 고려해야 합니다:

  1. 프로젝트 요구사항 프로젝트에서 Fetch API로 충분히 해결할 수 있다면, 굳이 Axios를 추가할 필요가 없습니다.
  2. 성능 최적화 성능이 중요한 프로젝트에서는 추가 용량을 최소화하기 위해 기본 API를 사용하는 것이 좋습니다.
  3. 유지보수성 의존성을 줄이면 유지보수와 보안 관리가 더 쉬워집니다.
  4. 팀의 기술 스택 팀원들이 Fetch API에 익숙하다면, 새로운 라이브러리를 도입하는 것보다 기본 API를 사용하는 것이 효율적입니다.

7. 마무리

Axios는 여전히 강력한 HTTP 클라이언트 라이브러리이며, 특정 상황에서는 Fetch API보다 더 편리할 수 있습니다. 하지만, “항상 Axios를 사용해야 한다”는 고정관념은 버려야 합니다. 프로젝트의 요구사항과 환경에 따라 Fetch API만으로 충분한지, 아니면 Axios가 필요한지를 신중히 판단해야 합니다.

요약

  • Axios는 강력하지만, 용량과 의존성 측면에서 부담이 될 수 있다.
  • Fetch API는 최신 브라우저 환경에서 충분히 강력하며, 의존성을 줄일 수 있다.
  • 라이브러리 선택은 관성적으로 하지 말고, 프로젝트 요구사항에 따라 신중히 결정해야 한다.
jeewoo jung 아바타

Written by

jeewoo jung

, , , ,