(1) Sending a request with JavaScript

AJAX는 Asynchronous JavaScript And XML 의 줄임말이며

번역하면 비동기 자바스크립트와 XML이다.

왜 갑자기 AJAX가 나온건지, 뭘 의미하고 왜 중요한지 알아보자.

 

AJAX

자바스크립트는 원래 웹페이지를 동적으로 만드는 데 쓰였다.

어떤 버튼을 클릭하면 화면이 움직이고

스크롤을 하면 새로운 컨텐츠가 로딩되는 등

이렇게 사용자의 동작에 따라 웹 페이지의 모습이 바뀌는 것이다.

 

HTML과 CSS만으로는 동적 웹 페이지를 만들 수 없었지만

자바스크립트를 활용하면서 가능해졌다.

 

이런 다이나믹한 기능을 구현하는 데 필요한 기술 중 하나는

자바스크립트로 서버와 데이터를 주고 받는 것이다.

 

좋아요 버튼을 예시로 들어보자.

보통 좋아요 버튼을 누르면 버튼의 모습이 바뀌고

숫자가 카운터 되거나 그렇지 않을 수도 있다.

 

이 때 사용자가 버튼을 누르는 순간,

서버에 리퀘스트(Request)를 보내서 좋아요 정보를 전달해야한다.

 

그래야 사용자가 좋아요를 눌렀다는 사실을 기억하고

다음에 웹사이트를 보여줄 때, 그리고 다른 사람들에게 웹사이트를 보여 줄 때

최신화된 정보를 보여줄 수 있기 때문이다.

 

또다른 예시로 보자면

보통 SNS 피드 같은 페이지는 아래로 스크롤하면 

추가적인 컨텐츠가 로딩되어 계속 스크롤 할 수 있을 것이다.

사용자가 특정 지점까지 스크롤을 하면

자바스크립트로 서버에 리퀘스트를 보내서 추가적인 데이터를 받아와야한다.

즉 추가 데이터를 받아오면 페이지 아래부터 추가해서 보여주는 형식이다.

 

그리고  또 하나의 중요한 점은 

이런 웹 통신은 비동기적으로 이루어져야 한다는 점이다.

자바스크립트로 리퀘스트를 보낸 후

서버의 리스폰스(Response)가 돌아오려면 시간이 오래 걸릴 수 있기 때문에

리스폰스를 기다리는 동안에는 다른 자바스크립트 코드를 실행하는 것이 효율적이다.

리스폰스를 기다리는 동안 아무 코드도 실행하지 않는다면

그 시간 동안은 웹 브라우저가 멈춘 듯 반응이 없을 것이기 때문이다.

---

정리하자면 동적 웹 사이트를 만들기 위해서는

비동기적으로 자바스크립트 코드로 서버에 리퀘스트를 보내고

리스폰스를 받아오는 기술인 AJAX를 사용한다.

(참고로 과거에 XML로 데이터를 불러왔다면 현재는 JSON 형식을 더 많이 사용)

 

처음에는 자바스크립트의 XMLHttpRequest 객체를 이용하여 AJAX를 구현했는데

페이지 새로고침 없이 자바스크립트 코드로 리퀘스트를 보내고

리스폰스를 받을 수 있어서 많은 인기를 끌었지만

문법이 다소 복잡하고 직관적이지 않은 경우가 대부분 이였다.

 

그래서 요즘은 fetch 함수와 axios라는 라이브러리를 더 많이 사용하는데,

fetch, axios의 간단한 설명

자바스크립트로 리퀘스트를 보내는 방법 중 정석이라고 할 수 있는 fetch는

2015년도 ES6 표준에 소개된 문법으로서

쉽게 리퀘스트를 보낼 수 있고 이 전에 배운 Promise 기반 문법을 사용하기 때문에

비동기 부분도 깔끔하게 처리할 수 있다.

 

axios는 fetch와 문법이 비슷하며

차이점은 리퀘스트나 리스폰스를 다루는 방법이 조금 다르고

실무에 유용한 편의 기능을 제공해 주기 때문에 

axios도 알고 있으면 자바스크립트 웹 개발에 큰 도움이 된다.

다음 글에서부터 fetch의 기본 문법에 대해 알아보자