정적 파일 매핑 / Tiles와 TilesResolver

* 정적 파일 매핑

 

실습을 위해 www.newlecture.com html 파일을 다운받아서 webapp 폴더 안에 넣는다. index.jsp 파일을 퍼블리싱 된 index.html의 내용물로 바꾼 뒤 실행하면 이미지 파일이 나오지 않는다.

 

 

 

해당 경로(webapp/images/logo.png)에 파일이 있음에도 이미지가 나오지 않는 이유는, 스프링이 정적인 파일(html, 이미지 등)을 제공하지 않도록 막아두었기 때문이다. jsp 파일은 접근 가능하지만 이미지 등은 url으로 요청했을 때 404가 뜬다. (localhost:8080/images/logo.png)

 

 

 

 

위와 같은 방법을 사용하면 정적 파일 서비스가 가능하다. 사용자가 '/images/**'으로 요청했을 때 '/images/' 경로에서 찾아보게 한다는 의미이다. 간편하게는 resource라는 폴더를 만들어 images, js, css를 다 몰아넣으면 된다.

 

 

dispatcher-servlet.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.springframework.org/schema/beans
        https://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/mvc
        https://www.springframework.org/schema/mvc/spring-mvc.xsd"> 
        <!-- mvc라는 스키마 파일 추가하면 mvc 태그를 사용할 수 있다. -->
        
    <!-- 
    http://www.springframework.org/schema/mvc : 스키마 이름
    https://www.springframework.org/schema/mvc/spring-mvc.xsd : 스키마 파일
    
    ** xmlns:mvc="http://www.springframework.org/schema/mvc"의 의미
    mvc라는 이름으로 http://www.springframework.org/schema/mvc 스키마를 이용할 것이고,
          스키마 파일은 xsi:schemaLocation에 명시된 
          https://www.springframework.org/schema/mvc/spring-mvc.xsd"
         -->

    <bean id="/index" class="com.newlecture.web.controller.IndexController" />  
    
    <!-- View Resolver -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    	<property name="prefix" value="/WEB-INF/view/"></property>
    	<property name="suffix" value=".jsp"></property>
    </bean>
    
    <mvc:resources location="/resource/" mapping="/resource/**"></mvc:resources>
    <!-- /resource/**라는 요청이 왔을 때(mapping) /resource/ 폴더에서 찾아보게 함(location)  -->
    
    
</beans>

 

mvc 태그를 사용하기 위해 beans xml namespace에 mvc 관련 스키마를 추가한다.

직접 써도 되고 혹은 dispatcher-servlet.xml 파일 우클릭 > Open With > Spring Config Editor를 누르면 namespace 탭에 접근할 수 있다. (이전에 namespace 탭이 안 보여서 이클립스 다시 깔고 별 뻘짓을 다했는데 댓글에서 꿀팁을 얻었다......)

 

위 코드처럼 '/resource/**' 으로 매핑하면 모든 정적 파일을 그 주소로 매핑해야 하는 번거로움이 있기 때문에 파일들의 위치를 바꾸고 코드는 아래와 같이 수정한다. (이전에는 webapp(루트폴더) 안 resource 폴더에 css, images, js 등 있었음)

 

수정전 파일 경로

 

수정 후 현재 파일 경로

 

dispatcher-servlet.xml

    <mvc:resources location="/static/" mapping="/**"></mvc:resources>

 

요즘은 static 폴더 안에 정적 파일을 몰아넣는 방식을 많이 사용하므로 폴더 이름을 static으로 수정했다.

 

 

 

※ "/*"과 "/**"의 차이

 

     /* : /*에 있는 url과 일치하는 디렉토리
     /** : 하위 디렉토리까지 포함
    
     예를 들면
     /*  패턴은  /, /aaa, /bbb 등등에 맵핑이 되지만 /aaa/bbb는 /*에 맵핑이 안되고, /**에는 맵핑이 된다.

 

 

 

 

* 페이지 공통분모 집중화를 위한 페이지 모듈 분리하기

 

 

 

header, footer 등 모든 페이지에 일괄적으로 존재하는 부분이 있다. <jsp:include>를 사용해서 공통부분을 하나의 파일로 구성해서 떼어놓고 다른 페이지들이 그 페이지를 참조하게 하면 공통부분을 집중화 할 수 있다. 하지만 이것마저도 모든 페이지에 include 구문을 써야하는 단점이 있기에 tiles를 사용하도록 한다.

 

 

 

 

상단 부분은 header.jsp, 하단 부분은 footer.jsp, 고객센터 메뉴에서 헤더 밑 부분(customer)은 visual.jsp, 좌측 메뉴는 aside.jsp로 파일을 만들어 떼어놓았다. layout.jsp는 구성 레이아웃 파일이다. 

 

 

현재 디렉토리 상태

 

 

* Tiles 지시서 작성하기

 

tiles.apache.org 접속

 

 

tiles는 이제 은퇴했다고 한다.. 요즘은 백엔드 뿐만 아니라 프론트엔드를 사용하여 페이지를 만든다. 특히 소규모 프로젝트의 경우는 완전히 프론트 만으로 페이지 작업을 하기도 한다. tiles는 백엔드에서 페이지를 합치는 라이브러리인데 요즘은 프론트를 사용하는 추세이다 보니 발전을 점점 줄이고 있다.

 

Documentation > Tiles 3.0.x > Tutorial > Creating tiles Pages > Create a definition의 내용을 복사하여 WEB-INF 안의 tiles.xml 파일을 생성하고 붙여넣기한다.

 

 

ListController.java

public class ListController implements Controller{

	@Override
	public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response) throws Exception {
		ModelAndView mv = new ModelAndView("notice.list");

		return mv;
	}
}

 

컨트롤러의에서 뷰 네임을 'notice.list'으로 설정하고 리턴,

 

 

tiles.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC
       "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
       "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
<tiles-definitions>
  <definition name="notice.list" template="/WEB-INF/view/customer/inc/layout.jsp">
  <!-- name : 컨트롤러에서 반환한 이름 -->
    <put-attribute name="title" value="공지사항" />
    <put-attribute name="header" value="/WEB-INF/view/inc/header.jsp" />
    <put-attribute name="visual" value="/WEB-INF/view/customer/inc/visual.jsp" />
    <put-attribute name="aside" value="/WEB-INF/view/customer/inc/aside.jsp" />
    <put-attribute name="body" value="/WEB-INF/view/customer/notice/list.jsp" />
    <put-attribute name="footer" value="/WEB-INF/view/inc/footer.jsp" />
  </definition>  
  <definition name="notice.detail" template="/WEB-INF/view/customer/inc/layout.jsp">
    <put-attribute name="title" value="Tiles tutorial homepage" />
    <put-attribute name="header" value="/WEB-INF/view/inc/header.jsp" />
    <put-attribute name="visual" value="/WEB-INF/view/customer/inc/visual.jsp" />
    <put-attribute name="aside" value="/WEB-INF/view/customer/inc/aside.jsp" />
    <put-attribute name="body" value="/WEB-INF/view/customer/notice/detail.jsp" />
    <put-attribute name="footer" value="/WEB-INF/view/inc/footer.jsp" />
  </definition>
</tiles-definitions>

 

tiles.xml 지시서에서 definition name으로 받는다. 'notice.list'라는 요청이 왔을 때 tiles.xml에서 해당 name으로 definition을 찾아 template, 즉 layout.jsp를 기반으로 header, footer 등을 설정할 것이다.

 

 

 

* 레이아웃 페이지 만들기와 Tiles 라이브러리 설정하기

 

 

 

Tiles를 사용하지 않은 코드에서는 'notice/list' 라는 요청이 왔을 때 뷰 리졸버의 prefix, suffix를 통해 'WEB-INF/view/notice/list.jsp'라는 뷰 페이지를 찾아서 리턴한다. Tiles를 사용하면 'notice.list'라는 요청이 왔을 때 Tiles의 definition name이 'notice.list'인 것을 찾아 세팅하게 된다. 이제 이 안에서 visual, aside, body 등의 위치를 설정해야 한다.

 

maven repository에서 tiles-jsp를 검색한다. Tiles JSP Support 3.0.8을 복사해서 pom.xml에 붙이고, 템플릿이 되는 layout.jsp의 상단에 tiles 태그 라이브러리를 추가해 준다.

 

 

layout.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title><tiles:getAsString name="title"></tiles:getAsString></title>

<link href="/css/customer/layout.css" type="text/css" rel="stylesheet" />
<style>
#visual .content-container {
	height: inherit;
	display: flex;
	align-items: center;
	background: url("../../images/customer/visual.png") no-repeat center;
}
</style>
</head>

<body>
	<!-- header 부분 -->
	<tiles:insertAttribute name="header"></tiles:insertAttribute>

	<!-- --------------------------- <visual> --------------------------------------- -->
	<!-- visual 부분 -->
	<tiles:insertAttribute name="visual"></tiles:insertAttribute>
	
	<!-- --------------------------- <body> --------------------------------------- -->
	<div id="body">
		<div class="content-container clearfix">

			<!-- --------------------------- aside --------------------------------------- -->
			<tiles:insertAttribute name="aside"></tiles:insertAttribute>
			<!-- aside 부분 -->

			<!-- --------------------------- main --------------------------------------- -->
			<tiles:insertAttribute name="body"></tiles:insertAttribute>
		</div>
	</div>

	<!-- ------------------- <footer> --------------------------------------- -->
	<tiles:insertAttribute name="footer"></tiles:insertAttribute>
</body>
</html>

 

 

* Tiles ViewResolver 설정하기

 

 

dispatcher-servlet.xml

	<!-- Tiles ViewResolver -->
	<bean class="org.springframework.web.servlet.view.UrlBasedViewResolver">
		<property name="viewClass" value="org.springframework.web.servlet.view.tiles3.TilesView" />
		<property name="order" value="1" />
	</bean>

	<bean class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
		<property name="definitions" value="/WEB-INF/tiles.xml" />
	</bean>
    
    
	<!-- View Resolver -->
	<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="prefix" value="/WEB-INF/view/"></property>
		<property name="suffix" value=".jsp"></property>
		<property name="order" value="2" />
	</bean>

 

아래는 이전에 설정해 두었던 뷰 리졸버이고 위의 두 bean 태그는 Tiles에서 설정한 뷰 리졸버이다. 같은 요청이 왔을 때의 우선 순위를 부여하기 위해 <property name="order".../>를 추가하였다.

 

 

pom.xml

	<!-- https://mvnrepository.com/artifact/javax.servlet/jstl -->
	<dependency>
	    <groupId>javax.servlet</groupId>
	    <artifactId>jstl</artifactId>
	    <version>1.2</version>
	</dependency>

 

 

* Tiles 설정에 Wildcard 이용하기

 

tiles.xml에서 페이지마다 definidefinition 설정을 해주었는데, 모든 요청과 페이지에 대해 전부 설정해야 하면 코드가 길어지게 된다. 이럴 때는 와일드카드 문자를 사용하면 된다.

 

 

tiles.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC
       "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
       "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
<tiles-definitions>
  <definition name="notice.*" template="/WEB-INF/view/customer/inc/layout.jsp">
  <!-- name : 컨트롤러에서 반환한 이름 -->
    <put-attribute name="title" value="공지사항" />
    <put-attribute name="header" value="/WEB-INF/view/inc/header.jsp" />
    <put-attribute name="visual" value="/WEB-INF/view/customer/inc/visual.jsp" />
    <put-attribute name="aside" value="/WEB-INF/view/customer/inc/aside.jsp" />
    <put-attribute name="body" value="/WEB-INF/view/customer/notice/{1}.jsp" /> 
    <!-- 첫번째 와일드카드에 쓰인 문자열을 {1}으로. 와일드카드는 여러개일 수 있다. -->
    <put-attribute name="footer" value="/WEB-INF/view/inc/footer.jsp" />
  </definition>  
</tiles-definitions>

 

definition name에서 * 사용, body에서 {1}은 첫 번째 와일드카드를 의미한다.

 

 

 

* Root 페이지들을 위한 layout 페이지 만들기

 

고객센터 페이지들을 위한 layout 설정이 끝났다. 루트 페이지를 위한 layout 페이지를 추가해 준다.

 

 

 

layout.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
<!DOCTYPE html>
<html>

<head>
<title>코딩 전문가를 만들기 위한 온라인 강의 시스템</title>
<meta charset="UTF-8">
<title>공지사항목록</title>

<link href="/css/layout.css" type="text/css" rel="stylesheet" />
<link href="/css/index.css" type="text/css" rel="stylesheet" />
<script>
	
</script>
</head>

<body>
	<!-- header 부분 -->
	<tiles:insertAttribute name="header"></tiles:insertAttribute>

	<!-- --------------------------- <body> --------------------------------------- -->
	<tiles:insertAttribute name="body"></tiles:insertAttribute>

	<!-- ------------------- <footer> --------------------------------------- -->
	<tiles:insertAttribute name="footer"></tiles:insertAttribute>


</body>
</html>

 

 

tiles.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC
       "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
       "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
<tiles-definitions>
  <definition name="root.*" template="/WEB-INF/view/inc/layout.jsp">
    <put-attribute name="title" value="공지사항" />
    <put-attribute name="header" value="/WEB-INF/view/inc/header.jsp" />
    <put-attribute name="body" value="/WEB-INF/view/{1}.jsp" /> 
    <put-attribute name="footer" value="/WEB-INF/view/inc/footer.jsp" />
  </definition>  
  <definition name="notice.*" template="/WEB-INF/view/customer/inc/layout.jsp">
    <put-attribute name="title" value="공지사항" />
    <put-attribute name="header" value="/WEB-INF/view/inc/header.jsp" />
    <put-attribute name="visual" value="/WEB-INF/view/customer/inc/visual.jsp" />
    <put-attribute name="aside" value="/WEB-INF/view/customer/inc/aside.jsp" />
    <put-attribute name="body" value="/WEB-INF/view/customer/notice/{1}.jsp" />
    <put-attribute name="footer" value="/WEB-INF/view/inc/footer.jsp" />
  </definition>  
</tiles-definitions>

 

루트 페이지들을 위한 layout이라서 definition name을 '*'으로 설정하게 되면, 모든 페이지들은 전부 <definition name="*" ....>을 타고 템플릿을 세팅할 것이다. 그렇게 되면 <definition name="notice.*" ....>과 같은 요청도 먹히지가 않는다. 따라서 'root.*'이라고 설정하고, IndexController에서 경로를 수정한다.

 

 

IndexController.java

public class IndexController implements Controller{

	@Override
	public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response) throws Exception {
		ModelAndView mv = new ModelAndView("root.index");
		mv.addObject("data", "Hello Spring MVC");

		return mv;
	}
}

 

ModelAndView mv = new ModelAndView("index"); 에서 index를 root.index으로 수정한다. 그러면 루트를 통해 들어오는 페이지들의 레이아웃 세팅도 완료된다.

 

---

뉴렉처 스프링 프레임워크 강의를 듣고 정리한 게시글입니다.

www.youtube.com/user/newlec1