SAP 에서 Routing 개발

개요

SAP(single page application) 에서 http://localhost:8080/path/query=abc 처럼 path, query param 에 따라 화면 제어가 될 수 있도록 개발한다. 다음과 같이 두가지 방향으로 모두 동기화 되어야 한다.

1. 브라우저 URL 로 요청 ==> 화면 (UI form input) 이 path, query param 에 맞게 보여져야 함
2. 브라우저 main 화면 (UI form input) 에서 submit ==> 브라우저 URL 에 path, query param 추가/변경

1 번은 routing 라이브러리에서 잘 지원한다. 입력된 URL 에서 path, query param 을 분석해 전달해 주면 여기에 맞게 UI 를 개발하면 된다. 그런데 2번에 대해서는 잘 설명되어 있지 않은 것 같은데, 여기서는 개인적으로 정리해 본 두가지 방법을 적어본다.

 

방법1: anchor 활용

submit 버튼을 누르거나 select box 에서 항목을 선택할 때, anchor (href) 로 location URL 을 변경하도록 한다. 두가지 형태로 구현할 수 있을 것 같다.

1. SPA server side rendering 처럼 실제 URL request 가 되도록 한다. 브라우저 URL 이 변경되고 새로 콘텐츠를 받아오기 때문에 화면 깜박임의 단점이 있지만, 개발이 단순하다.
2. 브라우저 URL 은 변경하지만, 새로 콘텐츠를 server 를 통해 받아오지 않도록 한다. 갱신할 콘텐츠는 내부적으로 처리한다. 화면 깜박임이 없지만, 개발이 조금 복잡해 진다. frontroute 의 LinkHandler 참고. 

 

방법2: pushState, replaceState 활용

방법1의 2번과 비슷한 방법인데, 브라우저 URL 을 anchor 를 통해 변경하기 않고 필요할 때 마다 pushState 로 변경한다. 손이 많이 가긴한데 customizing 이 자유롭다. frontroute 의 BrowserNavigation 참고