SPA에서 어떻게 페이지의 이동이 이루어질까? (hash mode, history mode)

카테고리 없음

곽빵 2022. 4. 9. 15:44

vue router의 hash mode와 history mode에 대해 공부하는데 애초에 어떻게 페이지의 로드없이 페이지의 이동이 이루어지는가에 대해 궁금해져서 작성하는 글

이하의 이미지를 보면 uri에 /#/ 이라는 특별한 친구가 들어가는데 #의 이후의 변경에 대해서는 웹서버에서는 인식못한다.

왜냐하면 request URL로써는 #을 포함해 # 이후의 부분들은 생략되어 요청이 날라가기 때문이다.

요청이 날라가는건 최초에 한번 or 직접접속 or 새로고침 이고 이후에 #의 뒷부분들의 바뀌어도 HTTP Request가 발생안한다.

HTTP Request가 발생하지 않으므로 페이지의 로드없이 URL이 바뀐다.

Window: hashchange event - Web APIs | MDN

The hashchange event is fired when the fragment identifier of the URL has changed (the part of the URL beginning with and following the # symbol).

developer.mozilla.org

URL에서 #은 hash라고 불리어지며 그 해쉬가 변경되는걸 감지해주는 web api가 있다.

위의 기능을 이용해 해쉬가 변경되는걸 vue-router는 감지해서 새로운 페이지로 페이지의 갱신없이 랜더링하는게 가능한 것이다.

history mode로 바꾸면 url이 우리가 평소에 보던 url처럼 /#가 제거되서 이쁘게 나온다.

물론 이렇게 되면 웹서버에서는 url이 바뀌는걸로 감지해 request가 날라가 페이지의 로드가 이루어 지는걸로 생각되는데

실제로 vue의 history mode로 바꾸어도 request가 날라가지 않는다는걸 볼 수 있다.

공식문서의 글을 보면

pushState라는 History API를 이용해 브라우저의 상단의 URL을 바꾸면서 내부적으로는 request를 날리지 않고

페이지의 이동을 하는 그런 흐름으로 이루어지는것 같다.

추가로 히스트리 모드를 사용할 때 주의점이라고 적혀있는 부분인데

#을 제거한 정상적인 URL로 브라우저 상단의 URL창에서 직접 입력해 이동하는 방식(직접 접속)으로 하면

웹서버에 존재하는 route는 / => index.html 밖에 없는데 그 이외의 route의 접근으로 404가 발생할 수 있다는 말이다.

그러므로 모든 요청을 루트요청으로 우회시키면 그 이후, / 이하의 부분들은 클라이언트(브라우저)에서 처리를 하는 방식으로 하면된다.

제일 위의 이미지를 보면 #이후의 부분들은 전부 생략해서 request가 보내지는걸 확인할 수 있다.

그 의미는 따로 우회 셋팅을 안해도 자동으로 다 루트요청으로 날라간다는것이다.

여담으로 vue를 쓰는 사람들이 히스토리 모드로 하는 이유는 #이 붙은 이 못생긴 URL이 SEO에 나쁜 영향을 미친다는 것 때문이다.