1. Ajax

초창기의 웹은 하이퍼링크(hyperlink)를 클릭하면 새로운 웹 페이지가 로드되는 방식이었다.

다만, 이 경우, 화면의 일부분만 바뀌면 되는 경우에도 매번 새 페이지가 로드되어야 했기 때문에, 비효율적이었고, 사용자 입장에서도 좋지 않은 경험이었기 때문에, 이러한 단점을 극복하고자 Ajax 기술이 도입되었다.

Ajax는 웹 브라우저가 현재 페이지를 그대로 유지한 채로 서버에 request를 보내고 response를 받아서, 새로운 페이지를 로드하지 않고도 변화를 줄 수 있게 해준다.

Ajax는 Asynchronous JavaScript And XML의 줄임말로, 이는 자바스크립트를 사용해서 비동기적으로, 즉 사용자가 보고 있는 현재 화면에 영향을 미치지 않고 별도로 백그라운드에서 작업을 하는 형태로 request를 보내고 response를 받는 데 기반이 되는 기술들의 집합을 의미한다.

아래 사진과 같이, 지도에서 특정 위치를 클릭했을 때, 새로운 창이 열리는 것이 아니라 아래에 작은 창이 하나 생성되는 것이 Ajax 기술이 사용된 예시이다.

자바스크립트에서는 XMLHttpRequest 객체를 통해 Ajax와 통신을 할 수 있다.

아래 예시 코드를 함께 살펴보자.

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://learn.codeit.kr/api/members');
xhr.onload = function () {
  console.log(xhr.response);
};
xhr.onerror = function () {
  alert('Error!');
};
xhr.send();

첫 번째 줄의 코드에 XMLHttpRequest라고 하는 생성자 함수로 객체를 생성하였는데, 이렇게 코드를 작성하면 Ajax 통신이 가능해진다. (Ajax 기술을 기반으로 한 통신을 Ajax 통신이라고 한다.)

사실, 요즘에는 이렇게 XMLHttpRequest를 직접 사용할 일이 별로 없는데, 그 이유는 fetch 함수를 사용해서 Ajax와 통신을 할 수 있기 때문이며, fetch 함수로 사용하는 것이 코드를 작성하는 데 있어 더 간결하다.

또한, XMLHttpRequest를 기반으로 더 쓰기 편하게 만들어진 axios라는 패키지(라이브러리)가 존재하기 때문이라는 이유도 있으며, axios 패키지에 좀 더 다양한 기능들이 있기 때문에, 개발 실무에서 주로 사용하는 방식은 axios 패키지이다.