자바스크립트에서 contex path를 가져오는 방법

context path가 소스내에 하드코딩 되어 있으면, context path 변경시 모든 파일에서 다 찾아서 변경해야 합니다. 

요즘은 에디터가 잘 되어있어서 쉽게 찾을 수 있지만 잘못된 문구가 치환되지 않기 위해 주의를 기울여야 하는 것도 번거럽기도 하고, 하드코딩은 가능한 피햐해 하죠.

소스 내에 자바스크립트를 사용할 수 있는 곳은 아래 함수를 이용하면 됩니다.

javascript:

function getContextPath() {

var hostIndex = location.href.indexOf( location.host ) + location.host.length;

return location.href.substring( hostIndex, location.href.indexOf('/', hostIndex + 1) );

}

이미지 경로 설정과 같은 경로를 직접 써야 할 경우 아래 표현식을 써주면 좋습니다.

jsp : EL(Expression Language) 사용

servlet 2.4 이상 ${pageContext.request.contextPath}

servlet 2.3 이하 <c:out value='${pageContext.request.contextPath}' />

위 방식을 사용하기 위해선 JSTL 1.2 라이브러리가 필요합니다.

예) <img src="${pageContext.request.contextPath}/images/logo.png" />

<img src="<c:out value='${pageContext.request.contextPath}' />/images/logo.png" />

그런데 자바스크립트를 사용 못하는 css 파일 내 경로의 경우 톰캣에서 컨텍스트 주소를 별도로 잡아서 적어주는 방법이 있습니다.

톰캣의 server.xml : 

<Context docBase="CTX" path="/ctx" reloadable="true" source="org.eclipse.jst.j2ee.server:CTX"/>

    <Context docBase="CTX/images" path="/ctxImg" reloadable="true" source="org.eclipse.jst.j2ee.server:CTX"/>

위에서와 같이 이미지 경로를 포함하는 주소를 docBase에 설정하고 path를 잡아주면 됩니다. 일반적인 경우는 인터넷에 많이 나와 있어서 이클립스에서 잡은 예를 들었습니다.

예) 

AS-IS : .pattern { background:url(/ctx/images/common/pattern.gif) repeat; }

TO-BE : .pattern { background:url(/ctxImg/common/pattern.gif) repeat; }

사실 톰캣에서 주소를 새로 설정해주었으면 모든 이미지 주소에 새로 설정한 값을 사용하는 것이 편할 수 있습니다. context path와 image path는 별개로 움직이니까요.

참고로 자바에서 컨텍스트 패스를 잡는 경우는 아래와 같이 하면 됩니다.

java : HttpServletRequest request

request.getContextPath()

재유's

매번 찾아보기가 귀찮아 졌당.... ㅜㅜㅋㅋㅋ

http://localhost:8080/rootname/asd.do

이라는 url이 있을때 'rootname'을 갖고 온다.

jstl 의 ${pageContext.request.contextPath}

java의 request.getContextPath()

정도 되는 코드 ㅋㅋ

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

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

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

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

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

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

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

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

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

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

티스토리 뷰

Language/JavaScript

[JavaScript] contextPath 가져오기

빼인트 2014. 3. 5. 13:50

JSP에서..

var ctx = '<%=request.getContextPath()%>';

JavaScript에서..

function getContextPath(){
    return ctx;
}

저작자표시 비영리 변경금지

'Language > JavaScript' 카테고리의 다른 글

공유하기 링크

댓글

비밀글