프로젝트 마무리 발표 준비 단계에서, 내가 개발한 부분을 영어로 작성하다가, 게시글(우리는 내내 post라고 불렀다) 생성, 수정, 삭제를 통틀어 뭐라고 해야할지 몰라 구글링을 열심히 해보았다.
처음에는 그냥 CRUD(Create, Read, Update, Delete)라고 하면 되지 않나, 했지만, CRUD는 백엔드 영역이라 적합하지 않아보인다고 팀원이 말해주었다. 그래서 계속 구글링을 하다가 AJAX가 무엇인가에 대해서 본의아니게 다시 공부하게 되었다.
우선, 우리 프로젝트에서는 axios를 사용하므로 AJAX를 쓰지 않는다.
AJAX는 예를 들어 우리가 배운 것 중엔 fetch를 사용한다는 것이다.
AJAX
Asynchronous JavaScript And XMLHttpRequest
자바스크립트를 이용해서 비동기적(Asynchronous)으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식
- 웹페이지에서 일부분만 렌더링 하고 싶을 때 AJAX 사용
- 페이지 전체를 로드하여 렌더링할 필요가 없고 갱신이 필요한 일부만 로드하여 갱신하면 되므로 빠른 퍼포먼스와 부드러운 화면 표시
- 서버에서 HTML을 완성하여 보내주지 않아도 웹페이지를 만들 수 있다 👉 이전에는 서버에서 HTML을 완성하여 보내주어야 화면에 렌더링을 할 수 있었다. 그러나 AJAX를 사용하면 서버에서 완성된 HTML을 보내주지 않아도 필요한 데이터를 비동기적으로 가져와 브라우저에서 화면의 일부만 업데이트하여 렌더링 할 수 있다.
- AJAX는 JavaScript에서 비동기 HTTP 통신이 가능하도록 해준다. (비동기 HTTP 통신 = request와 response를 비동기 식으로 다룰 수 있는 것)
- jQuery를 통해 AJAX 사용 시 더욱 간단, 직관적, 호환성 보장
- promise 기반 ❌
기존에 웹에서 비동기 요청을 할 때는 XHR(XML HTTP Request)객체를 사용했어야 했었는데, XHR은 잘 디자인되어 있는 API가 아니다.
이를 보완하기 위해 HTTP 요청에 최적화 되어있는 API가 생겨났는데, 그게 axios 와 fetch !
fetch
AJAX를 구성하는 핵심 기술은 JavaScript, DOM, fetch 이다.
전통적인 웹 애플리케이션에서는 <form> 태그를 이용해 서버에 데이터를 전송해야 했다.
그리고 클라이언트에서 요청을 보내면 매번 새로운 페이지로 이동해야 했다.
그러나 fetch를 사용하면, 페이지를 이동하지 않아도 서버로부터 필요한 데이터를 받아올 수 있다.
Fetch는 사용자가 현재 페이지에서 작업을 하는 동안 서버와 통신할 수 있도록 한다.
즉, 브라우저는 Fetch가 서버에 요청을 보내고 응답을 받을 때까지 모든 동작을 멈추는 것이 아니라,
계속해서 페이지를 사용할 수 있게 하는 비동기적인 방식을 사용한다.
또한 자바스크립트에서 DOM을 사용해 조작할 수 있기 때문에,
fetch를 통해 전체 페이지가 아닌 필요한 데이터만 가져와 DOM에 적용시켜
새로운 페이지로 이동하지 않고 기존 페이지에서 필요한 부분만 변경할 수 있다.
장점
- ES6부터 JavaScript의 내장 라이브러리이기 때문에 import 하지 않고 사용 가능
- promise 기반 ⭕️ (return을 promise객체로 해주기 때문에 response 데이터를 다루기도 쉽다)
단점
- response timeout API 제공 ❌ (네트워크 에러 발생 시 기다려야 한다)
- 브라우저 호환성이 상대적으로 떨어진다. (Internet Explorer 의 경우에는 fetch 를 지원하지 않는 버전도 존재하기 때문)
axios
Node.js와 브라우저를 위한 HTTP 통신 라이브러리
장점
- promise 기반 ⭕️ (return을 promise객체로 해주기 때문에 response 데이터를 다루기도 쉽다)
- React 사용 시 fetch 보다 axios 더욱 선호
- 크로스 브라우징에 신경을 많이 쓴 모듈이며, 기능 또한 우수하기 때문
- response timeout API 제공 (네트워크 에러 발생 시 기다리지 않아도 된다)
단점
- 모듈 설치를 해줘야 한다. (
import axios from 'axios'상단에 항상 필요)
axios vs. fetch
" 일단 웹 프론트 프레임워크(react js,vue js 등)을 다룰때에는 Axios를 사용하는 것이 더 좋다고 생각합니다.
Axios는 크로스 브라우징에 신경을 많이 쓴 모듈인게 눈에 보이며, 기능또한 우수하기 때문이죠.
전체적으로 제가 봤을 때 fetch의 상위 호환이라고 생각을 합니다.
✋ 다만, react-native에서는 fetch를 사용하는 것이 아주 조금 더 좋다고 생각합니다. react-native의 경우 아직 안정화 된 프레임워크가 아니기에 지속적인 version update가 진행되고 있고, axios에서 이를 반영하지 못할 경우 생각지 못한 에러가 발생할 수 있다는 우려 때문입니다. "
출처 : [개발상식] Ajax와 Axios 그리고 fetch
References
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://lily-im.tistory.com/15
https://cocoon1787.tistory.com/756
