[비동기 HTTP 통신] Ajax, Axios, Fetch에 대해

안녕하세요! 브라우저와 서버의 통신으로 데이터를 취득할 때 많이 쓰이는 것이 비동기 HTTP 통신이라고 생각하는데요.

저도 토이 프로젝트를 하면서 자주 만났던 비동기 HTTP 통신으로 쓰이는 Ajax, Axios, Fetch에 대해 간단하게 비교하여 정리하려고 합니다.

 

Ajax란

• Ajax란 Ascynchronous JavaScript and XML의 약자이며 비동기적인 웹 애플리케이션의 제작을 위해 사용됩니다.
• Javascript를 이용해 클라이언트와 서버 간에 데이터를 주고 받는 비동기 HTTP 통신이며, XMLHttpRequest객체를 이용하여 전체 페이지를 새로고침 하지 않고도 필요한 데이터만을 불러올 수 있습니다.
• 즉, Javascript를 통해 서버에 데이터를 요청하는 것입니다.

✔️ 동작 원리 정리!

<div id="sample">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="viewDoc()">Change Content</button>
</div>
 
<script>
function viewDoc () {
  var xhttp = new XMLHttpRequest(); // 웹 객체 생성
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) { // 에러가 없는지 확인하는 과정
      document.getElementById("sample").innerHTML =
      this.responseText; // 화면출력
    }
  };
  xhttp.open("GET", "ajax_info.txt", true); // 데이터 파일 전송
  xhttp.send();
}
</script>

AJAX의 동작 원리

1. 웹 페이지에서 이벤트 발생 (페이지가 로드되고, 버튼 등을 클릭)

2. XMLHttpRequest객체가 자바스크릅트에 의해 생성

3. XMLHttpRequest객체는 웹 서버에 자료 요청

4. 웹 서버는 Request에 응답

5. 요청한 웹 피이지로 웹 서버는 자료를 전송

6. 자바스크립트로 받은 자료를 해석

7. 자바스크립트에 의해서 페이지의 새로고침 없이 자료를 화면에 출력

 

📍 Ajax의 XMLHttpRequest객체를 이용할 때 JQuery를 통해 쉽게 구현 가능하지만, JQuery를 사용해야만 간편하고 호환성이 보장되기도 한다는 장단점이 있습니다. 또한, XMLHttpRequest 객체는 브라우저 호환성에 한계가 있고, 유지보수, 디버깅이 어렵다는 단점이 있습니다. 

 

내가 Axios를 사용했던 이유

최근 React 프레임워크를 통해 개인 프로젝트 진행시 API 데이터를 비동기로 가져오기 위해 Axios 함수를 사용하였습니다.

제가 Axios를 썼던 이유는 에러 핸들링하기 편하며, 데이터를 동시에 요청할 수 있었기 때문에 사용했습니다.

 

이외에도 Axios 특징을 알아보던 중 더 많은 정보를 알게 되어 정리하게 되었습니다 :)

 

우선 Axios가 fetch보다 1년정도 빨리 등장하였으며, Axios는 AngularJS나 초기 React를 쓰기 편한 http 통신 모듈로 등장하였습니다.

기존 javascript에서 스크립트 형태로 호출해서 쓸 수 있고, AngularJS, React 같이 node.js 빌드 환경의 환경에서도 호출해서 쓸 수 있습니다. Axios의 가장 큰 매리트는 Promise 기반의 API 호출을 쉽게 할 수 있다는 점이라고 생각합니다.

 

 

장점과 단점으로 정리하자면,

장점

1. 크로스 브라우징 : 과거 자바스크립트 스펙 지원이 브라우저마다 많이 다르던 시절 모든 브라우저에서 동작하도록 만들어진 라이브러리

2. 보안 : 기본적인 보안 이슈 해결 가능

3. 더 많은 기능과 편의성 : 요청과 응답을 보다 쉽게 다룰 수 있다.

4. 요청 중단 : Axios는 HTTP요청을 취소하는 방법 제공

5. JSON 데이터 자동 변환 : fetch와 다르게 자동으로 JSON 데이터를 파싱하거나 시리얼라이즈 해주는 특징이 있다.

6. 에러 헨들링 : HTTP 에러 상태 코드를 자동으로 확인하고 에러가 발생했을 때 더 자세한 정보를 제공하는 특징이 있다. 즉, 디버깅에 용이

7. 동시 요청 처리 : 여러 개의 동시 요청 가능

단점

1. import, require 모듈 설치 필요2. 번들크기가 상대적으로 큰 편이어서, 작은 프로젝트로 진행시 고려

 

 

또 다른 존재 Fetch

fetch는 ES6부터 등장한 Javascript 내장 라이브러리입니다.fetch 또한 Promise 기반으로 만들어져 데이터 다루기 쉽고, axios는 설치하는 과정이 필요했다면 fetch는 내장 라이브러리라는 정점이 있어 사용하기 편리합니다.

 

하지만, fetch에도 치명적인 단점이 있습니다. 

1. 오래된 브라우저에는 지원이 어려울 수 있음

2. 네트워크 에러 발생 시 response timeout이 없이 기다려야 함

3. JSON으로 변환해주는 과정 필요

 

 

이 과정을 통해 개인적인 생각으로는 axios가 fetch보다 에러 처리나 호환성에 있어서 좋다는 사실을 알았습니다.

그렇다고 해서 무조건 axios를 쓰기 보단 내가 진행하는 프로젝트 상황에 따라 각각의 특징을 비교하여 좀 더 나은 라이브러리를 선택하며 사용해야겠다고 생각하였습니다. 

 

 

 

위의 포스터는 제 개인적인 견해이므로, 부족한 부분이나 틀린 부분이 있다면 언제든지 편하게 댓글로 남겨주시면 감사하겠습니다 🙇🏻‍♀️ :)

참고 사이트
https://cocoon1787.tistory.com/756