Inflearn brand logo image

인프런 커뮤니티 질문&답변

Junho님의 프로필 이미지
Junho

작성한 질문수

Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"

History 모드 : SPA, SSR, CSR

hash 모드 배포의 필요성?

작성

·

30

0

createWebHashHistory 와 createWebHistory 가 있다고 학습을 하였는데, createWebHistory 가 아닌 createWebHashHistory 를 굳이 써야만 이득이 되는 케이스가 따로 있나요? 뭔가 해당 기능의 쓸모에 대해서 설득이나 이해가 되지 않아서요.

답변 2

0

짐코딩님의 프로필 이미지
짐코딩
지식공유자

안녕하세요 🙂

  1. 서버 설정 권한이 없을 때

    • GitHub Pages, 공유 호스팅 등

    • 404 리다이렉트 설정 불가능한 환경

  2. 파일 프로토콜 실행 시

    • file:// 로컬 파일 실행

    • 하이브리드 앱

  3. 레거시 브라우저 지원

    • IE9 이하 등 History API 미지원 브라우저

핵심: 서버 설정 없이도 새로고침 시 404 에러가 발생하지 않음

// Hash 모드: example.com/#/about - 서버 설정 불필요
// History 모드: example.com/about - 서버 리다이렉트 설정 필요

대부분 상황에서는 createWebHistory가 더 좋지만, 위 제약사항이 있을 때만 Hash 모드 사용합니다.

0

안녕하세요, 인프런 AI 인턴입니다.

Junho님의 질문에 대해 createWebHashHistory와 createWebHistory의 차이점과 사용 사례에 대해 설명해드리겠습니다.

  1. createWebHashHistory는 URL에 “#“을 붙여서 경로를 관리하는 방식입니다. 이 방식은 서버 설정 없이 클라이언트 측에서 URL을 변경할 수 있는 장점이 있습니다. 따라서, 서버에 어떠한 특별한 설정을 추가하지 않고도 웹 애플리케이션의 각 페이지에 직접 접근할 수 있습니다. 주로 다음과 같은 상황에서 유용하게 사용됩니다:

    • 서버 설정 권한이 없는 경우: 만약 호스팅하는 서버에서 URL 리라이트 설정을 변경할 수 없다면, hash 모드를 사용하는 것이 유리합니다.
    • 간단한 데모나 프로토타입: 특정 서버 설정 없이 빠르게 결과를 보고 싶은 경우에도 hash 모드는 적합합니다.
  2. createWebHistory는 브라우저의 History API를 사용하여 경로를 관리합니다. 이 방식은 HTML5를 기반으로 하며, 실제 URL 경로와 동일한 경로를 사용하기 때문에 SEO(검색 엔진 최적화) 측면에서 더 유리합니다. 그러나 이 경우, 서버가 모든 경로에 대해 동일한 파일(index.html)을 보내도록 설정해야 하므로 별도의 서버 설정이 필요합니다.

다음은 createWebHashHistory를 사용하는 것이 이점이 있는 상황을 다룬 게시글입니다:
- 라우터 해시 모드 추가 질문에 대한 짐코딩님의 답변은 서버 설정이 어려운 상황에서 해시 모드가 유용할 수 있다는 내용을 다루고 있습니다.

이 링크들이 Junho님에게 해시 모드 사용의 장점에 대한 이해를 돕는 데 도움이 되길 바랍니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

Junho님의 프로필 이미지
Junho

작성한 질문수

질문하기