Taeyoung Kim
English

Engineering

데이터 통신: Fetch 함수와 Axios 라이브러리 비교

데이터 통신: Fetch 함수와 Axios 라이브러리 비교 학습 내용을 정리한 백필 노트입니다.

이 글은 2025년 학습 기록을 블로그 형식으로 정리한 백필 노트입니다.

1. 데이터 통신의 기본 개념 (클라이언트-서버 모델)

데이터 통신은 클라이언트가 서버에 **요청(Request)**을 보내고, 서버가 이에 **응답(Response)**하는 구조를 가집니다. 이 과정에서 웹 통신 규약인 HTTP가 사용됩니다.

  • 요청(Request)의 주요 구성 요소:
    • url: 요청 주소
    • method: 요청 종류 (GET, POST, PUT, DELETE 등)
    • headers: 요청의 메타 정보 (데이터 타입, 인증 정보 등)
    • body: 전송할 실제 데이터
  • 응답(Response)의 주요 구성 요소:
    • status: 응답 상태 코드 (e.g., 200: 성공, 404: 찾을 수 없음, 500: 서버 오류)
    • headers: 응답의 메타 정보
    • body: 수신된 실제 데이터

2. Fetch와 Axios 소개

  • Fetch:
    • 웹 브라우저에 내장된 Web API로, 별도의 설치 없이 사용 가능합니다.
    • Promise 기반으로 비동기 통신을 지원합니다.
  • Axios:
    • HTTP 통신을 위한 JavaScript 라이브러리로, CDN 또는 NPM을 통해 설치해야 합니다.
    • Promise 기반이며, Fetch에 비해 다양한 편의 기능(자동 JSON 변환, 에러 처리 등)을 제공합니다.

3. CRUD(생성/조회/수정/삭제) 사용법 비교

| 구분 | Fetch | Axios | | --- | --- | --- | | 데이터 조회 (GET) | - GET이 기본 메소드<br>- res.json()으로 응답을 직접 파싱해야 함 | - GET이 기본 메소드 (axios.get도 가능)<br>- 응답 데이터가 res.data에 자동으로 담겨 있음 | | 쿼리스트링 | - URL에 직접 작성<br>- 또는 new URLSearchParams() 사용 | - URL에 직접 작성<br>- 또는 params 옵션 객체 사용으로 편리함 | | 생성/수정 (POST/PUT) | - body 옵션 사용<br>- JSON.stringify()로 데이터를 직접 문자열로 변환해야 함 | - data 옵션 사용<br>- 객체를 전달하면 자동으로 JSON 문자열로 변환함 | | 데이터 삭제 (DELETE) | - method: 'DELETE' 옵션 지정 | - method: 'DELETE' 또는 axios.delete() 메소드 사용 |

4. 파일 전송

  • FormData 사용:
    • HTML &lt;form> 데이터를 쉽게 생성하고 전송할 수 있는 방식입니다.
    • Fetch: body 옵션에 FormData 객체를 전달합니다.
    • Axios: data 옵션에 FormData 객체를 전달합니다.
  • Base64 문자 변환:
    • 파일을 Base64 문자열로 인코딩하여 JSON 데이터에 포함시켜 전송하는 방식입니다.
    • FileReader API를 사용하여 변환하며, 두 방식 모두 JSON body 또는 data에 담아 전송합니다.

5. 주요 기능 및 차이점 비교

| 기능 | Fetch | Axios | | --- | --- | --- | | 에러 처리 | - 네트워크 장애 시에만 Promise를 거부(reject)함<br>- 4xx, 5xx 같은 HTTP 오류는 정상 응답으로 처리하므로, res.ok나 상태 코드를 직접 확인해야 함 | - 2xx 범위 외의 모든 상태 코드에서 Promise를 자동으로 거부(reject)함<br>- try...catch 구문으로 에러 처리가 매우 직관적임 | | 시간 초과 (Timeout) | - 기본 기능 없음<br>- Promise.race를 이용해 직접 구현해야 함 | - timeout 옵션을 통해 간단하게 설정 가능 | | 요청 취소 | - AbortController를 사용해야 함 | - 동일하게 AbortController를 사용 (구버전의 CancelToken은 deprecated됨) | | 자격 증명 (Credentials) | - credentials: 'include' 옵션으로 쿠키 등 인증 정보 전송 | - withCredentials: true 옵션으로 설정 | | 사용자 정의 구성 | - 공통 옵션을 재사용하려면 별도의 래퍼(wrapper) 함수를 만들어야 함 | - axios.create를 통해 공통 baseURL, headers 등을 설정한 인스턴스를 쉽게 생성하여 재사용 가능 | | Node.js 지원 | - Web API이므로 node-fetch와 같은 별도 패키지 설치 필요 | - 별도 설정 없이 Node.js 환경을 완벽하게 지원 |