Ajax 한 번 짧고 굵게 배워보겠습니다🏃!
Ajax란?
- Asynchronous Javascript And Xml의 약자.
- 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식.
왜 사용하는지?
- 비동기 방식으로 동작하기 때문에 블로킹이 발생하지 않음.
- 필요한 데이터만 서버로부터 전송받기 때문에 불필요한 데이터 통신이 발생하지 않음. → 같은 이유로 변경할 필요가 없는 부분은 다시 렌더링하지 않음. (화면깜빡임이 없다)
그런데!
- 원하는 정보를 요청해서 받아올 수 있지만 반대로 알아서 정보가 오진 않음. (실시간 서비스 불가)
- ajax를 사용하지 못하는 브라우저가 있음.
- 너무 많은 데이터를 요청하면 서버 부하가 증가할 수 있음.
- 같은 서버만 데이터 요청 가능.
- 요청진행 과정중에 사용자가 중간에 나가버리면 에러가 발생할 수 있음.
사용 방법
fetch
- xhr보다 강력하고 유연함.
- 프로미스 기반으로 동작해서 비동기 프로그래밍방식에 적합.
- 자바스크립트에 내장된 라이브러리라서 바로 사용 가능.
axios
- 편리한 기능이 많아 뷰, 리액트같은 프레임워크에서 많이 사용함.
npm i axios로 설치하고 사용 가능.
두 가지밖에 쓰지 않은 이유는 아직 내가 이거밖에 안써봤기 때문..
이미지 출처: https://en.wikipedia.org/wiki/AFC_Ajax#/media/File:Ajax_Amsterdam.svg
