ajax? fetch? axios?

서론

겁나 헷갈려서 이번에 조사해보았다.

---

ajax 란?

Mdn에는 이렇게 적혀있다.

AJAX란 비동기 자바스크립트와 XML (Asynchronous JavaScript And XML)을 말합니다. 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말합니다. JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있습니다. AJAX의 강력한 특징은 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 "비동기성"입니다. 이러한 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해줍니다.

 

예시로 네이버 회원가입을 예로 들자면,

여기서 사용할 아이디 입력후 중복 체크를 할것이다. 이때 만약에 중복체크를 할때 마다 새로고침을 한다면.. 불편해서 못쓸것이다.

그래서 만들어진것이 ajax이다. 

 

ajax를 사용하면 페이지 전체를 새로고침 하지 않아도 서버로 부터 데이터를 받을수 있다. 

주로 jquery와 함께 사용한다고 한다. (더 사용하기 쉬워서)

네이버 회원가입

devtool로 본 network

devtool로 본 source

 

그럼 궁금증이 생길수 있다. fetch와 axios도 새로고침없이 서버로부터 데이터를 받아올수 있는데, 이것도 ajax인가여?

"서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것 " -> ajax

fetch는 XMLHttpRequest객체 를 사용하지 않기 때문에  일단 아님

axios는 직접적으로 XMLHttpRequest객체 를 사용하지는 않지만, axios 모듈에서 만들어주기 때문에 내 생각에는 ajax라고 봐야할거 같다. ( 이 부분을 더 찾아보고 추가하겠다. )

---

원래는 위에 써놓은것 처럼

"서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것 " -> ajax

이였지만, mdn ajax 설명 문서에 밑과 같이 적혀있다.

 

Asynchronous JavaScript + XML(AJAX)은 그 자체가 특정 기술은 아닙니다. 2005년 Jesse James Garrett이 처음 만들어낸 말로, HTML 또는 XHTML, CSS, JavaScript, DOM, XML, XSLT, 그리고 제일 중요한 XMLHttpRequest 객체를 비롯해 기존의 여러 기술을 사용하는 "새로운" 접근법을 설명하는 용어입니다.
이렇게 다양한 기술을 AJAX 모델로서 결합했을 때, 웹 어플리케이션은 전체 페이지를 새로 고칠 필요 없이 사용자 인터페이스에 빠르고 점진적인 업데이트를 적용할 수 있습니다. 덕분에 어플리케이션은 보다 빨라지고, 사용자 행동에 대한 반응성도 좋아집니다.

그러니까 fetch, axios 다 ajax임.

---

fetch 란?

Mdn 왈

"Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있습니다.  XMLHttpRequest와 같은 비슷한 API가 존재합니다만, 새로운 Fetch API는 좀더 강력하고 유연한 조작이 가능합니다."

 

XMLHttpRequest보다 더 편한 기능들이 들어가 있다.

// promise로 되어있어서 다루기 편함
declare function fetch(input: RequestInfo, init?: RequestInit): Promise<Response>;

type RequestInfo = Request | string;

interface RequestInit {
    /**
     * A BodyInit object or null to set request's body.
     */
    body?: BodyInit | null;
    /**
     * A string indicating how the request will interact with the browser's cache to set request's cache.
     */
    cache?: RequestCache;
    /**
     * A string indicating whether credentials will be sent with the request always, never, or only when sent to a same-origin URL. Sets request's credentials.
     */
    credentials?: RequestCredentials;
    /**
     * A Headers object, an object literal, or an array of two-item arrays to set request's headers.
     */
    headers?: HeadersInit;
    /**
     * A cryptographic hash of the resource to be fetched by request. Sets request's integrity.
     */
    integrity?: string;
    /**
     * A boolean to set request's keepalive.
     */
    keepalive?: boolean;
    /**
     * A string to set request's method.
     */
    method?: string;
    /**
     * A string to indicate whether the request will use CORS, or will be restricted to same-origin URLs. Sets request's mode.
     */
    mode?: RequestMode;
    /**
     * A string indicating whether request follows redirects, results in an error upon encountering a redirect, or returns the redirect (in an opaque fashion). Sets request's redirect.
     */
    redirect?: RequestRedirect;
    /**
     * A string whose value is a same-origin URL, "about:client", or the empty string, to set request's referrer.
     */
    referrer?: string;
    /**
     * A referrer policy to set request's referrerPolicy.
     */
    referrerPolicy?: ReferrerPolicy;
    /**
     * An AbortSignal to set request's signal.
     */
    signal?: AbortSignal | null;
    /**
     * Can only be null. Used to disassociate request from any Window.
     */
    window?: any;
}

---

axios란?

공식문서를 일단 찾아보자.

 

what is axios?

Axios is a promise-based HTTP Client for node.js and the browser. It is isomorphic (= it can run in the browser and nodejs with the same codebase). On the server-side it uses the native node.js http module, while on the client (browser) it uses XMLHttpRequest.

 

feature

• Make XMLHttpRequests from the browser
• Make http requests from node.js
• Supports the Promise API
• Intercept request and response
• Transform request and response data
• Cancel requests
• Automatic transforms for JSON data
• Client side support for protecting against XSRF

그냥 XMLHttpRequests를 직접적으로 사용하지 않고 Ajax요청을 편하게 하는 모듈이다. 

개인적인 후기로는 Supports the Promise API, Automatic transforms for JSON data 덕분에 코드짜기 편했다.

 

사용법은.. 너무 인터넷 세상에 널렸으니 생략하겠음. 최근에도 훅만들어 쓰는 방법 포스팅 했음 ㅋㅋ

https://kunkunwoo.tistory.com/235?category=869096 

custom useAxios hook

---

참고

https://developer.mozilla.org/ko/docs/Web/Guide/AJAX

AJAX - 웹 개발자 안내서 | MDN

https://axios-http.com/docs/intro

Getting Started | Axios Docs

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

[개발상식] Ajax와 Axios 그리고 fetch