axios와 fetch의 차이점

프로젝트를 처음하는 분이라면 api가 생소할 수 있다. api를 백엔드 개발자들이 만들고, 프론트엔드 개발자들은 api를 받아와서 잘 요리한다고 생각하면 쉽게 이해할 수 있다.

우선 fetch에 대해서 설명해보자면,

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log(data);
  console.log('작업 완료');
}

라는 코드가 있다!
나는 사실 항상 코드를 보면서 의문이였던 점이 왜 json()을 쓰는지 너무 궁금했다.
데이터를 받으면 그냥 사용하면 되지 왜 굳이 응답값을 json으로 바꿔주는지 말이다.

async await에 대한 설명은 다음 게시글에 올릴 것이고, 우선 우리가 얘기하던 주제에 대해서 다시 이야기하자면,
Javascript에서는 객체화로 바꿔서 데이터를 받아줘야한다.

JSON(JavaScript Object Notation)
데이터를 효율적이고 구조화된 형식으로 전송하기 위한 포맷이다. JSON은 텍스트 형식으로 구성되어있어서 네트워크를 통해 데이터를 전송하기에 용이하다. 따라서 서버에서 클라이언트로 데이터를 전송할 때 주로 JSOn형식을 사용한다.

JSON은 키-값(key-value)로 이루어져 있다. 이를 통해 데이터를 계층적으로 구성하고 다양한 데이터 타입을 포함할 수 있다.

{
"name": "John",
"age": 30,
"email": "[john@example.com](mailto:john@example.com)"
}

이부분이 JSON으로 이루어졌다.

{
  name: "John",
  age: 30,
  email: "john@example.com"
}

JSON을 객체화 하였을때 차이점은 key에 ""가 빠졌다. 이 차이점이 있고, JavaScript 객체는 JSON 데이터를 표현하기 위한 자바스크립트의 내장된 데이터 구조이므로, 객체로 변환된 데이터를 자바스크립트에서 다루기 편리하게 활용할 수 있다.

아무튼 이렇게 객체화하기 위해서 json()을 사용한다.

반면 axios에 대해서 설명하자면
axios도 마찬가지로 API 호출 시 JSON 응답 데이터를 처리하기 위해 response.data를 사용한다. axios는 HTTP 클라이언트 라이브러리로, AJAX 요청을 보다 쉽게 처리할 수 있는 기능을 제공한다.
axios를 사용하여 API를 호출한 후에는 응답 데이터는 response.data 속성에 저장된다. 이 속성을 통해 JSON 형식의 데이터에 접근할 수 있다.

axios.get('https://api.example.com/data')
  .then(response => {
    const data = response.data;
    // JSON 데이터 처리
    console.log(data);
  })
  .catch(error => {
    // 오류 처리
    console.error(error);
  });

json()을 사용하지 않아도 자체적으로 라이브러리에서 JSON데이터를 처리해주고 있다.