서론
JavaScript에서 클라이언트와 서버 간 데이터를 주고받기 위해 비동기 HTTP 통신을 사용한다.
그 예로 Ajax, Axios, fetch 가 있다.
비동기에 관하여 참고하면 좋은 자료
[JavaScript] Promise(프로미스) 란 무엇인가?
프로미스(promise)를 이해하기 위해서는 JavaScript가 어떤 식으로 작동하는지 알아야 한다. 싱글 쓰레드 언어인 JavaScript는 비동기 처리를 위해서 콜백(Call Back)을 이용해 이를 보완하였다. 하지만 Cal
shin1303.tistory.com
[JavaScript] 비동기 처리 - Async / Await이란 무엇인가?
비동기 처리의 중요성 시간이 걸리는 코드를 비동기 처리하지 않으면 문제가 발생할 수 있음 Ex) 서버에서 Data를 받아와서 출력해야 하는 상황에 비동기 처리를 하지 않으면 Data를 받을때 까지
shin1303.tistory.com
Ajax (Asynchronous JavaScript And XML)
JavaScript를 사용한 비동기 HTTP 통신을 가능하게 해 줌.
클라이언트와 서버 간에 데이터를 주고받는 기술.
비동기 HTTP 통신이란 response와 request를 비동기적으로 다룰 수 있다는 의미.
XMLHttpRequest(XHR) 객체를 이용해서 전체 페이지가 아닌 필요한 데이터만 불러올 수 있음.
장점
- jQuery를 통해 쉽게 구현 가능.
- error, success, complete의 상태를 통해 실행 흐름 조절 가능.
단점
- JQuery를 사용해야 간편하고 호환성이 보장됨.
- promise 기반이 아님.
Axios
Promise based HTTP client for the browser and node.js - [npm]
브라우저(browser)와 Node.js를 위한 HTTP 비동기 통신 라이브러리.
Promise기반으로 만들어졌기에 데이터를 다루기 편리
장점
- response timeout (fetch에는 없는 기능) 처리 방법이 있음.
- 크로스 브라우징 최적화로 브라우저 호환성이 뛰어남.
- 구형 브라우저를 지원.
단점
- 사용을 위해 라이브러리 설치가 필요.
npm install axios
fetch
JavaScript의 내장 라이브러리.
Promise기반으로 만들어졌기에 데이터를 다루기 편리.
장점
- JavaScript의 내장 라이브러리로 별도의 import를 해줄 필요가 없다.
- 업데이트에 따른 에러 방지가 가능.
→ 업데이트가 잦은 React Native의 경우 라이브러리가 쫓아가지 못하는 경우가 있는데, 이를 방지
단점
- 지원하지 않는 브라우저가 있음. (... IE11).
- 네트워크 에러 발생 시 response timeout이 없어 기다려야 함.
- JSON으로 변환해주는 과정이 필요.
[Object → JSON]
JSON.stringify()
[JSON → Object]
JSON.parse()
참고 자료
https://www.npmjs.com/package/axios
axios
Promise based HTTP client for the browser and node.js
www.npmjs.com
[개발상식] Ajax와 Axios 그리고 fetch
여러분들이 프로젝트를 진행하다보면 클라이언트와 서버 간 데이터를 주고받기 위해 HTTP 통신을 사용하게될겁니다. 주로 어떤것을 사용하시나요? 또, 그것에 대해 얼마나 알고계시나요? 저와
velog.io
https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX
Ajax - Developer guides | MDN
Asynchronous JavaScript and XML, while not a technology in itself, is a term coined in 2005 by Jesse James Garrett, that describes a "new" approach to using a number of existing technologies together, including HTML or XHTML, CSS, JavaScript, DOM, XML, XSL
developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
Fetch API - Web APIs | MDN
The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used XMLHttpRequest, but the new API provides a more powerful and flexible feature set.The Fetch API provides an interface f
developer.mozilla.org