[네트워크] SPA(Single Page Application) : AJAX

렌더링이란!? 서버로부터 HTML 파일을 받아 실시간으로 브라우저에 제공하고 그려지는 과정

 

AJAX란?

웹 페이지에서 일부분을 유저의 요구에 따라 반응하며 변화하는 부분에 AJAX를 사용된다.

• 검색창에 단어를 입력할 때마다 추천 검색어가 바뀌는 것 (필요한 데이터를 비동기적으로 받아와 렌더링)
• 홈페이지 스크롤을 내리면 새로운 파일이 업데이트 되는데, 미리 저장된 것이 아닌 스크롤이 움직임에 따라 즉각적으로 Fetch를 통해 데이터를 가져와 업데이트하고 렌더링 한 것

 

AJAX의 핵심 기술 2가지

• JavaScript & DOM
• Fetch

전통적인 웹 애플리케이션에서는 <form> 태그를 이용해 서버에 데이터를 전송해야 했다. 또한 서버는 요청에 대한 응답으로 새로운 웹 페이지를 제공했는데, 이때 클라이언트에서 요청을 보내면 매번 새로운 페이지로 이동해야 했다. 

그러나 Fetch를 사용하면 매번 새로운 페이지로 이동하지 않고 데이터를 받아오는 것이 가능하다. 즉, 브라우저는 Fetch가 서버에 요청을 보내고 응답을 받을 때까지 계속 페이지를 사용하는 비동기적인 방식을 사용한다. 

자바 스크립트에서 DOM을 사용해 조작할 수 있기 때문에, Fetch를 통해 전체 페이지가 아닌 필요한 데이터만 가져와 DOM에 적용시켜 기존 페이지에서 필요한 부분만 변경할 수 있다.

 

XHR과 Fetch

Fetch 이전에는 XHR(XMLHttpRequest)를 사용했는데, Fetch는 XHR의 단점을 보완한 새로운 Web API이며, XML보다 가볍고 JavaScript와 호환되는 JSON을 사용한다. 따라서 대세는 Fetch다!

 

AJAX의 장점과 단점

• 완성된 HTML을 보내주지 않아도 필요한 데이터를 비동기적으로 가져와 브라우저에서 일부만 업데이트하여 렌더링 할 수 있다. 
• XHR이 표준화 되면서 브라우저 상관없이 AJAX를 사용할 수 있게 되었다. 
• 유저 중심 애플리케이션 개발 AJAX를 사용하면 일부분만 렌더링 하기 때문에 빠르고 더 많은 상호작용이 가능한 애플리케이션을 만들 수 있다. 
• 완성된 HTML는 데이터 크기가 컸으나, AJAX는 필요한 데이터만 텍스트 형태(JSON, XML 등)로 보내면 돼서 비교적 데이터 크기가 작다. 

---

• Search Engine Optimization (SEO)에 불리하다. 왜냐하면 AJAX의 경우 웹 애플리케이션의 HTML 파일은 뼈대만 있고 데이터가 없기 때문에 사이트의 정보를 긁어가기 어렵다. 
• 뒤로 가기가 불가능하다. AJAX는 이전 상태를 기억하지 않기 때문에 작동하지 않는다. / 원하면 HISTORY API 필요!