Ajax
Ajax 용어의 정의란 무엇일까?
이 글에서는 비동기 통신의 종류와 사용방법에 대해 설명하는 것 대신 개념에 대한 정의를 말하고자 한다.
웹 개발을 처음 배울때 비동기 통신을 어떻게 사용하는지, 관련 용어들은 뭐가 있는지, 열심히 공부하고 코딩까지 다 구현해봤지만 용어에 대한 정의를 정확히 이해하는데는 한참 걸렸던 것 같다.
인터넷 검색을 하다보면 가끔 Ajax란 단어를 라이브러리와 혼용해서 사용하는 경우가 있는데(사례), 이참에 용어에 대한 정의를 짚고 넘어가고 싶었다. Ajax는 비동기 통신 라이브러리일까?
mdn 에서 Ajax는 다음과 같이 설명한다.
AJAX란 비동기 자바스크립트와 XML (Asynchronous JavaScript And XML)을 말합니다.
Asynchronous JavaScript + XML(AJAX)은 그 자체가 특정 기술은 아닙니다. 2005년 Jesse James Garrett이 처음 만들어낸 말로, HTML 또는 XHTML, CSS, JavaScript, DOM, XML, XSLT, 그리고 제일 중요한 XMLHttpRequest 객체를 비롯해 기존의 여러 기술을 사용하는 새로운 접근법을 설명하는 용어입니다.
https://developer.mozilla.org/ko/docs/Web/Guide/AJAX
Ajax 는 라이브러리를 뜻하는게 아닌 비동기 통신 웹 개발의 기법, 접근법을 설명하는 용어이다.
좀 더 자세히 설명하자면, 서버에서 데이터를 받아올때에 전체 페이지를 새로 고치지 않고도, 페이지의 일부만을 위한 데이터를 동적으로 로드하는 기법이다. JavaScript로 브라우저가 가지고있는 XMLHttpRequest 객체를 이용하여 클라이언트와 서버간의 비동기 통신하는 방식이다.
이로 인해 사용자는 페이지의 멈춤이나 깜빡임 없이 더 빠르고 쾌적한 웹 사용경험을 할 수 있어서 웹의 역사에 한 획을 그은 기술이라고 할 수 있다.
참고로 AJAX의 X가 XML을 의미하긴 하지만, 요즘은 더 가벼운 용량과 JavaScript의 일부라는 장점 때문에 JSON을 더 많이 사용한다.
axios / jQuery.ajax
Ajax 라는 기법을 구현하기 위한 대표적인 "라이브러리"로 axios, jQuery 의 ajax 가 있다.
jQuery 라이브러리에 ajax 함수가 있어서 Ajax 라는 용어의 정의와 가끔 혼용되어 사용되어진 것 같다(...)
Ajax (개념) ⊃ axios, jQuery.ajax (개념을 구현한 라이브러리 기술)fetch api
그렇다면 fetch 는 뭘까?
fetch 는 Ajax기법을 구현하기 위한 브라우저에서 제공하는 "web api"이다.
mdn 에서도 web api 의 하위 항목에 등록되어있다.
fetch 는 라이브러리가 아닌 web api 이다. 라이브러리는 다른 사람이 작성한 소스코드를 다운 받아서 사용하는 것이기 때문에 axios나 jQuery.ajax 같은 라이브러리를 사용하려면 npm install로 다운받고 import 해서 사용해야한다.
하지만 fetch는 브라우저에서 자체적으로 제공해주는 web api 라서 따로 다운받지 않아도 사용할 수 있다.
자주들 쓰는 history.back() location.href 같은 것들도 import 해오지 않고 그냥 쓰듯이 fetch도 web api 라서 웹 환경이라면 그냥 바로 사용할 수 있는것이다.
+) 참고로 axios 와 fetch 는 기본적인 사용법이 거의 흡사하다.
그럼에도 사람들이 axios를 더 많이 사용하는 이유로는,
axios 는 구형 브라우저를 지원해주고,
fetch는 json 데이터를 반환해서 변환작업을 한번 더 거쳐야하지만 axios는 json 데이터를 자동으로 변환해주고,
axios 에서는 요청 취소와 같이 fetch 에서는 제공이 안되는 더 많은 기능을 갖고있고,
axios 는 node.js 에서도 사용할 수 있고,
fetch는 웹 지원이라 네트워크 에러 발생시 response timeout이 없어 기다려야고,
...등의 이유들이 있다.
fetch의 장점으로는 내장 기능이니 라이브러리의 업데이트에 따른 에러를 걱정안해도 된다는 점이있다.
( React Native의 경우 업데이트가 잦아서 라이브러리가 쫓아오지 못하는 경우가 많은데, fetch의 경우 이를 방지할 수 있다.)
XMLHttpRequest(XHR)
Ajax를 얘기할때에 XMLHttpRequest 에 대한 언급이 빠질 수 없다. (mdn)
애초에 Ajax의 정의에서도 XMLHttpRequest 객체를 사용하는 기술이라고 명시되어있다.
XMLHttpRequest 는 Ajax 기법을 구현하는 기술들의 조상이라고 할 수 있다. 위에서 설명한 Ajax 기술들은 모두 XMLHttpRequest 객체를 사용하여 구현한 것이다.
XMLHttpRequest 는 fetch 와 마찬가지로 브라우저에서 제공하는 "web api" 이다.
mdn web api 에서도 같은 레벨의 하위항목으로 fetch 와 XMLHttpRequest 를 등록해놨다.
XMLHttpRequest는 Ajax 기법과 함께 탄생한 기술이며 XMLHttpRequest의 사용방법이 어려워서 나중에서야 쉽게 사용하도록 나온게 fetch이다.
주의할 점은, XMLHttpRequest 는 이름으로만 봐서는 XML 만 받아올 수 있을 것 같아 보이지만, XML 이외 모든 종류의 데이터를 받아오는데 사용할 수 있다는 것이다. 또한 HTTP 이외의 프로토콜도 지원한다(file 과 ftp 포함).
XMLHttpRequest 사용 방식은, XMLHttpRequest 생성자로 XMLHttpRequest 객체를 생성한 다음 XMLHttpRequest객체의 프로퍼티 및 매소드로 Ajax 통신을 구현할 수 있다.
const XMLHttpRequestObj = new XMLHttpRequest();XHR 의 단점으로는,
위에서 소개한 기술들은 전부 Promise 기반인 반면, XMLHttpRequest 는 Promise객체를 반환하는게 아니라서 async 와 결합하여 비동기 코드를 효율적으로 관리하기 어려운 점.
사용방식이 복잡해서 가독성이 안좋은 점.
초기 web api 구현 때 브라우저간 불일치 문제가 존재했었다는 점.
등이 있다.
잘못된 부분이 있다면 댓글로 남겨주시면 감사하겠습니다 :)
