fetch, axios 뭘 써야할까?

공부를 시작하고 처음으로 했던 미니 프로젝트에서 fetch를 써봤고 어떻게 썼는지 블로그에 남긴 적이 있었다.

첫 프로젝트 회고록

간단한 프로젝트라서 fetch로 진행을 했는데, 이후에 찾아보니 axios라는 통신 라이브러리가 존재했다. fetch와 axios의 차이점과 언제 어떤 라이브러리를 써야하는지 알아보자.

1. fetch

fetch('api 주소', {
  method: 'GET', 
  headers: {
    'Content-Type': 'application/json', 
  },
})
  .then(response => response.json())
  .then(data => {
    console.log('Fetch로 받은 데이터:', data);
  })
  .catch(error => {
    console.error('오류 발생:', error);
  });

2. axios

const axios = require('axios');

axios.get('api 주소')
  .then(response => {
    console.log('Axios로 받은 데이터:', response.data);
  })
  .catch(error => {
    console.error('오류 발생:', error);
  });

차이점(1)

위의 예제코드를 보면 axios는 json을 호출하는 부분이 생략되어 있다.
axios는 기본적으로 JSON 응답을 자동으로 파싱하여 JavaScript 객체로 변환해줘서 response.json()을 할 필요가 없기 때문이다.

차이점(2)

fetch는 자바스크립트에 내장되어 있기 때문에 별도의 import나 설치가 필요없다. 하지만 axios는 설치 및 import가 필요하다.

차이점(3)

그 외에도 axios가 브라우저 호환성이 뛰어나다고 한다.

위의 특성을 고려하여 개발 상황(지원하는 브라우저, 프로젝트 규모 등)에 맞는 라이브러리를 선택하면 된다!

#코딩독학 #코딩인강 #코딩배우기 #개발자 #코딩이란 #코딩교육 #프론트엔드부트캠프 #백엔드부트캠프 #국비지원부트캠프 #개발자 #백엔드 #AI부트캠프 #개발자국비지원 #백엔드개발자 #프론트엔드개발자