Fetch & Axios

김현준·2024년 6월 4일

리액트 이모저모

목록 보기

7/27

Fetch & Axios

간단한 비교

fetch

브라우저 기본 내장 네이티브 API
비동기 네트워크 요청 수행 (Promise 반환)
JSON 자동 파싱 X → response.json() 필요
CSRF 보호 기능 없음

axios

브라우저 & Node.js 환경에서 사용 가능한 HTTP 클라이언트
Promise 기반, JSON 자동 파싱
CSRF 보호 기능 제공
요청/응답 인터셉터 기능 제공

요약: fetch는 기본 API, 추가 라이브러리 불필요. axios는 편리함, JSON 자동 파싱, 추가 기능 제공

CSRF(Cross-Site Request Forgery) 보호 기능이란?

웹 애플리케이션에서 사용자가 의도하지 않은 요청을 방지하기 위한 보안 기능
공격자는 사용자의 권한을 악용해 원하지 않는 작업(예: 정보 수정, 거래)을 수행하게 만들 수 있는데, CSRF 보호는 이를 방지한다. 일반적인 방법은 다음과 같다.

CSRF 토큰 사용: 서버에서 생성한 고유 토큰을 클라이언트가 요청 시 함께 보내도록 하여, 이를 확인함으로써 요청이 신뢰할 수 있는 사용자로부터 온 것인지 판단한다.

SameSite 쿠키 정책: 쿠키가 다른 사이트에서 실행되는 요청에 포함되지 않도록 설정하는 방법도 있다.

axios의 CSRF 방어를 위한 설정 예시
axios.defaults.headers.common['X-CSRF-Token'] = 'your_csrf_token_here';

Axios가 Fetch보다 편리하게 사용할 수 있는 기능들

axios가 fetch보다 편리하게 사용할 수 있는 기능 중에서 자주 사용하는 몇 가지를 소개한다.

1. 자동 JSON 변환

자주 사용되는 이유:
서버와의 통신에서 대부분 JSON 데이터를 주고받기 때문에, axios의 자동 JSON 변환 기능은 매우 유용하다. 개발자는 데이터를 JSON으로 직접 변환하거나 파싱하는 작업에서 벗어나, 요청 및 응답 처리를 간소화할 수 있다.

axios.post('/api/data', { key: 'value' })
  .then(response => {
    console.log(response.data); // 자동으로 JSON 파싱된 응답 데이터
  })
  .catch(error => console.error(error));

2. 요청 및 응답 인터셉터

자주 사용되는 이유:
인증 토큰 추가, 공통 에러 처리, 로딩 스피너 제어 등과 같은 작업을 쉽게 처리할 수 있다. 모든 요청이나 응답에 대해 동일한 로직을 적용하고자 할 때 매우 유용하다.

axios.interceptors.request.use(config => {
  // 요청에 인증 토큰 추가
  config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
  return config;
}, error => {
  return Promise.reject(error);
});

axios.interceptors.response.use(response => {
  // 응답에 대한 공통 처리
  return response;
}, error => {
  // 에러 처리
  if (error.response.status === 401) {
    // 인증 오류 처리
  }
  return Promise.reject(error);
});

3. 타임아웃 설정

자주 사용되는 이유:
네트워크가 불안정하거나 서버가 응답을 지연시키는 상황에서 요청의 타임아웃을 설정함으로써, 무한 대기를 방지하고 사용자 경험을 향상시킬 수 있다.

axios.get('/api/data', { timeout: 5000 })
  .then(response => console.log(response.data))
  .catch(error => {
    if (error.code === 'ECONNABORTED') {
      console.error('Request timed out');
    } else {
      console.error(error);
    }
  });

4. 요청 취소

자주 사용되는 이유:
사용자 입력에 따라 요청을 취소해야 할 때, 특히 검색과 같은 실시간 필터링 작업에서 유용하다. 필요 없는 요청을 취소함으로써 서버 부하를 줄이고 불필요한 작업을 방지할 수 있다.

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/api/data', {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
});

// 나중에 특정 상황에서 요청을 취소할 수 있음
cancel('Operation canceled by the user.');

5. 요청 기본 설정

자주 사용되는 이유:
공통적인 설정을 중앙에서 관리할 수 있어 코드의 중복을 줄이고 유지보수성을 높인다. 예를 들어, 기본 API URL, 헤더 설정 등을 전역적으로 정의해두면 코드가 간결해진다.

const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: { 'X-Custom-Header': 'foobar' }
});

apiClient.get('/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));