[기타] Ajax와 Axios, Fetch에 대한 정리 및 내 생각

개발을 하다보면 클라이언트(프론트)에서 서버(백) 서버간 데이터를 주고 받아야 할 때가 있다.

javascript에서 HTTP통신으 할 때 많이 쓰는 게 ajax, axios, fetch인데.. 지금까지 프로젝트를 하면서 썼던 건

 

1. JQuery 라이브러리를 활용한 ajax 통신

2. axios 라이브러리를 활용한 axios 통신

 

이렇게 2개였다. 조금 더 편하기 하게 위해 외부라이브러리를 이용했었는데..

ajax와 axios의 자세한 내용은 아래 링크 확인

 

https://bongra.tistory.com/57

[JS] AJAX를 통한 동적으로 서버통신을 해보자. (feat. Js, JQuery, Axios)

 

오늘은 ajax와 axios가 어떻게 다른 지 조금 정리해보고 싶어서 이렇게 글을 쓴다. fetch 까지 더해서...

( 여기서는 따로 코드나 사용법이 아니라, 뭐가 다른지에 대한 그냥 기록만 하려고 한다. )

그럼 시작해보자.

 

 

Ajax

============================================================================

 

javascript에서 HTTP통신(Request, Response)을 하기 위해 사용되는 기술로,  비동기 방식으로 이루어진다. <= 핵심

전체 페이지를 다시 불러오는 동기방식에 비해 효율적인 사용자 인터페이스 갱신이 가능하다.

작성방법으로는

 

1. 순수 javascript문으로 작성되는 ajax문

2. JQuery를 활용한 ajax문

 

2가지가 있지만, 순수 javascript문으로 작성되는 ajax문은 코드가 길고 복잡하기 때문에 요즘은 잘 사용하기 않기도 하고

순수 javascript문의 ajax는 호환이 되지 않는 문제점 때문에 브라우저에 따른 각기 다른 코드를 작성해야 하는 문제가

생김. 하지만 JQuert를 활용한 ajax는 어느 브라우저에서나 호환이 되기 때문에 자주 사용하는 추세

 

정리 : 코드의 복잡성 + 브라우저 호환성 때문에 JQuery를 활용한 ajax문을 많이 사용하는 추세이다.

 

 

Axios 

============================================================================

 

기존 ajax와 같이 클라이언트에서 서버간 데이터를 주고 받기 위해서는 XHR(XML HTTP Request)객체를

사용했어야 했다. 아래 이미지와 같이 순수 javascript와 같이..

 

XHR 객체 생성

근데 XHR은 비동기통신에 최적화 된 API가 아니라고 한다. ( 이건 다음에 따로 정리를 해야겠다. )

그래서 나온 녀석이 Axios와 Fetch인데..

 

일단 Axios는 외부라이브러리를 사용해서 가져온다. ( Fetch와의 차이점 중 하나 )

즉 외부 라이브러리를 활용해서, ajax의 단점을 보완해서 비동기 통신을 해보자! 가 axios가 나온 이유다.

특징은 비동기로 HTTP통신을 가능하게 해주며, return을 Promise 객체로 해주기 때문에 Reponse 데이터를

더 다루기 쉽다고 한다.

 

 

Fetch

============================================================================

Fetch는 Axios와 비슷한 녀석이다. return을 Promise 객체로 돌려줘서 Response 데이터를 다루기도 쉽다고 한다.

가장 큰 차이점은 Fetch는 ES6에 내장 된 내장 라이브러리라는 점이다.

즉 Axios처럼 따로 외부 라이브러리를 가져 올 필요가 없다는 뜻이기도 하다..

이외에도 라이브러리 업데이트에 따른 에러방지 기능이 있다고 한다. 그래서 React-Native 환경처럼 업데이트가

자주 일어나는 환경에서는 외부 라이브러리가 업데이트를 따라 오지 못하는 경우가 발생해서

React-Native에서는 자주 사용한다고 한다. ( React는 잘모르니 패스.. )

 

 

 

결론 : 요즘은 Ajax보다는 Axios 또는 Fetch를 더 자주 사용하는 추세이다. ( 물론 개발환경에 따라 다르지만 )

 

개인적인 내 생각으로는 순수 javascript로 쓰는 ajax는 너무 복잡하고, 그렇다고 JQuery를 써서 ajax를 쓸 거면

axios나 fetch를 쓰는 게 아닐까? 라는 생각을 한다.

이번에 이거 정리하면서 역시 나는 axios를 더 쓰지 않을까? 라는 생각을 했다. 브라우저 호환성이나, 기능도 조금 더

많은? 느낌.. 

그래도 다음에 기회가 되면 Fetch를 통해서 비동기 통신을 한번 해봐야겠다. API호출이나..