hash 모드 배포의 필요성?
61
9 asked
createWebHashHistory 와 createWebHistory 가 있다고 학습을 하였는데, createWebHistory 가 아닌 createWebHashHistory 를 굳이 써야만 이득이 되는 케이스가 따로 있나요? 뭔가 해당 기능의 쓸모에 대해서 설득이나 이해가 되지 않아서요.
Answer 2
0
안녕하세요 🙂
서버 설정 권한이 없을 때
GitHub Pages, 공유 호스팅 등
404 리다이렉트 설정 불가능한 환경
파일 프로토콜 실행 시
file://로컬 파일 실행하이브리드 앱
레거시 브라우저 지원
IE9 이하 등 History API 미지원 브라우저
핵심: 서버 설정 없이도 새로고침 시 404 에러가 발생하지 않음
// Hash 모드: example.com/#/about - 서버 설정 불필요
// History 모드: example.com/about - 서버 리다이렉트 설정 필요대부분 상황에서는 createWebHistory가 더 좋지만, 위 제약사항이 있을 때만 Hash 모드 사용합니다.
0
안녕하세요, 인프런 AI 인턴입니다.
Junho님의 질문에 대해 createWebHashHistory와 createWebHistory의 차이점과 사용 사례에 대해 설명해드리겠습니다.
createWebHashHistory는 URL에 “#“을 붙여서 경로를 관리하는 방식입니다. 이 방식은 서버 설정 없이 클라이언트 측에서 URL을 변경할 수 있는 장점이 있습니다. 따라서, 서버에 어떠한 특별한 설정을 추가하지 않고도 웹 애플리케이션의 각 페이지에 직접 접근할 수 있습니다. 주로 다음과 같은 상황에서 유용하게 사용됩니다:
- 서버 설정 권한이 없는 경우: 만약 호스팅하는 서버에서 URL 리라이트 설정을 변경할 수 없다면, hash 모드를 사용하는 것이 유리합니다.
- 간단한 데모나 프로토타입: 특정 서버 설정 없이 빠르게 결과를 보고 싶은 경우에도 hash 모드는 적합합니다.
- 서버 설정 권한이 없는 경우: 만약 호스팅하는 서버에서 URL 리라이트 설정을 변경할 수 없다면, hash 모드를 사용하는 것이 유리합니다.
createWebHistory는 브라우저의 History API를 사용하여 경로를 관리합니다. 이 방식은 HTML5를 기반으로 하며, 실제 URL 경로와 동일한 경로를 사용하기 때문에 SEO(검색 엔진 최적화) 측면에서 더 유리합니다. 그러나 이 경우, 서버가 모든 경로에 대해 동일한 파일(index.html)을 보내도록 설정해야 하므로 별도의 서버 설정이 필요합니다.
다음은 createWebHashHistory를 사용하는 것이 이점이 있는 상황을 다룬 게시글입니다:
- 라우터 해시 모드 추가 질문에 대한 짐코딩님의 답변은 서버 설정이 어려운 상황에서 해시 모드가 유용할 수 있다는 내용을 다루고 있습니다.
이 링크들이 Junho님에게 해시 모드 사용의 장점에 대한 이해를 돕는 데 도움이 되길 바랍니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
질문드립니다.
0
32
0
unplugin-vue-components 질문드립니다.
0
37
2
강의듣다가 헷갈려서 질문드립니다.
0
31
1
와 짐코딩님 강의 들으면서 느끼는게 많네요.
0
32
1
질문드립니다.
0
32
2
라우터 인스톨 후 실행안됨
1
49
2
코드 자동 포매팅 질문
0
68
2
필터 watchEffect 질문입니다.
0
50
1
json-server 오류가 다른게 뜨네요
0
113
1
미리보기가 안됩니당...
0
69
2
unplugin-vue-components
0
81
2
TypeError 질문
0
52
1
v-model="show" :show="show" 같이 사용?
1
57
1
.eslintrc.cjs 가 없습니다
0
95
2
title,content값이 비어서 저장되는데 제가 혹시 어떤 부분을 잘못 작성했는지 ㅜㅜ 알고싶습니다.
0
98
3
_title_like: "", 문의드려요 해당 값을 설정하면 list가 아에 안나옵니다.
0
64
1
@click.prevent="params._page = pageNum"> 에 .value를 안쓰는 이유가 궁금합니다.
0
71
2
중첩된 컴포넌트 문제
0
75
2
교안에 있는 부분이 아닌가요?
0
109
2
useAxios Proxy(Object) RefImpl
0
113
1
axios timeout
0
328
3
강의와 상관은 없지만, 궁금한 점이 있어 질문드립니다.
0
122
2
컴포넌트 분리 부분에서 오류가 나요ㅠㅠ
0
167
2
This dependency was not found:
0
140
2