다른 말로는 2티어 아키텍처라고 한다.
리소스에 접근하려는 앱은 마치 손님과 같아서
리소스를 가지고 점원에게 물품을 요청한다.
점원은 요청에 따라 리소스를 담아 응답한다.
2티어 아키텍처에서는 이렇게 요청과 응답을 주고 받는 관계이며
요청하지 않았는데 응답이 오는 경우는 없다.
사실 서버는 보통 리소스를 전달해주는 역활만 할 뿐
리소스를 저장하는 공간을 따로 두는 것이 보통이다.
이런 리소스를 저장하는 공간을 데이터 베이스라고 부르며
이런 구조를 3티어 아키텍처라고 한다.
과거 웹 페이지의 로그인 과정을 먼저 살펴보면
<form>
태그를 이용해 사용자 정보를 입력하고
서버에 요청을 보내면 페이지 전체를 새로 로딩했었다.
후에 Dynamic Web Page(다이나믹 웹 페이지)가 등장하면서
서버와 자유롭게 통신하며 페이지 전환없이 seamless하게 작동하는
단순 웹 페이지가 아닌 웹 어플리케이션이 등장했다
페이지 전환 없이 작동하는 과정에서 JavaScript와 DOM이 이용되었고
서버와 자유롭게 통신하기위해 XMLHttpRequest(XHR)이 등장하였다.
AJAX는 이 두가지가 합쳐진 것으로
Asynchronous JavaScript and XML의 약자이다.
초기에는 서버와 통신하기 위해 XHR을 주로 이용했지만
현제에는 fetchAPI를 이용해 서버와 통신하고있다.
다만 XHR역시 여전히 사용되기도 하며
fetchAPI와 XHR의 차이점을 알아두는것이 필요하다.
fetchAPI
문서에서 사용할 수 있는 내장 메소드가 없다.
(missing a builtin method to consume documents)
아직 시간 제한을 설정할 방법이 없다.
(no way to set a timeout yet)
콘텐츠 유형 응답 헤더를 재정의할 수 없다.
(can't override the content-type response header)
요청이 완료된 경우에도 신호를 호출한다.
(will call the signal's abort handler even if the request has been completed)
XHR
반드시 쿠키를 보내야 한다.
(there's no way to not send cookies)
FormData
인스턴스를 반환할 수 없다.
(can't return FormData instances)
fetch
의 no-cors
와 같은 기능이 없다.
(doesn't have an equivalent to fetch's no-cors mode)
항상 리디렉션을 따른다.
(always follow redirects)