hash와 history

MPA multi-page application
(1) link tag(<a href="#">) 클릭
(2) href 속성attribute값인 리소스의 경로가 URL의 path에 추가
(3) 브라우저의 주소창에 path값 표시
(4) 해당 리소스를 서버에 요청
=> 클라이언트에서 1~4를 거쳐서 요청을 보내면 서버 측에서 완전한 리소스를 html형태로 응답한다.
또한 브라우저 측에서는 이 html을 받아서 렌더링한다. 
이전 페이지에서 새로 받아온 페이지로 전환하는 방식, 즉 전체 페이지를 다시 렌더링하는 방식
따라서 새로고침이 발생하고 히스토리가 남는다.(=뒤로가기 사용가능)
하지만, 매번 클라이언트의 요청에 새로 데이터를 받아와서 다시 렌더링 해야되므로 중복된 자원들에 대한 퍼포먼스 측면에서 손해가 있음

=> 이를 보완하기 위한 Ajax
전체 렌더링하는 것을 피하고자 자바스크립트 비동기 통신으로 업데이트가 필요한 부분만 로드하여 갱신한다.(JSON형태로 데이터 받아온다.)
이 때 Ajax는 URL을 변경 시키지 않으므로 브라우저의 히스토리 관리가 불가능하다.(=뒤로가기 사용불가) 이 외에도 SEO에 대한 이슈도 있다.

=> 이를 보완하기 위해 나온 클라이언트 라우팅 방식의 Hash
Hash 방식은 앵커를 사용하는 방식으로 <a href="#hash">등의 형태로 사용한다.
클릭 시 문서의 해당 값의 아이디를 가진 요소로 이동한다.
브라우저 측에서는 이를 URL이 바뀐 것으로 인식하지만 실제로 클라이언트가 서버로 요청을 보내지는 않는다.(=히스토리 관리 가능)
즉, 클라이언트가 요청을 보내지 않으므로 페이지 갱신이 없으나, 페이지의 각각의 고유한 URL#hash를 가지므로 히스토리 관리가 가능한 것 

 

https://okky.kr/article/831473

OKKY | [VUE] SPA 웹 프론트앤드 개발을 위한 정리