html,css,img,js,scss 등 resource 동적자원 절대경로, 상대경로 매핑 지정하기

css파일, 이미지파일, 자바스크립트 파일 등을 폴더 경로로부터 참조할때가 있습니다.

<link rel="stylesheet" href="../resources/폴더명/파일명.css">
<script src="../resources/폴더명/파일명.js"></script>
<img class="imgEx" src="../resuorces/폴더명/파일명.png" />

 

 

만약 resources폴더의 하위폴더로 

각 자원의 폴더구조가 이렇게 지정되있다면, 자원의 절대경로인 폴더경로는 각각

<link rel="stylesheet" href="../resources/css/xx.css">
<script src="../resources/js/xx.js"></script>
<img class="imgEx" src="../resuorces/img/xx.png" />

/resources/css, /resources/img, /resources/js, /resources/scss, /resources/vendor 가 됩니다

 

 

 

하지만 참조하는 태그에서 예를들어 css파일을 href태그로 참조한다고 가정할때

<link rel="stylesheet" href="../resources/css/폴더경로.css"/> 

에서 href에 폴더의 절대경로를 지정하여 참조한다면 F12개발툴을 눌렀을 때 서버컴퓨터의 폴더경로가 노출된다는 문제가 있습니다.

 

이때 만약 uri 매핑주소화 시킬수있다면 폴더경로는 물론 파일명까지도 숨길수있습니다.

<c:url value="/resources/css/폴더경로.css">

이렇게 <c:url value=""> 태그로 경로를 설정하여

 

 

<link rel="stylesheet" href="<c:url value="/resources/css/폴더경로.css">"/> 

경로를 참조할수있도록 href속성에 지정한다면 해당 경로를 찾아가면서, F12 개발 툴 에서 노출되는 주소는 uri주소가 됩니다.

<link rel="stylesheet" href="<c:url value='/css/폴더경로'/>">
<script src="<c:url value='폴더경로'/>"></script>
<img class="imgEx" src="<c:url value='/img/폴더경로/*.png'/>" />

 

하지만 폴더경로가 uri주소로 지정이되어 폴더경로가 노출되는건 마찬가지겠죠.

우리는 이 uri주소에 굳이 서버컴퓨터 자원의 루트경로를 보여주지 않기위해 파일경로가 아닌 uri경로로 만들어주는 설정 설정을 할 수 있습니다.

 바로 servlet-context.xml  파일에서 <resources mapping="/폴더명/**" location="/폴더명/" /> 이라는 태그로 설정해줍니다. 

<resources mapping="/폴더명/**" location="/폴더명/" /> 

 정적자원(html,css,img,js)들을 절대경로로 쉽게 매핑하는 태그입니다.

<resources mapping="/css/**" location="/resources/css/"/>
<resources mapping="/js/**" location="/resources/js/"/>
<resources mapping="/img/**" location="/resources/img/"/>
<resources mapping="/scss/**" location="/resources/scss/"/>
<resources mapping="/vendor/**" location="/resources/vendor/"/>	 

 location속성은 파일의 절대경로를 설정하는곳이며 mapping속성은 location속에 입력한 파일경로를 어떤 uri주소로 매핑할 것 인가를 설정합니다.
mapping에 있는 파일을 /css/절대경로로 보여주는것 입니다.

 

server.xml에 이렇게 설정하게된다면 c:url태그에 등록된 폴더경로를 거쳐 파일을 읽어들이면서, F12개발툴에는 그 경로가 등록된 uri 주소를 mapping에 등록된 문자열로 처리를 해주는것입니다.

한마디로 숨겨주는것이죠.

 

 

우리가 뷰페이지를 출력할 때 컨트롤러를 통해 출력을 한다면 뷰페이지 파일경로가 아닌 컨트롤러에 등록된 uri매핑주소가 주소창에 뜨는것과 똑같은것입니다.

---

코드

 

코어태그립 코드 필수

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<c:url value=""> 폴더경로 활용 

<link rel="stylesheet" href="<c:url value='/css/폴더경로'/>">
<script src="<c:url value='폴더경로'/>"></script>
<img class="imgEx" src="<c:url value='/img/폴더경로/*.png'/>" />

<c:url value=""> 폴더경로를 uri주소로 1:1매핑 처리

<resources mapping="/css/**" location="/resources/css/"/>
<resources mapping="/js/**" location="/resources/js/"/>
<resources mapping="/img/**" location="/resources/img/"/>
<resources mapping="/scss/**" location="/resources/scss/"/>
<resources mapping="/vendor/**" location="/resources/vendor/"/>