이번 해커톤 프로젝트를 진행하면서 서버와 통신을 진행할 때 axios를 사용했었다. axios에 대해 좀 더 알아보려고 했는데 ajax, fetch와 같은 통신 방법과는 무엇이 다른지 궁금해져서 알아보기로 했다!
Ajax란?
Asynchronous JavaScript and XML의 약자로, 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말한다.
이름이 XML이라고 되어있지만 JSON이나 일반 텍스트 파일과 같은 다른 데이터들도 사용 가능하다.
과거에는 클라이언트에서 정보를 요청할 때 서버에서 페이지 전체를 전달해주었는데, 이는 불필요한 리소스 낭비를 발생시켰다.
ajax는 서버와 비동기적으로 통신함으로 인해 전체 페이지를 불러오는 대신 필요한 정보만 받아와서 업데이트 하기 때문에 훨씬 효율적으로 통신을 할 수 있게 되었다.
Ajax와 jQuery
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란?
axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 비동기 통신 라이브러리이다.
서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용한다.
axios 특징
- Promise(ES6) API 사용
- 요청과 응답 데이터의 변형
- HTTP 요청 취소 및 요청과 응답을 JSON 형태로 자동 변경
axios 사용법
axios({
url: 'https://localhost:3000', // 통신할 웹문서
method: 'get', // 통신할 방식
data: { // 인자로 보낼 데이터
foo: 'bar'
}
});Fetch란?
fetch는 ES6부터 JavaScript의 내장 라이브러리이다.
promise기반으로 만들어졌기에 axios와 마찬가지로 데이터를 다루는데 어렵지 않으며, 코드 또한 간단하다.
Fetch와 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는 body 프로퍼티를 사용하고, axios는 data 프로퍼티를 사용한다.
- fetch의 url이
fetch()함수의 인자로 들어가고, axios에서는 url이 option 객체로 들어간다. - fetch에서 body 부분은
stringify()가 된다. - fetch의 응답 데이터는 JSON이 아니기 때문에 응답 객체의
.json()메서드를 호출한다.
Axios와 Fetch의 장점과 단점
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
