프론트엔드 개발을 하면서 API를 호출하는 것은 빠질 수 없는 필수적인 요소 중 하나이다. API를 호출 방법은 여러가지가 존재하는데 개발 과정을 배워나가면서 흔히 보는 fetch와 axios, 그리고 나머지 방법들에 대해 이번 포스트에서 다루어보려고 한다.

XMLHttpRequest (XHR)

JavaScript를 이용해 서버와 상호작용하고 데이터를 받아오는 데 사용되던 오래된 방식. AJAX(Ajax Asynchronous JavaScript and XML) 요청을 가능하게 했고, 복잡한 요청을 처리할 목적으로 개발되었다.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

• AJAX(Ajax Asynchronous JavaScript and XML)?
  웹 페이지나 애플리케이션에서 서버와의 비동기적 데이터 교환을 가능하게 하는 기술. AJAX를 통해 웹 페이지의 일부만을 갱신할 수 있으므로, 전체 페이지를 새로 고치지 않고도 서버로부터 데이터를 가져오거나 데이터를 서버에 보낼 수 있다. 이로 인해 더 빠르고 반응성이 뛰어난 사용자 경험을 제공할 수 있게 되었다.

jQuery AJAX

XMLHttpRequest의 복잡성을 줄이기 위해서 jQuery에서 제공한 간편한 메소드. 사용하기 쉽고, 브라우저 간 호환성 문제를 해결하며, 개발자가 AJAX 요청을 더 간단하게 구현할 수 있도록 개발되었다.

