안녕하세요 dev-길길IT입니다.
일반적으로 웹 페이지를 구성할 때, 레이아웃을 가장 먼저 고려합니다. 상단과 하단, 좌측 사이드바, 또 메뉴 네비게이션, 본문 컨텐츠 등 다양한 컴포넌트들이 구성되는데요. 이 때 모든 요소들을 페이지 하나하나에 다 적용해주면 개발하기가 너무 어렵기 때문에 별도의 라이브러리를 사용하는데요. 그 중 하나가 Apache Tiles입니다.
※ 공식 사이트 : https://tiles.apache.org/framework/index.html
Apache Tiles는 반복적인 레이아웃을 한 곳에서 관리할 수 있도록 해주는 template framework입니다. 2017년 11월 7일을 기점으로 프로젝트가 종료되어 현재는 더 이상 추가적으로 release가 되고 있지는 않습니다. 그래서 spring 버전의 제약이 있을 수는 있는데요. 여전히 많은 사람들이 사용하고 있어서 오늘 소개해드리려고 합니다.
[Spring] Tiles 적용하는 법과 사용하는 방법
※ 목차
1. dependency 설치 및 적용
2. tiles config 적용
3. tiles.xml 설정 파일 생성
4. layout 파일 생성 및 적용
1. dependency 설치 및 적용
먼저 Spring에 Apache Tiles를 적용해주려면 dependency를 설치해주어야 합니다. pom.xml에 아래와 같이 org.apache.tiles 관련 tiles-core, tiles-extras 2가지를 적용해주고 reload를 해줍니다.
# pom.xml
<dependency>
<groupId>org.apache.tiles</groupId>
<artifactId>tiles-core</artifactId>
<version>3.0.8</version>
</dependency>
<dependency>
<groupId>org.apache.tiles</groupId>
<artifactId>tiles-extras</artifactId>
<version>3.0.8</version>
</dependency>
2. tiles config 적용
그 다음 serlvet 설정쪽에 tiles config를 적용해주어야 하는데요. config 파일을 만들기에 앞어서 해당 설정을 적용해주겠습니다. bean을 새로 만들어서 아래와 같이 등록을 해주면 됩니다.
# servlet-context.xml
<bean id="viewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver"
p:viewClass="org.springframework.web.servlet.view.tiles3.TilesView"
p:order="0" />
<bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
<property name="definitions">
<list>
<value>/WEB-INF/tiles/tiles.xml</value>
</list>
</property>
</bean>
3. tiles.xml 설정 파일 생성
이제 실제로 spring 프로젝트에서 레이아웃으로 적용할 파일들을 관리하는 tiles.xml을 만들어보겠습니다. servelet-context.xml 쪽 설정에 /WEB-INF/tiles/tiles.xml이라고 경로를 지정해주었으니 해당 경로에 파일을 만들어줍니다.
# 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="templateTopMenuDefault" template="/WEB-INF/layout2/template.jsp">
<put-attribute name="body" value="" />
<put-attribute name="left" value="/WEB-INF/layout2/left.jsp" />
<put-attribute name="menu" value="/WEB-INF/layout2/menu.jsp" />
<put-attribute name="header" value="/WEB-INF/layout2/header.jsp" />
<put-attribute name="footer" value="/WEB-INF/layout2/footer.jsp" />
</definition>
</tiles-definitions>
tiles에는 tiles definitions를 정의합니다. 여기에는 공통적으로 적용할 코드인 template을 definition으로 할당해주고, 하위에 put-attribute를 통해 어떤 html tag에 tiles를 적용할 것인지를 설정하게 됩니다.
4. layout 파일 생성 및 적용
tiles.xml에 적용된 해당 jsp 파일들은 다음과 같은 경로에 위치합니다.
# template.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 lang="ko">
<head>
<meta charset="UTF-8">
<title>제목</title>
<style>
#header{
width:100%;
height:50px;
text-align: center;
background-color: aqua;
}
#left{
float:left;
width:15%;
background-color: gray;
}
#main{
float:left;
width:85%;
background-color: lime;
}
#footer{
width: 100%;
height: 50px;
text-align: center;
background-color: orange;
clear:both;
}
#left, #main{
min-height: 600px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div style="width:100%; height:100%;">
<div id="header"><tiles:insertAttribute name="header" /></div>
<div id="left"><tiles:insertAttribute name="left" /></div>
<div id="main"><tiles:insertAttribute name="body" /></div>
<div id="footer"><tiles:insertAttribute name="footer" /></div>
</div>
<script type="text/javascript">
$(function() {
});
</script>
</body>
</html>
# menu.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>Menu</h1>
</body>
</html>
# left.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>Left</h1>
</body>
</html>
# header.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>Header</h1>
</body>
</html>
# footer.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>Footer</h1>
</body>
</html>
위와 같이 template.jsp에 tiles러 적용할 페이지들의 기본적인 CSS를 작성해주고요. 그 다음 각각의 jsp 파일들을 생성해서 레이아웃을 구성해주었습니다. 이렇게 하고 실행을 하면 어떻게 될까요?
실행을 해보면 이런식으로 화면이 그려지게 됩니다. 이렇게 공통 모듈들을 관리해줄 수 있습니다.
마무리
오늘은 Spring에서 Tiles 적용하는 법과 사용하는 방법을 알아보았습니다. 만들어진지 오래된 코드이지만 그래도 유용하게 사용할 수 있고 관리가 편리해서 좋더라구요. 하지만 deprecate되어서 더 이상 새로운 버전이 나오고 있지 않아서 spring boot의 경우 2버전대에서만 적용이 가능합니다. spring boot 3버전대에서는 tiles를 대체하여 thymeleaf를 사용하는데요. 다음 시간에는 이를 다뤄보겠습니다.
'Dev > Java' 카테고리의 다른 글
| [Spring] log4j 적용 쿼리 및 로그 출력, 정렬하는 방법 (0) | 2024.07.31 |
|---|---|
| [Spring Boot] Thymeleaf 뷰 레이아웃 설정 및 사용하는 방법 (0) | 2024.07.26 |
| IntelliJ, Maven, createprocess error=206 파일 이름이나 확장명이 너무 깁니다. 오류 해결 방법 (0) | 2023.03.23 |
| [Spring Project 셋팅] 2. Spring Project의 구조와 흐름 (1) | 2022.09.01 |
| [Spring Project 구축] 1. JDK + Eclipse + Tomcat + Spring Project 한 방에 정복하기 (0) | 2022.08.21 |
댓글