[Vue]Vue Router : Hash mode & History mode

안녕하세요, BTC 블랙아웃입니다!

 

오늘은 Vue.js에서 중요한 부분인 Vue Router의 두 가지 라우팅 모드, hash와 history에 대해 좀 더 자세히 알아보려고 합니다. 이 두 모드는 웹 애플리케이션의 URL 관리 방식에 큰 영향을 미치므로, 각각의 특성을 정확히 이해하는 것이 중요합니다.

 

---

1. Vue Router란?

Vue.js를 사용한 SPA(Single-Page Application) 개발에 있어서 Vue Router는 페이지 라우팅을 관리하는 핵심적인 역할을 합니다. Vue Router는 애플리케이션의 다양한 뷰(View)와 라우트(Route)를 연결해 주며, 사용자의 URL 변경에 따라 적절한 컴포넌트를 렌더링합니다.

 

2. Hash 모드

작동 원리

• Hash 모드는 URL의 해시(#)를 사용하여 클라이언트 사이드에서 라우팅을 관리합니다. URL의 해시 부분은 웹 서버에 전송되지 않으므로, 서버에서는 해시 변경을 인식할 수 없습니다.
• 예: http://example.com/#/about

장점

• 웹 서버 설정 없이 사용 가능: 모든 요청이 index.html 파일로 리다이렉트되는 설정이 필요 없습니다.
• 브라우저 호환성이 좋음: 구형 브라우저에서도 잘 작동합니다.

단점

• SEO 문제: 해시 부분은 검색 엔진에 의해 인덱싱되지 않을 수 있어 SEO에 불리합니다.
• URL의 미학적인 측면에서 덜 깔끔함.

 

3. History 모드

작동 원리

• History 모드는 HTML5의 History API를 활용하여 서버 요청 없이 브라우저의 URL을 변경합니다. 이 모드를 사용할 때 서버는 모든 요청에 대해 **index.html**로 응답하도록 설정해야 합니다.
• 예: http://example.com/about

장점

• 깔끔한 URL: 해시가 없는 깨끗한 경로를 제공합니다.
• SEO 친화적: 검색 엔진에 더 잘 노출됩니다.

단점

• 서버 설정 필요: 모든 요청을 **index.html**로 리다이렉트하는 서버 설정이 필요합니다.
• 구형 브라우저 호환성 문제가 발생할 수 있음.

 

4. 모드 선택에 따른 고려사항

• SEO 중요성: History 모드가 SEO에 더 유리합니다.
• 서버 환경: 정적 파일 서버나 서버 설정 변경이 제한된 환경에서는 Hash 모드가 더 적합할 수 있습니다.
• 브라우저 호환성: 구형 브라우저를 지원해야 하는 경우, Hash 모드가 더 안정적입니다.

---

5. 마치며

Vue Router의 Hash 모드와 History 모드는 각각 고유의 장단점을 가지고 있으며, 사용하는 프로젝트의 요구사항과 환경에 따라 적절한 모드를 선택해야 합니다.

다음 포스팅에서는 또 다른 주제로 찾아뵙겠습니다.

 

감사합니다!