[Network] AJAX

AJAX

AJAX는 JavaScript, DOM, Fetch, XMLHttpRequest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법입니다.

AJAX는 웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 화면에 그려낼 수 있는 특징을 가지고 있습니다.

JS & DOM, Fetch

JavaScipt & Dom과 Fetch는 AJAX를 구성하는 가장 핵심적인 기술입니다.

Fetch를 사용하면, 페이지를 이동하지 않아도 서버로부터 필요한 데이터를 받아올 수 있습니다. 따라서, 서버에 요청을 보내고 응답을 받을 때까지 모든 동작을 멈추는 것이 아니라 계속해서 페이지를 사용할 수 있게 하는 비동기적인 방식을 사용합니다.

JavaScript에서 DOM을 사용해 조작할 수 있기 때문에, Fetch를 통해 전체 페이지가 아닌 필요한 데이터만 가져와 DOM에 적용시켜 새로운 페이지로 이동하지 않고 기존 페이지에서 필요한 부분만 변경할 수 있습니다.

AJAX의 장단점

AJAX의 장점으로는 다음과 같습니다.

• 서버에서 HTML을 완성하여 보내주지 않아도 웹페이지를 만들 수 있습니다. 이는 필요한 데이터를 비동기적으로 가져와 렌더링 할 수 있기 때문입니다.

• 표준화된, 범용성
  XHR이 표준화 되면서 브라우저에 상관없이 AJAX를 사용할 수 있습니다.

• 유저 중심 앱 개발
  필요한 부분만 비동기적인 렌더링으로 함으로 빠르고 더 많은 상호작용이 가능한 애플리케이션을 만들 수 있습니다.

• 더 작은 대역폭
  대역폭이란 통신 한번에 보내야하는 데이터의 크기인데, 완성된 HTML의 크기보다 필요한 데이터를 텍스트 형태로 보내기 때문에 비교적 데이터의 크기가 작습니다.

다음으로는 AJAX의 단점입니다.

• Search Engine Optimization(SEO)에 불리
  검색 엔진은 페이지의 모든 정보를 긁어와 보여주는데, 이때 AJAX 방식의 웹 앱은 데이터를 가져오지 않은 뼈대의 상태이기에 정보를 긁어오는데 어려움이있습니다.

• 뒤로가기 버튼
  AJAX에서는 이전 상태를 기억하지 않기 때문에 사용자가 의도한 대로 뒤로가기 버튼이 동작하지 않습니다. 따라서 뒤로가기 등의 기능을 구현하기 위해서는 별도로 History API를 사용해야 합니다.