SPA(Single Page Application) 이란? SPA 정리

이 글은 

출처 : https://www.huskyhoochu.com/what-is-spa/

SPA(Single Page Application) 이란?

SPA관련 해당 포스팅을 그대로 옮겨적은 것이며 제가 이해한 것을 기술한 것입니다.

 

 

SPA 이전

옛날 기준의 웹사이트는 페이지 하나가 서버에 전달되는 파일의 용량이 적었다. 그래서 버튼이나 페이지를 이동하는 버튼을 누를때 완전히 새로운 페이지를 서버에 전송했다. 그러나 현대에 이르러 웹사이트가 고도화되고 한 페이지에 나타내는 정보의 양은 커졌다. 버튼 하나를 눌렀을 때 페이지를 새로 불러오는 것이 비효율적인 페이지가 점차 늘어났다.

---

SPA란?

이런 문제를 해결하기 위해 등장한 것이 SPA(Single Page Application) 이다. 문자 그대로 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것이 SPA이다. 어떤 버튼을 클릭하거나 스크롤하면, 페이지에서는 여러 요소들이 변경된다. SPA는 이런 요소들이 변경되고 페이지가 변경되는 것이 서버를 호출하는 것이 아닌, 최초 로드된 자바스크립트를 통해 미리 브라우저에 올라간 템플릿만 교체되는 것이다.

반응형

---

SPA 라우팅이란?

SPA가 기존의 사이트와 마찬가지로 브라우징(인터넷에 들어가 필요한 정보를 찾아내는 일)을 하는 방법은 HTML 5의 history api를 이용하기 때문이다. history api는 서버로 요청을 전달하지 않고 자바스크립트 영역에서 해당 api를 통해 현재 페이지 내에서 화면 이동이 일어난 것 처럼 작동하게 한다.

History.back(): 세션 기록의 바로 뒤 페이지로 이동하는 비동기 메서드. 브라우저의 뒤로 가기를 누르는 것과 같은 효과를 낸다. History.forward(): 세션 기록의 바로 앞 페이지로 이동하는 비동기 메서드. 브라우저의 앞으로 가기를 누르는 것과 같은 효과를 낸다. History.go(): 특정한 세션 기록으로 이동하게 해 주는 비동기 메서드. 1을 넣어 호출하면 바로 앞 페이지로, -1을 넣어 호출하면 바로 뒤 페이지로 이동한다. History.pushState(): 주어진 데이터를 세션 기록 스택에 넣는다. 직렬화 가능한 모든 JavaScript 객체를 저장하는 것이 가능하다. History.replaceState(): 최근 세션 기록 스택의 내용을 주어진 데이터로 교체한다. 출처 : https://www.huskyhoochu.com/what-is-spa/

SPA는 서버로 페이지 전체를 요청하는 것이 아닌 history.state에 담아둔 정보로 ajax 요청을 보내 화면을 갱신한다.

---

SPA 프레임워크

SPA 프레임워크로는 Angular, React, Vue가 있다. 이들은 모두 SPA를 쉽게 구축하는 것을 용이하게 한다. 특히 이들은 Virtual DOM 이라는 개념을 사용해 SPA를 구현한다. SPA의 문제점은 자바스크립트로 인한 DOM 조작이 빈번하게 일어나 브라우저의 성능을 저하시킨다는 것이다. Virtual DOM을 사용하는 프레임워크들은 실제 DOM 트리를 흉내 낸 가상의 객체 트리로 html 정보를 저장하고 있다가, 이 트리에 변경이 발생하면 모든 변화를 모아 단 한번 브라우저를 호출해 화면을 갱신하는 방법을 사용한다. 이렇게 하면 브라우저와의 불필요한 상호작용을 최소화하면서 인터렉티브한 웹 사이트를 만드는 것이 가능하다.

---

사족..

요즘 많은 기업에서 (특히 프론트) SPA를 우대자격으로 채용 공고하는 기업을 심심치 않게 보고있다. 특히 자사 서비스가 확실하고 B2C 모델로 UI, UX에 신경을 쓰는 기업일수록 SPA에 대한 이해도는 필수불가결이다. 단순 SPA 이해뿐만아니라 SPA의 프레임워크인 Angular, React, Vue 등의 기술 스펙 요구도 많이 늘어나는 추세이다. 좋은 곳으로 취업하기 위해 해당 기술스펙을 공부하는 것이 필요해보인다...