운 좋게 이력서가 통과하여 좋은 기업의 사전 과제를 볼 수 있는 기회를 받았는데 그동안 팀 프로젝트에서 구현만 해내자 마인드로 axios를 제대로 이해하지 않고 성급하게 사용해서 미숙한 점과 개인 프로젝트에서는 Firestore를 사용해 데이터를 비동기적으로 조회하고, React Query를 통해 이러한 비동기 데이터 작업을 효율적으로 관리하는 방식을 사용해서 사전 과제를 만족스러운 결과를 못 받은 아쉬움이 커서 이론부터 다시 정리하고 실습 과정을 가질 예정이다.

Rest API

Representational State Transfer의 약자로, 웹 상에서 서버와 클라이언트 간의 통신을 위한 아키텍처 스타일입니다.

이는 HTTP 프로토콜을 사용하여 데이터를 주고받으며, 주로 JSON 형식으로 데이터를 교환합니다. Rest API는 자원(Resource-URI)의 표현(Representation)에 의한 상태 전달을 의미하며, 이를 통해 웹 서비스가 상태를 관리하고, CRUD(Create, Read, Update, Delete) 기능을 수행합니다.

연관된 라이브러리로는 axios와 fetch가 있으면 둘 다 HTTP 요청을 보내기 위해 사용되며 서버로부터 받은 응답을 처리하는 비동기 JavaScript 코드를 작성될 때 사용합니다.

Axios

Axios는 Promise 기반의 HTTP 클라이언트로, 브라우저와 Node.js에서 사용할 수 있습니다. Axios는 자동으로 JSON 데이터 변환, 요청 취소, HTTP 요청에 대한 응답 시간 초과 설정, 인터셉터를 통한 요청 및 응답 처리 등의 기능을 제공합니다. Axios를 사용하여 Rest API를 호출하면, 간결하고 직관적인 코드로 비동기 HTTP 요청을 처리할 수 있습니다.

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

1. axios.get 함수는 첫 번째 인자로 요청을 보낼 URL을 받습니다. 이 예제에서는 'https://api.example.com/data'가 해당 URL입니다. axios는 HTTP GET 메소드를 사용하여 이 URL로 요청을 보냅니다.
2. axios 요청은 비동기적으로 실행되며, Promise를 반환합니다. 이 Promise는 서버로부터의 응답을 나타내는 response 객체로 이행(resolve)됩니다.
3. 첫 번째 .then 메서드는 response 객체를 받아옵니다. axios는 서버로부터 받은 데이터를 response.data 속성에 자동으로 할당합니다. 이 예제에서는 response.data를 콘솔에 출력하도록 되어 있습니다.
4. .catch 메서드는 axios 요청 과정에서 발생하는 모든 예외(에러)를 잡아냅니다. 이는 네트워크 오류, 서버 오류 응답(서버 응답 오류 : 404, 500), 또는 .then 메서드 내에서 발생한 오류를 포함합니다. .catch로 전달되는 함수는 발생한 오류 객체를 인자로 받으며, 이를 통해 오류 처리 로직을 구현할 수 있습니다.

Fetch

Fetch API는 브라우저 내장 API로, 비동기 네트워크 통신을 위해 설계되었습니다. Promise 기반으로 동작하며, XMLHttpRequest 보다 사용하기 쉽고, 강력한 기능을 제공합니다. 하지만 기본적으로 요청 취소, 타임아웃 설정 등 Axios에서 제공하는 몇몇 기능이 부족합니다. 하지만 직접적이고, 네이티브한 방법으로 HTTP 요청을 처리할 수 있다는 장점이 있습니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));

1. fetch에는 첫 번째 인자에 기본적으로 요청할 url이 들어갑니다.
2. fetch 는 GET으로 동작하며 fetch를 통해 ajax를 호출 시 해당 주소에 요청을 보낸 다음, 응답 객체(Promise object Response)를 받습니다.
3. 그러면 첫 번째 .then에 그 응답을 받고 response객체의 .json()을 메서드로 파싱한 값을 data에 리턴합니다.
4. catch 문은 fetch 호출 과정에서 발생하는 모든 예외(에러)를 출력해줍니다. (서버 오류 응답 : 404, 500) 이를 통해 오류 처리 로직을 구현했습니다.

axios와 fetch 모두 REST API와의 통신을 위해 사용되며 비동기적으로 데이터를 요청하고 응답을 처리하며 axios는 추가적인 설정 없이 JSON 데이터를 자동으로 처리하고 네트워크 오류 등을 쉽게 처리할 수 있는 장점이 있습니다.

fetch는 브라우저에서 기본적으로 제공되는 내장 함수로 별도의 라이브러리 없이 사용할 수 있으나 오류 처리나 JSON 변환 등을 위한 추가적인 코드가 필요합니다.

두 방법은 비동기 처리를 위해 Promise를 사용하며 async/await 문법을 사용하여 코드의 가독성을 높여줍니다.