SPA
일반적인 정적인 웹페이지
- HTML 파일들로 페이지가 구성
- url이 파일 경로와 이름이 됨
- url상 파일명이 없을 경우 index.html을 찾으려함
SPA가 나오게 된 배경
- 정적인 파일을 웹 서버로 제공하는 방식뿐만 아니라 PHP, Java, Node.js등 을 이용해 동적으로 HTML을 생성해서 제공하는 방식
- HTML을 서버에서 만들어 내려주고, 이후 동작을 JS를 통해 하다보니 렌더링 시점이 뒤죽박죽이 되는 문제가 발생하게 된다.
- 그러다보니 서버 렌더링 시점에서 구현했던 것을 클라이언트에서 동적으로 렌더링 해야된다면 중복해서 구현이 필요하기도 했다.
- UI를 생성하는 부분을 템플릿화해서 서버, 클라이언트에서 같이 쓸 수 있는 방안도 나오긴했지만 환경에 따라 동작이 100% 일치하지 않는 문제가 발생하기도 했고, 궁극적으로 유저 인터렉션 처리를 클라이언트 사이드에서 해야하기 때문에 모든 처리를 서버에서 할 수가 없다.
SPA
- 이러한 흐름 속에서, 서버는 API만 처리하고 아예 모든 렌더링을 클라이언트에서 하는 방식이 대두되게 된다.
- 이 경우 웹 애플리케이션에선 요청에 따른 데이터만 JSON등으로 내려주고, 별도의 클라이언트 애플리케이션을 구성한다.
- 클라이언트에선 html 파일은 index.html 하나만 존재하며 클라이언트로 오는 모든 url 요청을 index.html로 돌린다.
- 이후 동작은 url을 보고 어떤 페이지를 그릴지 동적으로 처리한다.
- 이전 방식에는 페이지를 이동할 때마다 페이지의 모든 내용을 새로 불러와야 했지만 SPA내에선 렌더링만 다시 동적으로 하므로 처음 로딩 이후엔 네트워크 부담이 줄어드는 효과가 있다.
hashbang
- url맨 뒤에 #을 이용해 처리하는 방식
- #은 같은 페이지 내의 요소를 가리킬 때 많이 사용됐다.
http://locallhost:5000/
http://locallhost:5000/#list
http://locallhost:5000/#qna
- 등 모두 같은 페이지를 불러오며, 뒤에 #은
loaction.hash를 통해 가져올 수 있다. - 이 hash를 통해 어떤 페이지를 렌더링할지를 정하는 로직을 구현해서 쓰는 방식
history API
- 브라우저에서 페이지 로딩을 하면, 세션 히스토리를 갖는다.
- 세션 히스토리는 페이지를 이동할 때마다 쌓이게 되며, 이를 통해 뒤로가기 시 이전 페이지로 가거나 뒤로 간 이후 다시 앞으로 가는 등의 이동이 가능하다.
- pushState, replaceState 두 개의 함수로 화면 이동 없이 현재 url을 업데이트 할 수 있다.
- pushState: 세션 히스토리에 새 url 상태를 쌓는다.
- replaceState: 세션 히스토리에 새 url 상태를 쌓지 않고, 현재 url을 대체한다.
- hashbang의 hashchange 이벤트 처럼 popstate이벤트로 세션 히스토리의 변경을 감지하며,
hashchange와 유사하지만 popstate는 hashchange이벤트를 감지하지는 않는다(MDN) - popstate는 history.go or back일 때 일어난다.
hashbang으로 했던 url을 바꿔줄 수 있다.
/ → HomePage
/list → ListPage
/detail/1 → DetailPage
- 일반 url형식을 따르기 때문에 querystring도
자유롭게 붙일수 있다. 그래서 현재는 hashbang보다 많이 사용함
history.pushState
- history.pushState(state, title, url)
- state: history.state에서 꺼내쓸 수 있는 값(ex detail-1에서 1을 꺼내쓰기 가능)
- title: 변경될 페이지의 title을 가리키는 값인 것 같지만 거의 대부분의 브라우저에서 지원하지 않으며 빈 string을 넣으면 된다.
- url: 세션 히스토리에 새로 넣을 url이며, a태그를 클릭하거나 location.href로 url을 변경하는 것과는 다르게 이 url이 변경된다고 해서 화면이 리로드 되지 않음
🚑깨달은 점
리액트를 배울 때 React.link가 어떻게 동작하는지 모르고 그냥 썼었다. 그때 loaction, history 이런 개념이 나왔었는데 내장 메서드쯤 되겠지 하고 넘어갔던 적이 있었다. 이번 수업을 통해 history를 전체를 익숙하게 사용하고 설명하지는 못해도 내가 프로젝트를 구현을 하다가 history라는 keyword를 통해 해결해 갈 수 있다는 확신을 가지게 됐다. 😁