SPA
일반 정적 웹페이지
- HTML 파일들로 페이지가 구성
url이 파일 경로 & 이름이 됨
url 상에 파일 명이 없을 경우 index.html 을 찾으려 시도 - 모든 게시물마다 html 을 만들어야 함
- 이러한 단점을 해결하기 위해 웹 애플리케이션이 등장
웹 애플리케이션
- 정적인 파일을 웹 서버로 제공하는 방식 뿐 아니라, PHP, JAVA, Node.js 등으로 동적 HTML 을 생성하여 제공하는 방식
- HTML 을 서버에서 만들어 내리고, 이후의 동작을 JS 에서 수행 ... 렌더링 시점이 꼬이는 문제가 생길 수 있음
또한, 유저 인터렉션 처리를 클라이언트 사이드에서 해야하는데 이 모든 처리를 서버에서 할 수 없음
SPA
- Single Page Application(SPA)
- 서버는 API 만 처리하고 모든 렌더링을 클라이언트에서 하는 방식
- 웹 애플리케이션에서는 요청에 따른 데이터만 내려주고(JSON 등...), 별도의 클라이언트 애플리케이션을 구성
- 클라이언트에서는 html 은 index.html 하나만 존재하고, 클러이언트로 오는 모든 url 요청을 index.html 로 돌림
이후 동작은 url 을 보고 어떤 페이지를 그릴지 동적으로 처리 - 페이지를 이동 할 때마다 모든 내용을 새로 그릴 필요 없이, SPA 에서는 렌더링만 동적으로 하기 때문에 첫 로딩 이후 네트워크 부담이 줄어드는 효과
hashbang
- url 맨 뒤에 # 을 이용해 처리하는 방식
- #: 같은 페이지 내의 요소를 가리킬 때 사용 ... 이 hash 를 통해 어떤 페이지를 렌더링할지 정하는 로직을 통해 구현하는 방식
ex).../or.../#listor.../#qna는 모두 같은 페이지(index.html) 을 가리킨다. - history api 등을 통해 더 효율적으로 관리할 수 있기 때문에 요즘에는 많이 사용되는 개념은 아님.
history API
- url 라우팅 처리
- 브라우저에서 페이지를 로딩하며느 세션 히스토리라는 것을 가짐.
세션 히스토리는 페이지를 이동할 때마다 쌓이며(pushState), 뒤로가기나 앞으로가기 등의 이동이 가능해 짐. - pushState, replaceState 의 두 개의 함수로 화면 이동 없이 현재 url을 업데이트
pushState: 세션 히스토리에 새 url 상태를 쌓음
replaceState: 세션 히스토리에 새 url 상태를 쌓지 않고, 현재 url 을 대체함
popstate: 세션 히스토리의 변경을 감지 (history go / back 을 실행했을 때 발생) /... HomePage
/list... ListPage
/detail/1... DetailPage
등으로 url 을 설정할 수 있다.- 일반 url 형식을 따르기 때문에 querystring 을 자유롭게 붙일 수 있음
ex)/list?page=2&limit=10 <a>태그를 그대로 사용할 수 없음 ... a 태그는 클릭 시 href 에 해당하는 링크로 이동하게 되는데, 페이지의 이동이 아닌 클릭했을때의 경로로 history api를 사용하고자 하기 때문
e.preventDefault();로 클릭시의 동작을 제어해준다.
history.pushState / history.replaceState
history.pushState(state, title, url) / history.replaceState(state, title, url)
- state: history.state 에서 꺼내쓸 수 있는 값 (사용하지 않을 경우 null 을 넣음)
- title: 변경될 페이지의 title 을 가리키는 값 ... 거의 대부분의 브라우저에서 지원하지 않음 (일반적으로 빈 string을 넣음)
- url: 세션 히스토리에 새로 넣을 url
a 태그를 클릭하거나 location.href 로 url 을 변경하는 것과는 다르게 이 url 이 변경된다고 화면이 리로드 되거나 하지 않음
회고
SPA 웹사이트를 직접 구현해보았다. 점점 익숙해지긴 하지만 아직 데이터의 이동을 조금 더 잘 다룰 수 있게 연습이 필요한 것 같다.
hashbang 의 개념은 대학 교양수업에서 잠깐 맛보기 했던 기억이 나서 한번 더 회고해 볼 수 있는 시간이 되었다.
오늘 배운 개념들을 잘 활용해서 TodoApp 이나 노션 클로닝을 보완해보도록 해야겠다.
프론트엔드