fetch & axios

fetch & axios

서버와 비동기 통신을 하기 위해 자바스크립트에서 사용하는 가장 대표적인 두 가지 방법이다.

1. fetch API

브라우저에 기본적으로 내장되어 있는 API로, 별도의 설치 없이 즉시 사용할 수 있는 자바스크립트 내장 기능이다.

• 장점: 내장 기능이기 때문에 외부 라이브러리 설치가 필요 없고, 프로젝트의 무게가 가벼워진다.
• 단점: 구형 브라우저 지원이 부족하며, 기능이 단순하여 개발자가 직접 추가로 코딩해야 하는 부분이 많다.

fetch의 특징

• 데이터를 보낼 때 객체를 문자열로 직접 변환(JSON.stringify())해서 보내야 한다.
• 데이터를 받을 때도 response 데이터를 한 번 더 JSON 형식으로 변환(response.json())하는 과정이 필요하다.
• 서버에서 에러가 발생해도(예:404, 500 에러) 통신 자체는 성공한 것으로 간주하여 에러를 자동으로 잡아내지 못한다.

2. axios

웹 브라우저와 Node.js 환경 모두에서 사용할 수 있는 별도의 외부 라이브러리(패키지)이다.

• 장점: 기능이 매우 다양하고 편리하며, 구형 브라우저와의 호환성이 뛰어나 실무 및 대규모 프로젝트에서 가장 많이 쓰인다.
• 단점: 외부 라이브러리이기 때문에 설치 과정(npm install axios)이 필요하다.

axios의 특징

• 서버와 데이터를 주고받을 때 자동으로 JSON 변환을 처리해 주므로 코드가 간결하다.
• 서버가 에러 상태 코드(예: 404 Not Found, 500 Server Error)를 반환하면 자동으로 에러를 인지하고 catch블록으로 넘겨준다.
• 요청을 보내기 전이나 응답을 받기 전에 가로채서 특정 작업(예: 로그인 토큰 검사)을 수행할 수 있는 인터셉터 기능을 제공한다.

특징 / 기능	fetch API	axios
설치 여부	설치 없음 (브라우저 내장)	필요 (npm 또는 CDN)
자동 JSON 변환	지원 안 함 (수동 변환 필수)	자동 지원
에러 핸들링	404, 500 에러를 직접 걸러내야 함	상태 코드 에러 시 자동 실패 처리
기능 확장성	단순하고 직관적임	인터셉터 등 강력한 실무 기능 제공