$.ajax({
  url: 'https://example.com/api/data',
  type: 'GET',
  success: function(data) {
    console.log(data);
  },
  error: function(error) {
    console.error('Error:', error);
  }

1. fetch

XMLHttpRequest (XHR)의 등장은 기술의 혁신이었지만, 사용법이 복잡하고 코드도 장황해진다는 단점이 있었다. Fetch API는 이 문제를 해결하기 위해 개발된 기술로 보다 간단하고 강력한 방법으로 네트워크 요청을 처리하기 위해 도입되었다.

비교적 새로운 웹 표준 방식중 하나로, Promise 기반으로 작동하며 이를 통해 비동기 작업을 좀 더 간결하고 직관적으로 처리할 수 있게 되었다.

fetch('https://example.com/data', {
    method: 'GET' // 또는 'POST'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

장점

내장 라이브러리이므로 별도의 설치가 필요 없음.

Promise 기반으로 쉬운 비동기 처리 가능.

표준 자바스크립트 API를 사용하므로 일관성 있는 코드 작성 가능.

단점

오래된 브라우저에서 지원하지 않을 수 있음 (예: IE).

기본적으로 쿠키를 보내거나 받지 않음 (credentials 옵션 필요).

에러 처리가 직관적이지 않을 수 있음 (HTTP 에러 상태를 자동으로 reject하지 않음).

2. Axios

Fetch API와 별개로 개발된, 추가적인 기능과 간편성을 제공하는 외부 라이브러리. Axios 역시 Promise 기반으로 작동한다.

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

장점

HTTP 요청을 보낼 때 자동으로 JSON 데이터 변환.

요청 취소, HTTP 요청 상태 코드에 따른 쉬운 에러 핸들링.

브라우저 및 Node.js 모두에서 사용 가능.

요청과 응답 인터셉터를 사용하여 전역적인 에러 처리나 로깅 가능.

단점

외부 라이브러리이므로 프로젝트에 추가적인 의존성이 생김.

Fetch에 비해 약간 더 큰 파일 크기.

3. Axios는 어떤 면에서 뛰어난가?

Axios의 호환성.

Axios는 상대적으로 최근에 개발된 라이브러리지만, 과거의 브라우저 환경에서도 비교적 잘 작동하도록 설계되었다. 같은 자바스크립트 기반인데다, 폴리필을 지원하기 때문에 오래된 브라우저에서도 Axios가 동작할 가능성이 높아진다.

• XMLHttpRequest를 사용하지 않는 Fetch API와 달리, Axios는 내부적으로 XMLHttpRequest를 사용하기 때문에 오래된 브라우저에서의 호환성이 다소 높아졌다.

• 특정 조건에서 더 이상 필요하지 않은 HTTP 요청을 중단해야 할 때 유용한 요청 취소 기능을 제공하고, 인터셉터는 요청과 응답을 가로채어 추가적인 로직을 실행시킬 수 있다.

• JSON 데이터를 자동으로 변환해주고, HTTP 상태 코드에 따라 쉽게 에러 처리를 할 수 있게 해준다. 설정 옵션을 통해 글로벌 설정, 인스턴스별 설정, 요청별 설정 등도 간단하게 할 수 있다.

• HTTP 에러 상태에서 자동으로 예외를 던지며, 이를 통해 에러 처리가 좀 더 간단하게 이루어질 수 있다.

폴리필(Polyfill)?

최신 기능이 구형 브라우저에서 지원되지 않을 때, 폴리필은 해당 기능을 모방하여 구형 브라우저에서도 동일하게 작동하도록 하는 기술.

Fetch의 존재 이유?

이렇게만 보면 Fetch를 사용할 이유가 없다. Axios가 모든 면에서 Fetch보다 우월해보이기 때문. 그러나 Axios는 결국 별도의 설치가 필요한 외부 라이브러리이고, 이에 대한 추가적인 의존성이 발생한다는 문제가 있다.

따라서 중요한 것은 개발자가 어떤 상황에 놓여있느냐에 대한 분석. 필요한 상황에 필요한 방법을 선택하는게 최선이다.

단순한 사용 사례:

간단한 GET이나 POST 요청과 같은 기본적인 HTTP 요청의 경우, Fetch API만으로 충분할 수 있다. 추가 라이브러리 없이 브라우저 기본 기능을 사용하는 것이 더 가볍고 간편할 수 있다.

복잡한 요구 사항:

복잡한 네트워크 요청, 고급 에러 처리, 요청 취소와 같은 기능이 필요한 경우 Axios가 더 적합할 수 있다.

4. 그 외의 방법들

Superagent, ky, got, request, node-fetch....

이 외에도 API 호출에 사용되는 방법은 무궁무진하다. 각기 고유의 특징과 장단점이 존재하며 프로젝트의 요구 사항과 개발 환경에 따라 적합한 도구를 선택해야한다.

5. 결론

현대 프론트엔드 개발에서는 Fetch와 Axios가 특히 선호되고 있다. 이들은 프로미스 기반의 설계로 더 깔끔하고 현대적인 코드 작성을 가능하게 하며, 비동기 처리의 복잡성을 줄여주는데 특화되었기 때문이다. 특히 Axios는 오래된 브라우저 호환성과 추가적인 기능, 예를 들어 요청 취소나 응답 인터셉터 등을 제공함으로써 더 많은 유연성을 갖추고 있다.

그러나 이것이 XMLHttpRequest나 jQuery AJAX와 같은 이전 기술들이 더 이상 필요 없다는 의미는 아니다. 이들 기술은 특정 상황, 예를 들어 구형 브라우저 지원이 필요한 경우나 이미 이 기술들을 사용하는 레거시 프로젝트에서 여전히 중요한 역할을 수행하기 때문. 따라서 이들 기술에 대한 이해는 프론트엔드 개발의 폭넓은 지식을 구축하는데 도움이 된다.

API 호출 방식을 선택할 때는 프로젝트의 특정 요구 사항, 개발 환경, 그리고 개발자의 선호도를 고려해야 한다. 새로운 프로젝트에서는 Fetch나 Axios와 같은 현대적인 방식을 고려하는 것이 좋다. 그러나 기존의 코드베이스나 특정 브라우저 호환성을 고려해야 하는 경우, XMLHttpRequest나 jQuery AJAX와 같은 기술을 사용할 것을 고려해보아야 한다.