OpsNow의 프론트엔드는 Angular, Vuejs 등 Single Page Application (SPA) 프레임워크를 사용하고 있습니다. 기존의 프로젝트는 Hash 방식 (Vuejs 기준)을 사용하여 라우팅을 하고 있었는데, 여기에는 2가지 문제점이 있습니다.
- URL이 예쁘지 않습니다. (
http://localhost:8080/#/myapp
) - 늘어나는 요구사항을 커버하기 위하여 서비스가 계속 늘어나고 있는데 제대로된 URL 정책이 필요합니다.
- 앞으로 subdomain 을 사용하던 것을 URI 를 통해 분기하도록 바꾸려고 합니다. (
http://myapp01.mydomain.com
→http://mydomain.com/myapp01/
)
- 앞으로 subdomain 을 사용하던 것을 URI 를 통해 분기하도록 바꾸려고 합니다. (
그래서 기존 프로젝트의 Hash 방식을 History 방식으로 변경하는 작업이 필요했습니다.
Vuejs History Mode 참고 : 문서 바로가기
URL 방식을 바꾸기 위해서 소스코드 변경, WEB 서버(Nginx) 설정 변경이 필요했는데, 이때 겪었던 문제점을 공유하고자 합니다.
window.location.href
Code language: CSS (css)
Javascript로 프론트엔드 개발을 해봤다면, 이 코드를 한번은 써봤을 것입니다. 일반적으로 아래와 같이 2가지 이유로 사용을 합니다.
location.href 참고 : 문서 바로가기
- 현재 페이지의 URL 을 얻고 싶을 때
var url = window.location.href;
Code language: JavaScript (javascript)
- 특정 URL 로 리다이렉트 하고 싶을 때
window.location.href = "http://mydomain.com";
Code language: JavaScript (javascript)
그런데 URL 에 Hash(#
) 가 포함되어 있을 때는 2번이 좀 다르게 동작하게 됩니다.
- URL에
#
이 없는 경우- 서버에 이동할 URL 을 요청
- URL에
#
이 있는 경우- 서버에 요청이 일어나지 않고, 클라이언트에서 해당 URL 을 찾음
- 참고로
#
은 Anchor라고 해서 HTML에서 아래와 같이 사용한다. (msword나 pdf 문서에서 목차의 링크를 누르면 해당 컨텐츠 페이지 찾아가듯이)
HTML anchor
<a href="#content01">컨텐츠01 바로가기</a>
<p id="content01">여기가 컨텐츠01 입니다.</p>
Code language: HTML, XML (xml)
그래서 Angular, Vuejs 같은 프레임워크는 기본값으로 URL에 #
을 포함하고 있는 것 같습니다. 라우팅을 처리하기 쉬우니까요.
위의 Vuejs History Mode 문서를 보면 써있듯이 HTML5 의 pushState 를 활용하여 #
이 없어도 서버에 요청을 하지 않도록 하고 있습니다.
그리고 내 어플리케이션이 Web 서버 (Nginx, Apache 등)에 배포되어 있다면, 세팅을 추가해줘야 요청을 정상적으로 처리할 수 있게 됩니다.
레거시 시스템의 코드 안에 window.location.href
가 있었는데, 이것이 원하는대로 동작하지 않아서 몇 군데 수정을 해주었습니다.
window.location.href = "http://myapp.mydomain.com/myapp01";
Code language: JavaScript (javascript)
이것을
router.push("/myapp01");
Code language: JavaScript (javascript)
이렇게 Vuejs 안에서 처리하도록 변경해야 했습니다. 브라우저 새로고침 후, 혹은 로그인 후 처리하는 로직이 좀 있어서 찾는데 몇시간은 걸린듯….
그래도 덕분에 URL hash 에 대해서 찾아보고 공부하는 시간을 가졌습니다. 되도록 같은 실수는 반복하지 않길….
참고자료