SPA 란? (History API)

SPA 란?

 

SPA는 Single Page Application의 약자이다. SPA의 대표적인 라이브러리/프레임워크에는 Backbone.js, React, Vue, Angular가 있다.

 

과거에는 클라이언트가 웹페이지를 요청할 때마다 서버로부터 리소스들과 데이터를 가져와 화면에 렌더링 하는 방식을 사용했다.

그러나 웹 사이트가 고도화됨에 따라, 한 페이지의 페이지 용량이 커지고, 매번 새로운 페이지를 전달하는게 점점 버거워지게 되었다. 그래서 어떤 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 SPA가 등장한다. 

SPA 방식은 브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식이다. SPA에서 라우팅은 서버로 페이지 전체를 요청하지 않고, HTML 5의 history api와 hash history를 이용하여 구현할 수 있다.

 

History API

History API로 주소를 인위적으로 바꾸고, history.state에 담아둔 정보로  ajax 요청을 보내 화면을 갱신하는 것으로 라우팅을 구현한다.

 

https://developer.mozilla.org/ko/docs/Web/API/History_API

History API - Web API | MDN

DOM의 Window 객체는 history 객체를 통해 브라우저의 세션 기록에 접근할 수 있는 방법을 제공한다.

 

history.back()

브라우저 도구 모음의 뒤로 가기 버튼을 누른 것과 같다.

window.history.back()

 

history.forward()

도구 모음의 앞으로 가기 버튼을 누른 것과 같다.

window.history.forward()

 

history.go(index)

index에는 페이지의 상대적 위치가 들어간다. 

-1은 window.history.back()과 동일하다.

window.history.go(-1)

 

1은 window.history.forward()와 동일하다.

window.history.go(1)

 

go의 또 다른 용도는 현재 페이지를 새로 고침 하는것이다.

// The following statements
// both have the effect of
// refreshing the page
window.history.go(0)
window.history.go()

 

window.history.length로 페이지에 쌓인 기록 스택의 페이지 수를 알 수 있다.

let numberOfEntries = window.history.length

 

history.pushState(state, title [, url])

history.pushState(state, title [, url])

지정된 제목(및 제공된 경우 URL)이 있는 세션 기록 스택에 지정된 데이터를 푸시한다. Safari를 제외한 모든 브라우저는 현재 title 매개변수를 무시한다.

 

history.replaceState(stateObj, title, [url])

 

history.replaceState(stateObj, title, [url])

지정된 데이터, 제목 및 URL(제공된 경우)을 갖도록 세션 기록 스택의 가장 최근 항목을 업데이트한다. Safari를 제외한 모든 브라우저는 현재 title 매개변수를 무시한다.

 

SPA의 단점

• 앱 규모가 커지면, 자바스크립트의 파일 규모가 거대해지는데 처음 로딩 때 전체 페이지를 불러와서, 첫 페이지가 로딩이 오래 걸릴 수 있다. (code splitting으로 해결 가능!)
• 크롤러가 페이지 정보를 수집하지 못해서, 페이지 검색이 힘들어질 수 있다.
• 자바스크립트로 인한 DOM 조작이 빈번하게 일어나 브라우저의 성능을 저하시킨다.

 

React, Vue, Angular

React, Vue, Angular 라이브러리/프레임워크의 목적은 모두 SPA를 쉽고 확장성 있게 구현하는 것을 목표로 둔다.  또한, SPA 단점 중 세 번째 단점인

• 자바스크립트로 인한 DOM 조작이 빈번하게 일어나 브라우저의 성능을 저하시킨다.

을 해결하기 위해Virtual DOM으로 SPA를 구현한다.