sap(single page application)
sap가 무엇인지를 알려면 기본적으로 웹이 어떻게 동작하는지를 알아야
이해하기 좋습니다.
일반적인 정적인 웹페이지
- html파일들로 페이지가 구성
- url이 파일 경로와 이름이 됨
- url 상 파일명이 없을경우 index.html을 찾으려고함
웹 애플리케이션
정적인 파일을 웹 서버로 제공하는 방식뿐만 아니라
php,java,node.js등을 이용해 동적으로 html을 생성해서 제공하는 방식입니다
-
html을 서버에서 만들어서 내려주고, html뭉치를 그리고, html뭉치내에서 스크립트를 로딩하는것이 잇을거고 그 스크립트를통해 클라이언트한테 로딩하고 js를 통해서 인터렙션을 부여하는 방식!
-
그러다 보니 서버 렌더링 시점에서 구현했던 것을 클라이언트에서 동적으로 렌더링 해야한다면 주옥해서 구현이 필요하기도 했습니다.
-
ui를 생성하는 부분을 템플릿화해서 서버, 클라이언트에서 같이 쓸 수 있는 방안도 나오긴 했지만 환경에 따라 동작이 100%일치 하지 않는 문제가 발생하기도 했고, 궁극적으로 유저 인터랙션처리를 클라이언트 사이드에서!!! 해야 하기 떄문에 모든처리를 서버에서 할 수 없습니다.
그걸위해 single page application 방식을 씁니다
이러한 흐름속에서 서버는 api만 처리하고 아예 모든 렌더링을 클라이언트에서 하는 방식이 대두되게 됩니다.
이 경우 웹 애플리케이션에서 요청에 다른 데이터만 json등으로 내려주고, 별도의 클라리언트 애플리케이션을 구성합니다
클라이언트에선 html 파일은 index.html하나면 존재하며 클라이언트로 오는 모든 url요청을 index.html로 돌립니다
이후 동작은 url을 보고 어떤 페이지를 그릴지 동적으로 처리합니다.
이전 방식에서는 페이지를 이동할 때 마다 페이지의 모든내용을 새로 불러왔어야 했는데, spa 내에선 렌더링만 다시 동적으로 하므로 처음 로딩 이후엔 네트워크 부담이 줄어드는 효과가 있습니다.
hashbang
url 맨 뒤에 #을 이용해 처리하는 방식
#은 같은 페이지 내의 요소를 가리킬 때많이 사용되었습니다.
http://localhost:5000/
http://localhost:5000/#list
http://localhost:5000/#qna
등은 모두 같은 페이지(index.html)를 불러오며, 뒤에 붙은 #은
location.hash를 통해 가져올 수 있습니다
이 hash를 통해 어떤 페이지를 렌더링 할 지를 정하는 로직을 구현해서 쓰는 방식입니다.
history api
브라우저에서 페이지 로딩을 하면 세션 히스토리라는 것을 갖습니다
세션 히스토리는 페이지를 이동할 때마다 쌓이게 되며, 이를 통해
뒤로가기 시 이전 페이지로 가거나 뒤로 간 이후 다시 앞으로 가는 등의 이동이 가능합니다
pushState, replaceState 두 개의 함수로 화면 이동 없이 현재 url을 업데이트 할 수 있습니다
pushState:세션 히스토리에 새 url 상태를 쌓습니다
replaceState: 세션 히스토리에 새 url 상태를 쌓지 않고, 현재 url을 대체합니다.
hashbang의 hashchange 이벤트처럼 popstate 이벤트로 세션 히스토리의 변경을 감지할 수 있다
historyState(state,title,url)
history.state 에서 꺼내쓸 수 있는 값입니다.
title:변경될 페이지의 title을 가리키는 값인 것 같지만 거의 대부분의 브라우저에서 지원하지 않습니다. 빈 string을 넣으면 됩니다.
url 세션 히스토리에 새로 넣을 url입니다
a태그를 클릭하거나 location.href로 url을 변경하는 것과는 다르게 이url이 변경된다고 해서 화면이 리로드 되거나 그러진 않습니다.
history.replaceState(state,tile,url)
state랑 동작은 똑같고,
이전페이지로 돌아가는것을 방지하는 효과가 있습니다.
