Ajax, fetch, Axios 이해 해보기 🥴

처음에는 Ajax에 대해서만 깊게 정리하려고 했지만, 우리가 Ajax이외에도 클라이언트와 서버 사이에 데이터를 비동기 통신을 할때 Axios, fetch를 사용하고 있다. 그래서 이 두가지 방법과 같이 Ajax와 연관지어서 한번 각각의 특징과 장, 단점을 한번 같이 정리해보려고 한다.

⭐️ Ajax ?

• Ajax는 Asychronous Javascript And XML 이 약자이다.
• 약자를 토대로 의미를 한번 살펴보면 Javascript를 사용한 비동기 통신, 클라이언트와 서버간의 XML 데이터를 주고받는 기술이다.
• 쉽게 말하면 자바스크립트를 통해서 서버에 데이터를 요청하는 것 이라고 생각하면 된다.

✏️ 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(); // 전송된 요청 취소

위는 전통전인 Ajax 사용코드 이다.

📖 진행 과정을 간략히 정리

1. XMLHttpRequest Object를 만든다.
   • request를 보낼 준비를 브라우저한테 시키는 과정이다.
   • 필요한 method를 갖춘 Object가 필요하다.
2. callback 함수를 만든다.
   • 서버에서 response가 왔을 때 실행하는 함수
   • HTML 페이지를 업데이트 한다.
3. Open a request
   • 서버에서 response가 왔을 때 실행 시키는 함수
   • HTML 페이지를 업데이트 한다
4. send the request

오래전에는 서버에서 데이터를 받아오는데 XML이 사용되었으나, 현재는 기본적으로 json 형식으로 받고 있다.

✏️ Ajax 의 장점은 뭐가 있을까?

• 웹페이지의 속도 향상
• 비동기적으로 처리하기 때문에 서버의 처리가 완료될 떄까지 기다리지 않고 처리가 가능하다.
• 서버에 Data만 전송하면 되므로 전체적인 코드의 양이 줄어든다.
• 기존 웹에서는 불가능했던 다양한 UI를 가능하게 해준다.

✏️ Ajax 의 단점은?

• 히스토리 관리가 안된다. ( 보안에 신경 써야된다. )
• 연속적으로 데이터 요청 시 부하가 증가 될 수 있다.
• XMLHTTPRequest를 통해 통신을 하는 경우 사용자에게 아무런 정보가 주어지지 않아서 아직 요청이 완료되지 않았는데 페이지를 떠나거나 오작동 할 우려가 발생한다.

✏️ Ajax에 대해 더 알아보자면

보통 Ajax 에 대해 말을 하다보면 JQuery와 Ajax를 같이 말하는 경우가 많다. 하지만 이와 같은 경우는 Ajax라는 친구를 JQuery를 통해 보다 더 쉽고, 깔끔하게 사용할 수 있기 때문이지 두개가 절대 같은 의미를 받아들이면 안된다. Ajax는 크기가 커지면 코드가 매우 지저분했기에 이에 대한 보완이 필요했고, 그러던 도중에 JQuery에서 Ajax를 편리하게 사용할 수 있도록 정리하면서 급부상하게 된 것이다. ( 물론 JQuery 코드 자체가 워낙 간단한 이유가 있다.)

✏️ Ajax를 JQuery로 구현하면

var serverAddress = 'https://jsonplaceholder.typicode.com/posts';

// jQuery의 .get 메소드 사용
$.ajax({
    url: ,
    type: 'GET',
    success: function onData (data) {
        console.log(data);
    },
    error: function onError (error) {
        console.error(error);
    }
});

• JQuery 를 통해 Ajax를 사용했을 때보다 훨씬 간단하고, 직관적이다.
• Ajax로만 구현 시에는 브라우저 간 호환성에 대해 염두해두고 각 다른 코드를 작성해야하는 경우가 있는데 JQuery를 사용할 경우 호환성에서도 보장이 된다.

💡 지금은 JQuery 지양하기? 왜?

지금은 왜 JQuery를 지양하는지에 대해 간단하게 넘어가보면 크게 3가지 이유로 볼 수 있다.

1. 사용할 이유가 딱히 없다. 과거와 달리 크로스 브라우징 이슈도 적어졌고, virtual DOM의 인기로 DOM을 직접 조작할 필요가 없다.
2. JQeury는 기존 코드를 래핑해서 새롭게 만든 패키지이다. 문제는 이러한 래핑이 지나치게 많고, 애초에 최적화를 고려하지 않고 만들어졌다.
3. 좋은 대안이 많이 생겼다. 우리가 보통 사용하는 React만해도 재사용성을 높인 컴포넌트 기반으로 JQuery 보다 훨씬 가독성이 높은 코드를 작성 할 수 있다.

이렇게 3가지 이유를 볼 수 있는데 워낙 다양한 라이브러리와 프레임워크가 나오면서 당장 앞에 문제에 대한 답을 얻기보다는 어떻게 효과적으로 답을 도출할것인지에 대한 과정의 중요성이 커졌기 때문이라고 할 수 있다.

⭐️ fetch ?

