Thymeleaf Javascript 에서 ContextPath 가져오기

Thymeleaf 템플릿 엔진에서 ajax 요청 등 Api 요청 URL 앞에 붙여야할 어플리케이션 ContextPath를 사용해야할 때가 있다.

 

이때 Thymeleaf 속성을 사용하여 ContextPath를 설정하고 변수명으로 호출하여 사용할 수 있다.

 

보통 Thymeleaf dialect 라이브러리를 사용하여 Layout을 맞추므로 dialect 기준으로 예시를 보여드립니다.

 

항상 화면에 보여지는 header 부분에 아래와 같은 코드를 추가한다.

<link id="contextPathHolder" th:data-contextPath="${#httpServletRequest.getContextPath()}"/>

 

 

http 요청 정보에서 getContextPath() 메서드를 사용하여 정보를 가져온다.

Thymeleaf 템플릿 엔진이기 때문에 위 th: 구문은 꼭 써야한다.

 

또는 application.properties 나 application.yml 에 설정한 contextPath 값으로 설정하기 위해선 아래 코드를 추가한다.

 

<link id="contextPathHolder" th:data-contextPath="${@environment.getProperty('server.servlet.context-path')}"/>

 

 

그다음 js 파일이나 <script> 태그를 사용하여 아래 코드를 추가한다.

<script type="text/javascript">
    const contextPath = $('#contextPathHolder').attr('data-contextPath');
</script>

 

위와 같이 설정하면 ajax 호출 등 js 파일에서 contextPath 이름으로 사용 가능하다.