이번 해커톤 프로젝트를 진행하면서 서버와 통신을 진행할 때 axios를 사용했었다. axios에 대해 좀 더 알아보려고 했는데 ajax, fetch와 같은 통신 방법과는 무엇이 다른지 궁금해져서 알아보기로 했다!
Asynchronous JavaScript and XML
의 약자로, 서버와 통신하기 위해 XMLHttpRequest
객체를 사용하는 것을 말한다.
이름이 XML이라고 되어있지만 JSON이나 일반 텍스트 파일과 같은 다른 데이터들도 사용 가능하다.
과거에는 클라이언트에서 정보를 요청할 때 서버에서 페이지 전체를 전달해주었는데, 이는 불필요한 리소스 낭비를 발생시켰다.
ajax는 서버와 비동기적으로 통신함으로 인해 전체 페이지를 불러오는 대신 필요한 정보만 받아와서 업데이트 하기 때문에 훨씬 효율적으로 통신을 할 수 있게 되었다.
ajax가 jQuery
와 자주 묶여서 불리는 이유는 jQuery를 통해 ajax를 더 쉽게 사용할 수 있기 때문이다.
// without jQuery
function reqListener (e) {
console.log(e.currentTarget.response);
}
var oReq = new XMLHttpRequest();
var serverAddress = "https://example.com";
oReq.addEventListener("load", reqListener);
oReq.open("GET", serverAddress);
oReq.send();
// with jQuery
var serverAddress = "https://example.com";
$.ajax({
url: ,
type: 'GET',
success: function onData (data) {
console.log(data);
},
error: function onError (error) {
console.error(error);
}
});
jQuery를 통해 ajax를 사용했을 때 훨씬 코드가 깔끔하고 직관적이다!
또한 그냥 Ajax만을 사용할 때는 브라우저 간 호환성에 대해 염두해두고 각기 다른 코드를 작성해야하는 경우가 있는데 jQuery를 사용할 경우 호환성에 대해서도 보장이 된다.
기존에 WEB에서 어떤 리소스를 비동기로 요청하기 위해서는 XHR(XML HTTP Request)
객체를 사용했어야 했었는데, XHR은 잘 디자인되어 있는 API가 아니였다.
XHR은 요청의 상태나 변경을 구독하려면 Event를 등록해서 변경사항을 받아야 했고, 요청의 성공/실패 여부나 상태에 따라 처리하는 로직이 들어가기가 좋지 않았다.
이를 보완하기 위해 HTTP
요청에 최적화 되어 있고 상태도 잘 추상화 되어 있는 API들이 생겨나기 시작했는데, 대표적으로 axios
와 fetch
가 있다.
axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 비동기 통신 라이브러리이다.
서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests
를 사용한다.
axios({
url: 'https://localhost:3000', // 통신할 웹문서
method: 'get', // 통신할 방식
data: { // 인자로 보낼 데이터
foo: 'bar'
}
});
fetch는 ES6부터 JavaScript의 내장 라이브러리이다.
promise기반으로 만들어졌기에 axios와 마찬가지로 데이터를 다루는데 어렵지 않으며, 코드 또한 간단하다.
//fetch
const url ='http://localhost:3000/test'
const option ={
method:'POST',
header:{
'Accept':'application/json',
'Content-Type':'application/json';charset=UTP-8'
},
body:JSON.stringify({
name: 'munzi',
age: 2
})
fetch(url)
.then((response) => response.json())
.then(console.log);
//axios
const option ={
url ='http://localhost:3000/test'
method:'POST',
header:{
'Accept':'application/json',
'Content-Type':'application/json';charset=UTP-8'
},
data:{
name: 'munzi',
age: 2
}
axios(options)
.then(response => console.log(response))
fetch()
함수의 인자로 들어가고, axios에서는 url이 option 객체로 들어간다.stringify()
가 된다..json()
메서드를 호출한다.axios는 모듈 설치를 해야한다는 번거로움이 있지만, fetch에는 존재하지 않는 기능이 있고 브라우저 호환성이 뛰어나다는 장점이 있다.
fetch는 내장 라이브러리이기때문에 별도의 import를 할 필요가 없다는 장점이 있지만, 기능이 부족하고 브라우저 호환성이 떨어진다는 단점이 있다.
웹 프론트 프레임워크(react, vue 등)을 다룰 때에는 axios를 사용하는게 좋다. axios는 크로스 브라우징이 가능하고, 기능 또한 우수하기 때문이다.
하지만 라이브러리 설치가 귀찮거나 간단한 프로젝트에서는 fetch를 사용하는 것이 좋다.
특히 react-native
에선 fetch를 사용하는 것을 추천하는데, react-native
의 경우 아직 안정화 된 프레임워크가 아니기에 지속적인 version update가 진행되고 있고, axios에서 이를 반영하지 못할 경우 생각지 못한 에러가 발생할 수 있다는 우려가 있기 때문이다.
참고:
https://velog.io/@surim014/AJAX%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80
https://velog.io/@kysung95/%EA%B0%9C%EB%B0%9C%EC%83%81%EC%8B%9D-Ajax%EC%99%80-Axios-%EA%B7%B8%EB%A6%AC%EA%B3%A0-fetch
https://velog.io/@eunbinn/Axios-vs-Fetch