[Vue] vue-router에서 Hash Mode Vs History Mode 차이점은 무엇인가?

들어가기

최근 Vue 를 사용하게 되면서 Hash Mode와 History Mode에 대해서 의문점을 가지게 되었습니다. Vue.js에 router 관련된 설정을 추가하면서 다음과 같은 설정에 직면하게 되었습니다.

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
        ....
        }
    ]
 })

여기서 history와 hash를 String으로 작성하여 설정할 수 있습니다

그렇다면 이 둘의 차이점은 무엇일까?

대체 무슨 차이이지?

Hash mode

Hash mode는 모든 URL을 HASH(#) 형태로 서비스합니다. URL이 변경될 때 페이지가 다시 로드 되지 않습니다. 

History mode

페이지를 다시 로드하지 않고 URL을 탐색할 수 있습니다. SPA의 단일 페이지 클라이언트앱이기 때문에 사용자가 직접 http://example.ocm/user/id에 접속하면 404 오류가 발생합니다.

왜 History Mode에서는 404오류가 발생할까요?

정확하게는 404가 발생할 수도 있고, 발생하지 않을 수도 있다. 가 맞지만, 대부분의 Vue.js 사용하는 프로젝트에서 서버와의 통신을 어떻게 사용하냐에 따라 다를 것입니다.

History Mode 를 사용시, 개발자 도구를 통해 URL을 확인해보면 아래와 같습니다.

그림1 - mode를 history로 했을 경우

 

그림 1에서 보시는 것과 같이 URL에 작성된 것과 같은 이름으로 서버에 리소스를 요청합니다. 

그렇다면, 서버에서는 해당 URL 리소스가 있다면 반환하고 그렇지 않다라면 404 에러를 내리겠죠?

그럼, 여기서 Hash Mode는 어떻게 동작되는지 확인해볼까요?

그림2 - mode를 hash로 했을 경우

그림2 에서는 먼저 index.html 에 들어가 vue-router에서 해당되는 URL router가 있는지 확인한 뒤 반환합니다. 다시 말해, 브라우저는 URL이 변경됨을 인지했습니다. 그러나 실제로 클라이언트인 Vue에서는 서버 측으로 리퀘스트를 보내거나 하지는 않았습니다. 단지 앵커로 웹 페이지 내부에서의 이동을 위한 것입니다. 요청을 하지 않았기 때문에 갱신은 없으나, 페이지가 각각의 고유한 URL을 가지므로 히스토리(history)관리가 가능합니다.

같은 URL을 검색창에 쳤을 뿐인데 다르죠? 

이 둘의 차이점을 아주 조금 이해했다면, 이 둘을 어떻게 활용해야 되는걸까?

차이점은 알았는데... 그럼 적재적소를 어떻게 활용할 수 있지?

History 모드의 경우에는 해당 URL에 맞는 리소스를 서버로 요청하기 때문에 매번 HTML, Javascript, CSS를 중복되게 가져와야하는 퍼포먼스 측면에서 손해를 볼 수 있습니다.

반대로 Hash 모드에서는 SPA 로서 동작됨으로써, 클라이언트에서 서버로 데이터를 요청하는 것은 필요한 부분만 요청하게 될 것입니다.

또한, reddit 을 통해 이 둘의 대한 사람들의 의견을 확인해봤습니다.

URL 속에 '#' 들어가는 것은 URL이 ugly 하다는 의견이 있었고, 또한 관습적인 페이지 이동에 어긋난다는 말도 있습니다.

그 외

그림3 reddit의 의견

결론

사실 이 둘의 차이는 취향의 차이, 프로젝트의 차이일 수 있습니다. 또한 Backbone.js 와 같이 과거에서부터 history mode처럼 동작되어져 왔기 때문에 이것이 좋다. 저것이 좋다 라고 말할 수 없다고 생각합니다.

그러나, Vue.js 공식 가이드에서는 Default Mode 가 Hash 모드이고, 이를 History 모드로 변경시 설정해줘야 하는 부분이 추가됩니다. 그런 번거러운 작업이 필요할 만큼 History 모드가 필요하다면 사용해도 되지만, 자칫 잘못 사용하면 홈페이지를 이용하는 사용자에게 404 페이지를 보여주는 나쁜 결과를 초래할 수 있습니다.

 

 

[참고자료]

stackoverflow.com/questions/58422424/vue-js-both-history-and-hash-router

Vue.JS - Both 'history' and 'hash' router?

publisherkjh.tistory.com/113

HTML5 히스토리 모드(history mode) and 해시백 모드(hash mode)

okky.kr/article/831473

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

www.reddit.com/r/vuejs/comments/easxqz/hash_mode_vs_history_mode_why_do_i_care/

Hash mode vs history mode: Why do I care?

router.vuejs.org/kr/guide/essentials/history-mode.html#%EC%84%9C%EB%B2%84-%EC%84%A4%EC%A0%95-%EC%98%88%EC%A0%9C

HTML5 히스토리 모드 | Vue Router