[TIL] 11_JS | Hashbang, History API

MJ Kim·2021년 8월 31일

TIL programmers 데브코스

TIL

목록 보기

11/12

💡새롭게 알게 된 것

1. Hashbang

url에 #을 이용해 처리하는 방식이다.
#은 같은 페이지 내의 요소를 가리킬 때 많이 사용되었다.

http://localhost:5000/
http://localhost:5000/#list
http://localhost:5000/#qna
등은 모두 같은 홈페이지 (index.html)을 불러오며, 뒤에 붙은 #은 location.hash를 통해 가져올 수 있다.

-> 해시뱅의 원리는 html의 네임 앵커를 이용한 것이다.

예시

<a href="/">Home</a>
<a href="/#About">About</a>
<a href="/#Contact">Contact</a>

// hashchange 이벤트와 hash를 추적해 렌더될 페이지를 선정한다.  

const { hash } = window.location
//...
window.addEventListener('hashchange', () => {
    //...
  }

최근에는 SPA에서 거의 쓰이지 않는다.

단점

url에서 오는 괴리감
검색엔진 크롤러가 hashbang을 이용한 SPA웹을 인식하기 어렵다.

그러한 이유로 요즘은 history API를 이용해 SPA를 구현한다.

2.history API

브라우저에서 페이지 로딩을 하면, 세션 히스토리라는 것을 갖는다.
세션 히스토리는 페이지를 이동할 때마다 쌓이게 되며, 이를 통해 뒤로가기 시 이전 페이지로 가거나 뒤로 간 이후 다시 앞으로 가는 등의 이동이 가능하다.
pushState, replaceState 두개의 함수로 화면 이동없이 현재 url을 업데이트 할 수 있다.

history.pushState(state, title[, url])

: 세션 히스토리에 새 url 상태를 쌓는다.

history.replaceState(state, title[, url])

: 세션 히스토리에 새 url 상태를 쌓지 않고, 현재 url을 대체한다.
(이전 페이지로 돌아가는 것 방지!)
- state : history.state에서 꺼내쓸 수 있는 값이다.
- title : 변경될 페이지의 title을 가리키는 값인것 같지만, 거의 대부분의 브라우저에서 지원X. 빈 string넣으면 된다.
- url : 세션 히스토리에 새로 넣을 url이다. a태그를 클릭하거나 location.href로 url을 변경하는 것과는 다르게, 이 url이 변경된다고 해서 화면이 리로드(새로고침) 되거나 하진 않는다.
다만, pushState()는 이전 URL과 신규 URL의 해시가 다르더라도 절대 hashchange 이벤트를 유발하지 않는다.
위와 같은 이유로, popstate()나 기타 이벤트를 이용해 pathname을 추적하게 된다.

예시

<a href="/" class="link">Home</a>
<a href="/About" class="link">About</a>
<a href="/Contact" class="link">Contact</a>

// link에서 발생하는 click 이벤트와 pathname를 추적해 렌더될 페이지를 선정한다. 

const { pathname } = location
//...
window.addEventListener('click', (event) => {
    if (event.target.className === 'link') {
      const href = e.target.getAttribute('href')
      history.pushState(null, null, href)

      event.preventDefault()
	//...
    }
  }