SPA란?
Single Page Application의 약어로, 한 개의 페이지로 이루어진 애플리케이션 이라는 의미이다.
전통적인 웹페이지는 여러 페이지로 구성이 되어 있다.
전통적인 웹페이지와 현재 웹 페이지
전통적인 웹 페이지(Multi Page Application)
- 다른 페이지로 이동하면, 새 html을 받아서 페이지 로딩 마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 출력
- a 페이지를 만들고싶으면 a.html, b페이지를 만들면 b.html로 각 페이지마다 html을 만들었다.
- 불필요한 로딩으로 인해서 비 효율적이다
현재의 웹 페이지(Single Page Application)
- 리액트 같은 라이브러리 혹은 프레임워크를 사용해서, 뷰 렌더링을 사용자의 브라우저가 담당하게 한다.
- 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현
- SPA의 경우 사용자에게 제공하는 페이지는 한 종류지만, 해당 페이지에서 로딩된 자바스크립트와 현재 사용자 브라우저의 주소 상태에 따라서 다양한 화면을 보여줄 수 있다.
SPA의 화면변경
SPA에서는 HTML의 History API를 사용해서 페이지 전환을 해준다.
History API가 제공하는 메서드
History.back(): 세션 기록의 바로 뒤 페이지로 이동하는 비동기 메서드. 브라우저의 뒤로 가기를 누르는 것과 같은 효과를 낸다.History.forward(): 세션 기록의 바로 앞 페이지로 이동하는 비동기 메서드. 브라우저의 앞으로 가기를 누르는 것과 같은 효과를 낸다.History.go(): 특정한 세션 기록으로 이동하게 해 주는 비동기 메서드. 1을 넣어 호출하면 바로 앞 페이지로, -1을 넣으면 바로뒤 페이지로 이동한다.History.pushState(): 주어진 데이터를 세션 기록 스택에 넣는다. 직렬화 가능한 모든 Javascript 객체를 저장하는 것이 가능하다.History.replaceState(): 최근 세션 기록 스택의 내용을 주어진 데이터로 교체한다.
참고
반응형