2022-07-22
그 동안 jsp나 Django에서나 그냥 자바스크립트 파일을 만들어서 외부서버와 통신할 때는 주로 ajax.js파일을 따로 만들어 api를 통한 데이터를 받아냈고
졸업작품시 리액트를 통한 프로젝트를 할 때에는 axios를 통해 api통신을 했고
이번에 es6를 공부하다 보니 fetch()함수의 존재를 알아냈고 따라서 이 차이점들이 과연 무엇이길래 다 다른가라는 생각을 갖고 간단히 정리해놓을려고 한다
🚩ajax에 대하여
ajax는 Asynchronous JavaScript And XML의 약자이며,
자바스크립트를 이용해 클라이언트와 서버 간에 데이터를 주고받는 비동기 HTTP 통신입니다.
XMLHttpRequest(XHR) 객체를 이용해서 전체 페이지가 아닌 필요한 데이터만 불러올 수 있습니다.
흔히 우리는 ajax를 만드는 코드를 보면 jquery로 짜는 형태를 많이 기억하여
🙋♂️jQuery랑 연관이 있나?
생각할 수 있지만 사실 전에는 ajax가 jquery형태가 아닌 순수 ajax로 개발했을 때도 있었지만 당시에 딱 보더라도 코드형태가 몹시 더러운 것을 알 수 있다...
<과거>
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() { // 요청에 대한 콜백
if (xhr.readyState === xhr.DONE) { // 요청이 완료되면
if (xhr.status === 200 || xhr.status === 201) {
console.log(xhr.responseText);
} else {
console.error(xhr.responseText);
}
}
};
xhr.open('GET', 'https://localhost:3000'); // 메소드와 주소 설정
xhr.send(); // 요청 전송
// xhr.abort(); // 전송된 요청 취소따라서 이러한 더러운형태의 코드에 조금 가독성 좋게 하기위해 jQuery를 이용하여 사용한게 우리가 흔히 알고있는
ajax가 된 것 이다.또한 브라우저의 호환성때문에 jquery를 활용하여 ajax를 사용하는 추세로 바뀌었다.
<jQuery 스타일>
var serverAddress = 'https://localhost:3000';
// jQuery의 .get 메소드 사용
$.ajax({
url: serverAddress,
type: 'GET',
success: function onData (data) {
console.log(data);
},
error: function onError (error) {
console.error(error);
}
});🔑장점
1.jQuery형태로 쉽게 구현이 가능하다
2.Error,sucess,Complete 형태로 실행흐름 조절이 가능함
😥단점
1.핵심적으로 Promise형태가 아니기에 데이터를 다루기가 조금 귀찮아짐
2.XHR을 통한 통신은 비동기통신에 최적화가 되어있는 Api가 아님
🚩Axios에 대하여
axios는 Node.js와 브라우저를 위한 Promise API를 활용하는 HTTP 통신 라이브러리이다.
비동기로 HTTP 통신을 할 수 있으며 return을 promise 객체로 해주기 때문에 response 데이터를 다루기 쉽다는점이 있다.
<코드형태>
axios({
method: 'post',
url: 'https://localhost:3000/user',
data: {
userName: 'plugnplay',
userId: 'minsu'
}
}).then((response) => console.log(response));🔑장점
1.response timeout 처리방법이 존재한다!
하지만 이러한 점은 뒤에 나올 fetch()에는 존재하지 않음
2.브라우저 호환성에 좋다
😥단점
1.그래두 axios는 기능적으로는 다 좋지만 사용을 위해서는 모듈을 설치해야 한다는 점이 좀 귀찮다,,,
npm install axios
🚩fetch()
Es6부터 새로 들어온 javascript 내장 라이브러리로서 굳이 따로 비동기통신을 위한 모듈설치나 그런게 없어서 편리하다.
axios와 비슷하게 Promise객체 기준으로 response에 대해서 다루기가 쉽다.
<코드패턴>
fetch("https://localhost:3000/user/post", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
id: "plugnplay",
description: "fetch를 써봐요!",
}),
}).then((response) => console.log(response));🔑장점
1.별도의 import가 필요 없으면 promise객체라는 장점이 존재한다
2.내장 라이브러리로서 업데이트에 따른 에러방지가 가능하다
😥단점
1.response timeout에 대한 방법이 없어,,에러발생시 기다려야함,,,
2.JSON으로 변환해주는 과정이 필요하다
참고)JSON.stringfy(객체):객체를 문자열로 직렬화 함
JSON.parse(data):서버에서 온 json 정보를 js객체로 변환
3.지원하지 않는 브라우저가 있다...브라우저 호환성이 axios에 비해 조금 떨어짐,,,예를 들어 Internet exploer
🚩결론
조금은 불안정하고 간단한 형태의 비동기 통신 정도가 필요하면 fetch()를 사용해도 충분하지만 일반적으로 웹프레임워크상에서는 대개 axios를 사용하여 브라우저 호환성에 대한 우수성을 더 부여해서 사용한다!
axios가 fetch()에 상위버젼이라고 생각하면 될듯하다.
