SPA 란?
단일 페이지 어플리케이션은 서버로부터 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 변화시킴으로써 사용자의 요청에 따라 전체 페이지를 다시 렌더링하는 새로고침이 일어나지 않고 변경되는 부분만을 갱신하여 모바일 앱과 유사한 사용자 경험을 제공할 수 있다.
SPA는 기본적으로 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 접근시 단 한번만 다운로드한다. 이후 새로운 페이지 요청 시, 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신하므로 전체적인 트래픽을 감소시킬 수 있다.
라우팅(Routing)
라우팅이란 출발지에서 목적지까지의 경로를 결정하는 기능이다. 애플리케이션의 라우팅은 사용자가 태스크를 수행하기 위해 어떤 화면(view)에서 다른 화면으로 화면을 전환하는 내비게이션을 관리하기 위한 기능을 의미한다. 일반적으로 라우팅은 사용자가 요청한 URL 또는 이벤트를 해석하고 새로운 페이지로 전환하기 위해 필요한 데이터를 서버에 요청하고 페이지를 전환하는 위한 일련의 행위를 말한다.
SPA 프레임워크가 나오기 전 SPA의 전통적인 웹사이트는 Routing을 HTML 5의 history API를 활용하여 구현하였다. 요청을 바로 전달하지 않고 자바스크립트 영역에서 history api를 통해 현재 페이지 내에서 화면 이동이 일어난 것처럼 작동하게 하는 것이다.
- History.back() : 세션 기록의 바로 뒤 페이지로 이동하는 비동기 메서드. 브라우저의 뒤로 가기를 누르는 것과 같은 효과를 낸다.
- History.forward(): 세션 기록의 바로 앞 페이지로 이동하는 비동기 메서드. 브라우저의 앞으로 가기를 누르는 것과 같은 효과를 낸다.
- History.go(): 특정한 세션 기록으로 이동하게 해 주는 비동기 메서드. 1을 넣어 호출하면 바로 앞 페이지로, -1을 넣어 호출하면 바로 뒤 페이지로 이동한다.
- History.pushState(): 주어진 데이터를 세션 기록 스택에 넣는다. 직렬화 가능한 모든 JavaScript 객체를 저장하는 것이 가능하다.
- History.replaceState(): 최근 세션 기록 스택의 내용을 주어진 데이터로 교체한다.
api를 이용해 주소를 인위적으로 바꾸고, 서버로 페이지 전체를 요청하는 게 아니라 history.state에 담아둔 정보로 ajax 요청을 보내 화면을 갱신하는 것이다.
SPA 프레임워크의 역할
SPA 프레임워크로 유명한 Angular, React, Vue는 세부적인 구현 개념은 다르겠지만 그 목적은 모두 SPA를 쉽고 확장성 있게 구현하는 것을 목표로 하고 있다. 이들은 Virtual DOM이라는 개념을 사용해 SPA를 구현한다. SPA의 문제점은 자바스크립트로 인한 DOM 조작이 빈번하게 일어나 브라우저의 성능을 저하시킨다는 것이다. Virtual DOM을 사용하는 프레임워크들은 실제 DOM 트리를 흉내 낸 가상의 객체 트리로 html 정보를 저장하고 있다가, 이 트리에 변경이 발생하면 모든 변화를 모아 단 한번 브라우저를 호출해 화면을 갱신하는 방법을 사용한다. 이렇게 하면 브라우저와의 불필요한 상호작용을 최소화하면서 인터렉티브한 웹 사이트를 만드는 것이 가능하다.
출처:
https://www.huskyhoochu.com/what-is-spa/
https://poiemaweb.com/js-spa
https://m.blog.naver.com/dktmrorl/222085340333
