Vuejs 와 location.href

OpsNow의 프론트엔드는 Angular, Vuejs 등 Single Page Application (SPA) 프레임워크를 사용하고 있습니다. 기존의 프로젝트는 Hash 방식 (Vuejs 기준)을 사용하여 라우팅을 하고 있었는데, 여기에는 2가지 문제점이 있습니다.

1. URL이 예쁘지 않습니다. (http://localhost:8080/#/myapp)
2. 늘어나는 요구사항을 커버하기 위하여 서비스가 계속 늘어나고 있는데 제대로된 URL 정책이 필요합니다.
   1. 앞으로 subdomain 을 사용하던 것을 URI 를 통해 분기하도록 바꾸려고 합니다. (http://myapp01.mydomain.com → http://mydomain.com/myapp01/)

그래서 기존 프로젝트의 Hash 방식을 History 방식으로 변경하는 작업이 필요했습니다.

Vuejs History Mode 참고 : 문서 바로가기

URL 방식을 바꾸기 위해서 소스코드 변경, WEB 서버(Nginx) 설정 변경이 필요했는데, 이때 겪었던 문제점을 공유하고자 합니다.

Code language: CSS (css)

Javascript로 프론트엔드 개발을 해봤다면, 이 코드를 한번은 써봤을 것입니다. 일반적으로 아래와 같이 2가지 이유로 사용을 합니다.

location.href 참고 : 문서 바로가기

• 현재 페이지의 URL 을 얻고 싶을 때

Code language: JavaScript (javascript)

• 특정 URL 로 리다이렉트 하고 싶을 때

Code language: JavaScript (javascript)

그런데 URL 에 Hash(#) 가 포함되어 있을 때는 2번이 좀 다르게 동작하게 됩니다.

1. URL에 #이 없는 경우
   • 서버에 이동할 URL 을 요청
2. URL에 #이 있는 경우
   • 서버에 요청이 일어나지 않고, 클라이언트에서 해당 URL 을 찾음
   • 참고로 #은 Anchor라고 해서 HTML에서 아래와 같이 사용한다. (msword나 pdf 문서에서 목차의 링크를 누르면 해당 컨텐츠 페이지 찾아가듯이)

HTML anchor

Code language: HTML, XML (xml)

그래서 Angular, Vuejs 같은 프레임워크는 기본값으로 URL에 # 을 포함하고 있는 것 같습니다. 라우팅을 처리하기 쉬우니까요.

위의 Vuejs History Mode 문서를 보면 써있듯이 HTML5 의 pushState 를 활용하여 #이 없어도 서버에 요청을 하지 않도록 하고 있습니다.

그리고 내 어플리케이션이 Web 서버 (Nginx, Apache 등)에 배포되어 있다면, 세팅을 추가해줘야 요청을 정상적으로 처리할 수 있게 됩니다.

레거시 시스템의 코드 안에 window.location.href가 있었는데, 이것이 원하는대로 동작하지 않아서 몇 군데 수정을 해주었습니다.

Code language: JavaScript (javascript)

이것을

Code language: JavaScript (javascript)

이렇게 Vuejs 안에서 처리하도록 변경해야 했습니다. 브라우저 새로고침 후, 혹은 로그인 후 처리하는 로직이 좀 있어서 찾는데 몇시간은 걸린듯….

그래도 덕분에 URL hash 에 대해서 찾아보고 공부하는 시간을 가졌습니다. 되도록 같은 실수는 반복하지 않길….

참고자료

• URL-프래그먼트-HASH
• What is the difference between “window.location.href” and “window.location.hash”?
• anchor jumping by using javascript