//fetch
const url ='http://localhost3000/test`
const option ={
   method:'POST',
   header:{
     'Accept':'application/json',
     'Content-Type':'application/json'
  },
  body:JSON.stringify({
  	name:'changhyeon',
    age:29
  })

  fetch(url,options)
  	.then(response => console.log(response))
	.catch(error => console.log(error))

🎤 fetch 설명 하자면

• ES6부터 들어온 Javascript 내장 라이브러리
• Promise 기반으로 만들어졌기 때문에 Axios와 마찬가지로 데이터 다루기가 쉽다.
• 내장 라이브러리라는 장점으로 상당히 편리하다.

✏️ 장점

1. 내장 라이브러리이기 때문에 import 하지 않아도 사용이 가능하다.
2. 라이브러리 업데이트에 따른 에러방지가 가능하다.
   (React-Native의 경우 잦은 업데이트로 인해 브라우저가 쫒아오지 못하는 경우가 많은데, fetch의 경우 이를 방지 할 수 있다.)

✏️ 단점

1. 네트워크 에러가 발생했을 때 기다려야 한다. (response timeout API 제공 X)
2. 지원하지 않는 브라우저가 있다.
3. return 값이 Promise라서 관리가 쉽다.

⭐️ Axios ?

//axios
const option ={
  url ='http://localhost3000/test`
   method:'POST',
   header:{
     'Accept':'application/json',
     'Content-Type':'application/json'
  },
  data:{
  	name:'baechang',
    age:30
  }

  axios(options)
  	.then(response => console.log(response))
	.catch(error => console.log(error))

🎤 Axios 설명하자면

• Node.js 와 브라우저를 위한 Promise 기반 HTTP 라이브러리 이다.
• 비동기로 HTTP 통신을 할 수 있으며, return을 Promise객체로 반환해주기 때문에 response를 다루기 쉽다.

✏️ 장점

1. reponse timeout(fetch에 없는 기능) 처리방법이 존재한다.
2. Promise 기반으로 만들어졌기 때문에 데이터 다루기가 편하다.
3. 크로스 브라우징 최적화로 브라우저 호환성(구형 브라우저 지원)이 뛰어나다.
4. request aborting(요청 취소)가 가능하다.
5. JSON 데이터 자동변환이 가능하다.

✏️ 단점

• 사용을 위해 모듈 설치가 필요하다 (npm i axios, yarn add axios)

⭐️ 비교해보기

Axios	Fetch
써드파티 패키지로 설치가 쉽다.	Built-in APIs로 별도의 설치가 필요없이, 모던 브라우저에서 사용이 가능하다.
wide browser 지원	오직 크롬 42+, firefox 39+, edge 14+, safari 10.1+ 지원. polyfill 이용해서 하위 호환성 지원 가능
XSRF Protection 보안 기능 제공	없음
자동 JSON 데이터 변환	JSON 데이터 핸들링 위해 추가 절차 필요
Request취소와 Request Timeout 설정 가능	없음 ( AbortController 이용하여 구현 가능 )
HTTP Requests의 Intercept 가능	Intercept Requests 제공 X (Global Fetch Method 를 Overwrite하여 인터셉터 정의는 가능)
Download Progress 지원	Upload Progress 지원 X (Response Object의 Body Property 통해 제공되는 ReadableStream 인스턴스 이요 가능)

표를 통해 비교하면 얼핏 비슷해보이는 두가지 방법이 다르다는것을 알 수 있다.

👀 코드를 통해서 차이점을 비교해보면

• fetch는 body 프로퍼티를 사용하고, Axios는 data 프로퍼티를 사용한다.
• fetch의 url fetch함수의 인자로 들어가고, Axios는 url이 option객체로 들어간다.
• fetch에서 body 부분은 stringify()가 된다.

이처럼 Axios는 상대적으로 HTTP 통신의 요구사항을 컴팩트하게 보여주는 패키지로써 사용하기 쉽게 설계되어있는 것을 알 수 있다.

🤔 뭐가 베스트야...

그러면 어떨때 두가지 방법 중 골라서 쓰면 되는 걸까?
먼저 프로젝트의 성격을 파악해서 각 장,단점에 맞게 사용하면 베스트이긴한데 간단한 통신의 경우에는 fetch 를 사용하고 구조가 복잡하고 규모가 커지는 경우에는 조금 더 직관적인 Axios를 사용하면 될거 같다.

위에서도 설명했지만 업데이트가 잦은 React-Native 같은 경우에는 Built-in APIs인 fetch를 사용함으로써 더 안정적으로 운영이 가능할거 같다.

🔗 참고

• https://ko.javascript.info/fetch-progress
• https://velog.io/@eunbinn/Axios-vs-Fetch
• https://tlsdnjs12.tistory.com/26
• https://eundol1113.tistory.com/256
• https://99geo.tistory.com/65
• https://basemenks.tistory.com/256
• https://yeonfamily.tistory.com/10
• https://cocoon1787.tistory.com/756
• 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://devscb.tistory.com/66

정확하지 않은 정보가 있을 수 있습니다. 댓글을 통해 피드백 주시면 적극적으로 반영하겠습니다🥲