[ Spring ] tiles 설명 및 설정 방법

페이지 모듈 분리하기

페이지마다 Header나 Footer와 같이 공통적으로 들어가는 요소들이 있다.

만약, Header의 코드를 고쳐야 한다면 모든 페이지의 Header를 일일이 고쳐야하는 불편함이 생긴다.

이러한 문제점을 막기 위해서 페이지의 공통 분모 집중화하는 것이 필요하다.

공통적으로 들어가는 코드들은 각각 jsp파일을 만들어 묶는다.

레이아웃 까지도 따로둔다.

 

😲 직접 예제 프로젝트의 페이지 모듈을 분리해보니 예전 웹프로그래밍 수업의 프로젝트가 생각났다. php 웹페이지였고, 막 웹에 대해 처음 배울 때였다. 그 때도 모든 페이지의 공통적으로 들어가 있는 코드들이 많았는데, 고칠때마다 모든 페이지의 코드를 고쳐야하니 매우 불편했다.. 사실 업무에서 이런 현상이 있다는건 말이 안되는 일이다..!!! 그랬는데 역시나 이런 방법이 있었구나 신기함을 느꼈다. 무언가를 배울 때 더 low한 환경에서 작업을 해본 후에 나중에 프레임워크나 라이브러리 등을 배웠을 때 이래서 이런 걸 만들었구나 하는 것이 몸소 느껴진다.

 

 

---

tiles

웹 페이지의 상단, 하단, Header, Footer, left 등 반복적으로 사용되는 부분들에 대한 정보를 모아서 관리해준다.

반복되는 부분을 설정파일로 한 번만 설정하고 수정시 설정 파일의 일부만 변경해도 모든 tiles 페이지가 적용된다.

 

[ pom.xml ] : 라이브러리 추가

<properties>
    <org.apache.tiles-version>3.0.3</org.apache.tiles-version>
</properties>

<!-- Tiles -->
<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-core</artifactId>
    <version>${org.apache.tiles-version}</version>
</dependency>

<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-servlet</artifactId>
    <version>${org.apache.tiles-version}</version>
</dependency>

<dependency>
          <groupId>org.apache.tiles</groupId>
          <artifactId>tiles-jsp</artifactId>
          <version>${org.apache.tiles-version}</version>
</dependency>

<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-extras</artifactId>
    <version>${org.apache.tiles-version}</version>
</dependency>

 

 

 

[ dispatcher-servlet.xml ] : tiles.xml과 그 안에서 view에 맞는 해당 definition을 찾아줄 tiles ViewResolver 추가

<!--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>

<!--ViewResolver-->
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
     <property name="prefix" value="/WEB-INF/views/"/>
     <property name="suffix" value=".jsp"/>
     <property name="order" value="2"/>
</bean>

기존의 ViewResolver보다 우선순위가 높아야하므로 order을 1로 set해준다.

기존의 ViewResolver는 우선순위를 2로 set해준다.

 

 

😨 이 과정에서 우선순위가 제대로 먹히지 않는. 그니까 TilesViewResolver가 먼저 실행되지 않고, ViewResolver가 먼저 실행되는 오류 발견.. 오류와의 사투를 몇시간이나 했는지 모르겠다.. 한 세시간 정도..ㅠㅠㅠ 결국 새로 프로젝트도 만들어보고 했는데 그 때는 오류가 나지 않았다?!!! 그렇다면 프로젝트 자체에 문제가 있는 것 같다고 생각했다. 보니까 target의 lib에 계속 지금까지 pom.xml에서 받아왔던 jar파일들이 막 쌓여있는 것 아닌가... ?!?(안 쓰이는 것까지도...) 그래서 안쓰는 쓰레기들은 삭제했다..(😡ㅂㄷㅂㄷ) 그렇게 계속 하다보니 결국 성공! 거기서 같은 종류인데 버젼이 다른 라이브러리라든지 안쓰는 거라든지 막 충돌하고 꼬여서 안됐던것 같다.. 성공했으면 됐지뭐..ㅠㅠㅠㅠㅠㅠ

 

 

 

[ tiles.xml ] : 타일들을 정의하기 위한 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/views/inc/layout.jsp">
    <put-attribute name="title" value="공지사항" />
    <put-attribute name="header" value="/WEB-INF/views/inc/header.jsp" />
    <put-attribute name="body" value="/WEB-INF/views/{1}.jsp" />
    <put-attribute name="footer" value="/WEB-INF/views/inc/footer.jsp" />
  </definition>
  <definition name="notice.*" template="/WEB-INF/views/customer/inc/layout.jsp">
    <put-attribute name="title" value="공지사항" />
    <put-attribute name="header" value="/WEB-INF/views/inc/header.jsp" />
    <put-attribute name="visual" value="/WEB-INF/views/customer/inc/visual.jsp" />
    <put-attribute name="aside" value="/WEB-INF/views/customer/inc/aside.jsp" />
    <put-attribute name="body" value="/WEB-INF/views/customer/notice/{1}.jsp" />
    <put-attribute name="footer" value="/WEB-INF/views/inc/footer.jsp" />
  </definition>
</tiles-definitions>

컨트롤러에서 보낸 view name을 기반으로 tiles.xml에서 맞는 definition 을 찾는다.

definition 의 name으로 패턴을 지정할 수 있다. * 표시는 아무 내용이나 들어갈수 있다는 것이다. * 안의 내용은 put-attribute 태그의 value 값에서 {1}에 들어가게 된다. 변수를 설정해주는 것 같은 의미이다. 여러 개 사용 가능.

각 상응하는 definition의 template의 페이지로 정보를 보내며, 각 모듈들은 put-attribute로 설정해준다.

 

 

 

template인 jsp에 페이지 모듈들을 붙여준다.

[ 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>공지사항목록</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" />

    <!-- --------------------------- <body> --------------------------------------- -->

    <tiles:insertAttribute name="body" />

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


</body>

</html>

이런식으로 tiles:insertAttribute 태그를 사용하면 tiles.xml에 지정했던 모듈들을 불러와 자동으로 붙여준다.