[Javascript] AJAX란? (feat. Fetch, XHR, 장점 단점)

 

 

 

웹 브라우저를 사용하면 특정 부분만 업데이트가 되는 경우가 많다. 유튜브에서 동영상을 재생하고 버퍼링이 되는 동안 다른 기능을 조작할 수 있는 것도 동일한 기능이다. 페이지가 리로딩 되지 않으면서 특정 컴포넌트의 상태만 변경시키는게 어떻게 가능할까?

 

구글에서 검색을 할 때 추천 검색어가 쿼리창 바로 아래에 출력된다. 페이지가 리로딩 되지도 않았는데, 검색창 컴포넌트만 변경되는 것이다. 검색어가 변경될 때 마다 추천 검색어가 실시간으로 변경된다.

 

 

 

AJAX(Asynchronous Javascript And XMLHttpRequest)

 

웹 브라우저에서 비동기로 작동하면서 특정 컴포넌트의 상태를 변경시키는 기술이다. AJAX는 Javascript, DOM, Fetch, XMLHttpRequest , HTML 등의 기술을 종합한 기술이다.

 

구글에서 검색어를 입력할 때 아래에 추가되는 추천 검색어 컴포넌트라던지, 스크롤을 아무리 내려도 새로운 컴포넌트가 계속해서 추가되는 무한 스크롤 기능들 모두 AJAX를 사용한다.

 

 

AJAX는 비동기적으로 필요한 데이터만 서버에서 받아와 컴포넌트 상태를 변경시킨다. 사용자 입장에서는 한번 웹 브라우저가 로딩만 되면 페이지 전체를 새로 로딩할 필요없이 좀더 깔끔한 UI를 즐길 수 있게 된다.

 

AJAX의 두 가지 기술

 

AJAX는 Javascript와 Fetch 메소드로 구현된다. AJAX을 사용하지 않았던 전통적인 웹 애플리케이션은 <form> 태그를 사용해서 서버에 자원을 요청했다. 서버로 부터 응답이 도착하면 새로운 렌더링을 하면서 웹 페이지 리로딩이 발생하는게 일반적인 현상이었다.

 

AJAX의 근간을 이루고 있는 Fetch는 Javascript Promise를 반환하는 Web API다. 비동기식으로 동작하며, then, catch, finally 후속 처리 메소드를 지원하고 있다. 당연히 서버에 요청을 보내고 난 후 이후 작업을 계속해서 진행할 수 있다. 

 

fetch() 메소드를 사용하면 비동기 처리 뿐만 아니라 전체 페이지 중 필요한 컴포넌트의 정보만 변경할 수 있기 때문에 오버헤드가 적다.

 

fetch() 메소드를 사용하기 전 XHR(XML HttpRequest)라는 객체를 사용했다. Fetch는 XHR의 단점을 보완한 Web API다.  Fetch는 XML 보다 가볍고 Javascript와 호환이 쉬운 JSON을 사용한다. JSON.stringify() / JSON.parse() 메소드를 사용해 손쉽게 JS의 객체를 JSON으로 변환할 수 있다.

 

 

AJAX 장점 VS 단점

 

장점

① 서버가 완성된 HTML을 반환하지 않더라도 웹 페이지를 구성할 수 있다. 웹 페이지를 구성하는데 추가적으로 필요한 데이터는 비동기적으로 가져와 렌더링 할 수 있다.

② XHR이 표준화 되면서 브라우저에 상관 없이 AJAX를 사용할 수 있다.

③ User Interaction이 많이 발생하는 애플리케이션일 수록 사용자가 참여하는 부분이 많아진다. 유저 중심 Application을 개발할 때 AJAX는 필요한 부분만 렌더링하면서 웹 애플리케이션의 실행속도를 향상시킨다.

④ 서버와 클라이언트 간 작은 대역폭이 가능하다. 전체 데이터가 아닌 필요한 일부분만 응답받아오면 되기 때문에 통신 데이터의 크기가 작다.

 

 

단점

① Google SEO에 불리하다. 최초 서버로 부터 응답을 받은 시점에는 HTML을 만들기 위한 기본 코드만 존재한다. 이후 서버로 부터 필요한 데이터만 선택적으로 비동기 방식으로 응답받아 페이지를 렌더링한다. 검색엔진의 크롤봇은 최초 서버로부터 받은 뼈대만 남아있는 HTML소스를 크롤하기 때문에 SEO(Search Engine Optimization)에 불리하다.

② AJAX에서는 뒤로가기 상태를 저장하지 않는다. 전체 페이지를 받고 나서 React History API를 별도로 사용해서 구현해줘야하는 번거로움이 있다.

 

 

Reference

• Ajax 시작하기 - 웹 개발자 안내서 MDN
• AJAX 기초 - 코딩의 시작

 

 

 

[Network] HTTP Message Request Response 동작 이해하기