초기의 웹 애플리케이션은 사용자가 서버에 요청을 보내면, 전체 웹 페이지를 새로고침하여 서버에서 받은 데이터를 표시하는 방식이었다. 이 방식은 여러 가지 불편함을 야기했고, 이제는 당연하게 사용되는 비동기적 데이터 통신 방식이 생겨나게 되었다.
Ajax
Ajax은 Asynchronous JavaScript and XML의 약자로 자바스크립트를 사용한 비동기 통신 즉, 클라이언트와 서버간 데이터를 주고받는 기술이다. 이를 통해 웹 페이지가 전체를 다시 로드하지 않아도 특정 부분만 업데이트함으로써, 사용자 경험을 더욱 빠르고 부드럽게 만들어준다.
Ajax의 기본 개념
비동기성
Ajax 요청은 비동기적으로 처리되어, 서버에서 응답을 받을 때까지 웹 페이지가 멈추지 않고 다른 작업을 계속할 수 있다.
XMLHttpRequest 객체
XMLHttpRequest객체를 통해 자바스크립트가 서버와 비동기적으로 데이터를 주고받을 수 있다.
서버와의 데이터 통신
XML, JSON, HTML, 텍스트 등 다양한 형태로 데이터를 서버에서 받아올 수 있으며, 받아온 데이터를 웹 페이지의 특정 부분에 반영한다.
Ajax의 발전
jQuery의 활용
초창기 Ajax는 코드가 매우 지저분했다. 이를 보완하기 위해 jQuery에서 Ajax를 편리하게 사용하도록 정립하게되었다. 추가적으로 제이쿼리를 활용하여 Ajax를 구현할 경우 브라우저에 구애받지 않고 동일한 코드로 같은 작업을 할 수 있었다.
Fetch API와 Axios
Fetch API
Fetch API는 XMLHttpRequest의 대체제로서, 더 현대적이고 직관적인 방식으로 HTTP요청을 처리할 수 있게 해준다. Promise 기반으로 설계되어 비동기 코드의 가독성이 확장되었다.
Axios
Axios는 또 다른 HTTP 클라이언트 라이브러리로, Fetch API보다 다양한 기능을 제공한다.
js 비동기 처리 정리에 대한 내용은 일전에 정리한 적이 있어 이날 배운 내용은 복습 겸, 좀 더 자세히 알 수 있는 시간이 되어 좋았다.
