[vue.js] hash mode는 도대체 뭐지?

Vue로 프로젝트 작업을 하다보면 hash mode라는 것을 접하게 됩니다. 

 

 

여기서 단순하게 보면 

 

 

hash mode : url에 #이 붙음

history mode : url에 #이 없음

 

 

하지만, 대부분의 사람들은 #이 너무나도 보기에 거슬리기 때문에 history mode를 적용시킵니다.

 

 

아니 그럼 그래서 hash mode는 도대체  무엇을 위해 있는 걸까... 

 

 

vue 창시자도 심심해서 만들지는 않았을거고, 다 이유가 있었을텐데...

 

 

하지만, hash mode가 생겨난 이유에 대해서는 깊게 설명된게 없고, 공식 문서에서 조차도 크게 언급하지 않고 있습니다.  그렇게 잘 설명되어져있는 외국사이트를 발견...!!!

 

 

정리를 해보자면,

 

 

 

프론트엔드 개발의 목적은 백엔드에 어떠한 요청 없이 스스로 view를 전환하고 보여주는 것

 

 

근데 혼자 해결하려면 두가지 방식이 필요한데 그게 hash mode와 history mode인 부분....

 

 

그리고 우리의 Vue 친구는 SPA인데, SPA의 가장 자랑🧡이라고 한다면, 

 

 

1. 사용자가 페이지를 새로 고침을 누를 필요가 없음

2. 프론트와 백엔드 작업을 완벽하게 분리 시킬 수 있음

 

 

하지만 이 SPA 친구에게도 단점은 존재합니다. 

 

 

-1. 초기 로드 시간이 더 오래 걸림

-2. 사용자가 URL을 통해 백엔드에 HTTP 요청이 이루어지게 되거나 새로고침하면 404에러를 반환함💔 (아주 치명적인 단점이져...ㅎㅎ)

 

 

뭐 무튼 이러한 특징을 가진 Vue는 저 치명적인 단점을 보완하기 위해서 hash mode를 만든듯 합니다.

 

 

 

 

 

hash mode는 hashHistory라는 객체가 생성되어지고, 다른 경로를 방문하게 되면 두가지 일이 발생됩니다. 

 

 

1. HashHistory.push()가 브라우저의 방문 기록 스택 맨 위에 새 경로를 추가함

2. HashHistory.replace()가 현재 스택 맨 위에 있는 Route로 바꿈 

 

 

 

hash mode덕분에 다른 뷰로 잘 전환해주지만...url에 붙은 #은 정말 너무나도 거슬립니다..

 

 

하지만 그렇다고해서 history mode를 사용하게 된다면 백엔드에서 해당 url에 대한 라우팅 처리가 되어있지 않다면 404 에러를 반환하게 됩니다. 즉, 사용자가 url을 치고 이동하거나, 새로고침을 하게된다면 에러를 반환하기 때문에 관련하여 처리를 해주어야 합니다. 

 

 

이 부분은 스프링부트에서 에러 처리하는 방법을 아래 게시물에 작성해두었습니다. 👇

 

 

 

[vue.js] vue & springboot 404 에러

 

 

참고자료
https://blog.katastros.com/a?ID=01050-27227ec4-3a49-407d-b830-487e5861aaa3

 

 

그럼 20000😌