⚡ 가볍게 보고 넘어가는 SPA의 역사
📌 MPA (Multi Page Application)
MPA 동작 방식
⭐ 사용자가 브라우저를 통해 특정 페이지를 요청하고 서버는 요청을 받아 데이터를 뷰에 끼워넣은 후 HTML String을 만들어낸다. 그 후 브라우저로 HTML을 반환하면 렌더링 하는 방식이다.
- 이 당시에는 JavaScript의 역할이 크지 않았다.
- 그러나 점점 애니메이션이나 동적인 데이터 전송 등 MPA로는 불편한 요구사항이 마구 늘어났다.
📌 SPA (Single Page Application)
⭐ Ajax (Asynchrounous JavaScript and XML)
-
표준이 아니라는 이유로 안쓰이다가 구글이 적극적으로 차용하기 시작
-
페이지 이동 없이 통신이 가능한 구글 지도 등에 적용
-
페이지 이동 없이 페이지 전환이 가능하지 않을까라는 발상의 시작
⭐ Hashbang
- URI를 변경하면 페이지 변경이 발생한다.
- 그래서 주소 데이터를 보관하기 위해 URI Fragment를 이용한 기법이 Hashbang이다.
ex) 목차 선택 시 해당 지점까지 스크롤 이동
❗ 그러나 Hashbang은 검색 엔진에 잡히지 않는다는 큰 문제가 있었다...
⭐ HTML5 History API
- pushState(), replaceState()와 같은 기능이 생기면서 페이지 이동 없이 브라우저의 주소를 변경할 수 있게 되었다.
- Hashbang이 몰락하고 SPA의 새 시대가 열렸다.
⭐ pjax
- pushState + ajax = pjax
- Hashbang 단점을 모두 보완하였다.
- Github Co-founder가 만든 라이브러리인 jquery-pjax를 통해 pjax를 아주 쉽게 적용할 수 있게 만들었다.
- pjax의 등장으로 MPA와 1:1 대응이 가능해졌다.
- 첫 페이지 접속은 서버에서 내려주는 HTML을 렌더링, 이후에는 ajax로 HTML을 불러와서 교체
- 이는 Server Side Rendering의 시작이었다.
⭐ 그 이후
Angular.js, Vue.js, React.js의 등장으로 SPA를 쉽게 개발할 수 있도록 지원하였다.
이는 jquery가 몰락하는 원인이 되었다.
이 역사들은 내가 react-router를 배워야하는 이유가 되어주는 것 같다...
Hodie mihi, Cras tibi