요새 Learn하지 못했다는 죄책감 때문에 TIL을 잘 안쓰게 된다. 강의를 보다보면 그저 코드를 따라치고 에러찾는데만 집중하게 되고, 처음부터 코드를 다시 따라치면서 이해하려 해도 잘 이해가 가지 않는다. 과제도 그렇고 다른사람들은 척척 해내는 듯 한데, 나는 그저 '이런게 있구나' 하는 정도로만 학습하는 느낌이다. 다른 공부방법을 찾아봐야겠다😥
SPA(SIngle Page Application)
HTML을 서버에서 내려 받을 때, 서버가 HTML을 물리적으로 내려주는지, 어떤 로직을 통해 HTML뭉치(*웹애플리케이션)를 내려주는지 차이가 있는데, HTML을 서버에서 만들어 내려주고 동작을 JS를 통해 하다보니 렌더링 시점이 뒤죽박죽 되는 문제가 생겨 중복해서 렌더링이 필요한 경우가 생겼다.
때문에 UI생성 부분을 템플릿화해서 서버, 클라이언트에서 같이 쓸 수 있는 방안도 나오긴 했지만 환경에 따른 오류가 발생하기도 하고, 결국 유저 인터랙션은 클라이언트 사이드에서 하기 때문에 모든 처리를 서버에서 할 수가 없다.
이러한 문제점 때문에 나온 개념이 SPA.
*웹애플리케이션: 정적인 파일을 웹서버로 제공하는 방식 뿐 아니라 PHP, Java, Node.js 등을 이용해 동적으로 HTML을 생성해서 제공하는 방식.
SPA는 서버는 API만 처리하고, 모든 렌더링을 클라이언트에서 하는 방식으로, 웹애플리케이션에선 요청에 따른 데이터만 JSON 등으로 내려주고, 별도의 클라이언트 애플리케이션을 구성한다. 클라이언트의 html은 index.html 하나만 존재하며 모든 url요청을 index.html으로 돌리고, url을 보고 어떤 페이지를 그릴 지 동적으로 처리하며 동작한다.
페이지 이동시마다 모든 내용을 불러오던 이전 방식과 달리 렌더링만 다시 동적으로 하므로, 첫 로딩 이후에는 네트워크 부담이 줄어드는 효과가 있다.
hashbang
hashbang은 url 맨 뒤에 #을 이용해 처리하는 방식으로, http://localhose:5000/#list, http://localhose:5000/#qna 등은 모두 같은 페이지(index.html)를 불러오며 뒤에붙은 #은 loacation.hash를 통해 가져올 수 있다.
- window.addEventListener('hashchange', () => : hash가 바뀔때마다 실행되는 이벤트리스너
history API
url이 깔끔해지고 여러 요소를 사용할 수 있어서 hashbang보다 history api를 쓰는 추세이다.
브라우저의 세션히스토리는 페이지 뒤로가기, 앞으로가기 등을 가능하게 하는데 이를 이용한 방식이다.
- pushState: 세션히스토리에 새 url 상태를 쌓음
- replaceState: 세션 히스토리에 새 url상태를 쌓지 않고 현재 url을 대체(결제, 제출 등에서 뒤로가기 방지)
- popstate 이벤트는 history.go, history.back(히스토리 앞뒤이동)일때 발생
- *histroy api를 사용할땐 url요청을 했을때 경로에 파일이 없다면 index.html로 돌리는 설정이 필요하다.
history.pushState / hisroy.replaceState
- history.pushState(state, title, url)
- state: history.state에서 꺼내쓸 수 있는 값
- title: 변경될 페이지의 title을 가리키는 값 같지만, 대부분의 브라우저에서 지원하고 있지 않기 때문에 대부분 비어있는 string을 넣음
- url: 세션 히스토리에 새로 넣을 url. url이 변경되어도 화면이 리로드 되지 않음
