axios VS fetch 비교와 차이

✨ fetch

 

• 브라우저에 내장된 기본 API입니다. 별도 설치 없이 바로 사용 가능.
• Promise 기반으로 작동해요.
• 기본적으로 fetch는 요청이 실패해도 (ex: HTTP 404, 500 에러) reject되지 않고, 성공한 것으로 간주합니다. → 직접 response.ok 등을 체크해야 해요.
• 응답 데이터를 .json(), .text()처럼 명시적으로 파싱해야 해요.
• 구식 브라우저에서는 (ex: IE) **폴리필(polyfill)**이 필요할 수 있어요.

예시

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('네트워크 응답에 문제가 있어요!');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('에러 발생:', error));

 

 

✨ Axios

• 라이브러리입니다. (npm install axios 로 설치 필요)
• Promise 기반이고, 문법이 더 깔끔하고 직관적입니다.
• HTTP 에러 코드(404, 500 등)가 발생하면 자동으로 reject 시킵니다. (따로 ok를 체크할 필요 없음)
• 요청과 응답 데이터를 자동으로 JSON으로 변환해줍니다.
• 요청을 취소하거나, 타임아웃 설정 등이 훨씬 쉽습니다.
• 브라우저뿐만 아니라 Node.js에서도 잘 작동합니다.

예시

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('에러 발생:', error));

---

🎯 요약

구분	fetch	Axios
설치 여부	기본 제공 (설치 필요 없음)	설치 필요
에러 처리	수동으로 확인 필요 (response.ok)	자동 reject
데이터 변환	수동으로 .json() 호출	자동 변환
기능성	기본 제공	요청 취소, 타임아웃 등 다양한 기능 내장
사용성	약간 번거로움	매우 직관적

 

🔥 결론

• 간단한 프로젝트라면 fetch로 충분합니다.
• 실무용 혹은 대규모 프로젝트라면 편의성과 추가 기능이 많은 Axios 추천합니다!

---

✅ "Axios를 사용하는 이유"

1. 에러 처리가 명확해서

• fetch는 HTTP 상태 코드가 실패(404, 500)여도 .catch로 잡히지 않고 정상으로 처리돼서, 매번 response.ok를 확인해야 해요.
• 하지만 Axios는 서버 에러가 발생하면 자동으로 Promise를 reject 시켜서 .catch 블록으로 에러가 흘러갑니다.
• 👉 "코드가 깔끔하고 실수를 줄일 수 있어서 Axios를 사용했습니다." 라고 말할 수 있어요.

2. 요청과 응답 데이터 처리가 편해서

• fetch는 응답을 .json()으로 변환하는 추가 작업이 필요합니다.
• Axios는 자동으로 JSON 변환을 해주기 때문에, 데이터를 바로 사용할 수 있어요.
• 👉 "데이터 파싱을 따로 신경 쓸 필요 없이 직관적으로 쓸 수 있어서 선택했습니다."

3. 추가 기능 지원이 풍부해서

• Axios는 요청 타임아웃 설정, 요청 취소, 인터셉터(Interceptor) 기능 등을 제공합니다.
  • 인터셉터: 요청을 보내기 전에 토큰 추가, 응답을 받았을 때 공통 에러 처리 등을 할 수 있음.
• fetch는 이런 기능을 직접 구현하거나 외부 도구를 써야 해요.
• 👉 "추후 인증(Token 관리)이나 공통 에러 핸들링을 고려해 Axios를 선택했습니다."

4. 구버전 브라우저 호환성

• fetch는 오래된 브라우저(특히 IE)에서는 기본 지원이 안 됩니다.
• Axios는 폴리필이 필요 없어서 호환성 면에서도 유리합니다.
• 👉 "보다 넓은 브라우저 지원을 고려했습니다."

5. POST나 복잡한 요청을 보낼 때 편리

• fetch로 POST 요청을 보내려면 headers, body, method 등을 다 수동으로 작성해야 해요.
• Axios는 객체만 넘기면 쉽게 POST 요청을 만들 수 있어요.

// fetch
fetch('/api', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: '홍길동' })
})

// axios
axios.post('/api', { name: '홍길동' })

👉 "POST, PUT 같이 다양한 메서드를 사용할 때 코드가 간결해서 Axios를 선호했습니다."

 

✍️ 면접 답변 예시 문장

"Axios를 사용한 이유는, 첫째로 에러 처리가 fetch보다 간단하고 명확했기 때문입니다. 또한 요청과 응답 데이터 처리가 자동으로 되어 개발 생산성을 높일 수 있었고, 타임아웃, 요청 취소, 인터셉터 같은 기능들이 내장되어 있어 확장성 있는 코드 작성이 가능했습니다. 따라서 프로젝트 규모와 유지보수를 고려하여 Axios를 선택했습니다."

---

💬 추가 팁

면접에서 이런 걸 추가로 물어볼 수도 있어요:

• "그러면 fetch를 사용해야 하는 상황은 뭐가 있을까요?"
• 👉 답변 예시: "간단한 테스트나 외부 라이브러리 의존성을 줄이고 싶을 때 fetch를 사용할 수도 있습니다."

 

 

사실 내가.. 더 많이 개발을 해보고 실습해 보면서 만들어봐야 와 닿을거 같다.

 

 

*위 포스팅은 챗GPT 답변을 토대로 작성되었습니다.