SPA

SPA 를 만드는 기술 AJAX

웹 페이지에서 일부분만 바꾸고 싶다면 AJAX 를 사용합니다.

 

 

 

AJAX 란?

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

 

 

AJAX 의 특징

웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 화면에 그려낼 수 있음

 

예제1.

구글 페이지를 보면 알 수 있습니다.

1)  검색창에 한 글자를 입력

2) 입력할 때마다 해당 글자로 시작하는 단어들을 서버로부터 받아옴

3) 그 바로 아래에 추천 검색어로 보여줌

즉, 검색창에 필요한 데이터만 비동기적으로 받아와 렌더링 됩니다.

 

예제2.

원티드 채용 공고 페이지를 보면 알 수 있습니다.

1) 원티드 채용공고 목록 페이지를 밑으로 스크롤함

2) 맨 끝에 도달하면 새로운 채용 공고를 서버로 부터 가져와 렌더링함

이러한 이벤트를 무한 스크롤이라고 합니다.

무한 스크롤이 발생할 때마다 Fetch 를 통해 데이터를 가져와 업데이트할 수 있습니다.

 

예제3.

페이스북 메시지, 네이버 포탈사이트의 뉴스 탭 등

 

 

AJAX 의 두 가지 핵심 기술

1) 자바스크립트, DOM

2) Fetch

 

전통적인 웹 애플리케이션에서는 <form> 태그를 이용해 서버에 데이터를 전송했습니다.

그래서 클라이언트에서 요청을 보내면 매번 새로운 페이지로 이동했어야 했습니다.

 

그러나 Fetch 를 이용하면 페이지를 이동하지 않아도 서버로부터 필요한 데이터를 받아올 수 있습니다.

Fetch 는 사용자가 현재 페이지에서 작업을 하는 동안 서버와 통신할 수 있습니다.

 

즉 브라우저는 Fetch 가 서버에 요청을 보내고 읍다을 받을 때 까지 멈추는게 아니라, 계속 페이지를 사용할 수 있게

비동기적인 방식을 사용합니다.

 

또한 자바스크립트에서 DOM 을 사용해 조작할 수 있기 때문에 Fetch 를 통해 전체 페이지가 아닌 필요한 데이터만 가져와

DOM 에 적용시켜 새로운 페이지로 이동하지 않고 기존 페이지에서 필요한 부분만 변경할 수 있습니다.

 

[ XHR 과 Fetch ]

Fetch 이전에는 XHR ( XMLHttpRequest ) 를 사용했습니다.

Fetch 는 XHR 의 단점을 보안한 새로운 웹 API 이며, XML 보다 가볍고 자바 스크립트와 호환되는 JSON 을 사용합니다.

 

 

AJAX 장점

1) 서버에서 완성된 HTML 을 보내지 않아도 필요한 데이터를 비동기적으로 가져와 브라우저에서 화면의 일부만 업데이트하여 렌더링할 수      있습니다.

2) XHR 이 표준화 되면서부터 브라우저에 상관없이 AJAX 를 사용할 수 있게 되었습니다.

3) 완성된 HTML 이 아닌 필요한 데이터를 JSON, XML 등 텍스트 형태로 보내기 때문에 데이터 크기가 작습니다.

 

AJAX 단점

1) Search Engine Optimization ( SEO ) 에 불리합니다.

    AJAX 방식의 웹 애플리케이션의 HTML 파일은 뼈대만 있고 데이터는 없기 때문에 사이트의 정보를 긁어가기 어렵습니다.

2) AJAX 에서는 이전 상태를 기억하지 않기 때문에 뒤로가기 버튼을 누를 시 사용자가 의도하지 않은 대로 동작할 수 있습니다.

    그래서 뒤로가기 등의 기능을 구현하기 위해선 History API 를 사용해야 합니다.