TIL 2022-11-13 Hash router

svelte를 사용하는 프로젝트에 svelte-spa-router를 사용하면서 Hash Router를 다시 사용하게 되었는데

 

도대체 왜 SPA에서 #를 쓰는지 알아보았음..

 

 

원래 Hash는 <a/> 요소와 함께 사용하여 동일 문서 내에 특정 위치로 이동할떄 사용했음.

 

요런 느낌으루다가

https://developer.mozilla.org/en-US/docs/Web/API/URL/hash#browser_compatibility

 

 

일단적인 웹사이트의 동작을 보자면

 

somewebsite.com/blogs/123 입력

브라우저가 서버로 해당 요청을 보냄

somewebsite.com 서버로 이동

somewebsite.com 서버에서 해당 HTML을 리턴함

 

 

그러나 SPA에서는 그렇게 되지 않음. SPA 자체가 하나의 자바스크립트 번들 뭉탱이기 떄문

 

그래서 해쉬를 이용하여 라우팅을 하는거임

 

 

 

somewebsite.com/#/blogs/123 입력

브라우저가 # 뒷 부분을 저장하고 somewebsite.com으로 요청 보냄

somewebsite.com 서버로 이동

somewebsite.com 서버에서 자바스크립트 번들 링크가 든 html 파일을 보냄

브라우저가 자바스크립트 실행시키고 자바스크립트 번들에서 해쉬 정보를 가지고 라우팅을 함.

여기서 다른 페이지로 이동한다면 hashChange를 통해 감지함.

 

여담으로 # 뒤의 내용을 Fragment identifier라고 함.

 

svelte-spa-router 도 여기에 hashChange를 통해 페이지 이동을 감지하고 있음. 뭐 해쉬를 사용하는 SPA 라이브러리가 다 그렇겠지만..

https://github.com/ItalyPaleAle/svelte-spa-router/blob/86c99fe7ab4a2810fb5e918c06bfe8df6cade1b9/Router.svelte#L55

 

 

 

HTML5의 History API를 사용하여 SPA를 구현하는 경우도 있음.

 

이 경우에는 당연히 #가 안들어가기 떄문에 훨씬 보기 이쁘지만, 큰 문제는 app.com/abcd 등 어떤 path로 들어오든, 동일하게 자바스크립트 번들을 내려주도록 처리가 별도로 필요함.