AJAX 란?
Asynchronous JavaScript And XMLHttpRequest 의 약자로, DOM, JS, Fetch, HTML 등의 기술을 사용하는 기법이다.- 이름에서 알 수 있듯,
비동기를 이용하며, 필요한 부분의 데이터만 비동기적으로 받아와 화면에 표시 할 수 있다.
JS DOM 과 Fetch 가 핵심적인 역할을 한다.Fetch 는 페이지를 이동하지 않고도 데이터를 받아올 수 있으며, 사용자가 현재 페이지에서 작업하는 동안 서버와 통신 할 수 있게 한다.- 이는
페이지에서의 작업과 Fetch 를 이용한 데이터 요청 및 응답이 비동기적으로 수행된다는 것을 이야기한다.
AJAX의 장점
- 기존에는 서버에서
HTML에 대한 로드가 완료되어야 렌더링 할 수 있었지만, AJAX 를 사용하면 필요한 데이터만 비동기적으로 가져와 화면의 일부만 업데이트 하여 렌더링이 가능하다.
→ HTML이 전부 로드되기 전에도 웹페이지를 표시 할 수 있다.
- 여러 브라우저에 표준화 되어있다.
- 일부분만 렌더링하기 때문에 속도가 빠르며, 더 많은 상호작용이 가능한 앱을 만들 수 있다.
→ UX 측면에서 유리
- 필요한 데이터를 텍스트 형태(JSON, XML)로 받기 때문에 작은 대역폭을 가진다.
AJAX의 단점
- 검색엔진 최적화(SEO)에 불리하다.
- AJAX 방식의 웹 앱은 비동기적으로 데이터를 받는 특성 때문에
HTML 파일에 데이터를 채우기 위한 틀만 잡혀있는 경우가 많다.
- 즉, 데이터가 없고 틀만 있기 때문에 검색엔진이 정보를 활용하기 어렵다.
AJAX 는 이전 상태를 기억하지 않는 특성을 가지기 때문에, 뒤로가기를 구현하기 위해서는 History API등을 활용해야 한다.
+
- 기존에는 XHR 을 사용했으나, 요즘은
Fetch를 더 많이 사용한다.
- AJAX 를 위한
Axios 라는 라이브러리도 있다고 한다.
- 정리하자면 fetch를 이용하여 비동기로 받은 데이터를 DOM을 이용하여 HTML로 전달하는 것.
.png)
