[Spring Boot] 스프링부트에서 JSP Tiles3 연동하기

안녕하세요.

오늘은 Spring Boot + Tiles3 연동하는 방법을 포스팅하려고 합니다. frontend 개발 환경을 설정하다 보면 공통으로 많이 사용하는 header, footer, leftmenu 등 template을 등록하여 사용해야 할 경우가 많습니다. jsp 환경에서는 보통 tiles 기능을 활용하여 세팅을 많이 하게 됩니다. jsp의 tiles는 backend (java) 영역에서 configuration 설정을 하게 되며, spring boot에서 어떤 식으로 연동하여 사용하게 되는지 하나씩 알아보도록 하겠습니다.

개발 환경

java : 1.8
spring boot : 2.7.7 (tiles3 라이브러리는 spring boot 2버전까지만 지원)
tiles : 3.0.8

java 패키지 구조

jsp 패키지 구조

1. Tiles3 라이브러리 패키지 연동

<!-- tiles 추가 -->
<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-jsp</artifactId>
    <version>3.0.8</version>
</dependency>

가장 먼저 maven pom.xml에 tiles3 라이브러리 dependency를 추가해 줍니다.

여기서 dependency부분에 에러가 발생을 하면 spring boot 버전이 맞지 않아 에러가 발생할 수 있으니 버전 확인을 꼭 하시길 바랍니다.

2. Tiles3 Configuration 생성 & 연동

패키지 & 클래스 생성

먼저 configuration을 등록할 패키지와 TilesConfig.java 클래스를 생성해 줬습니다.

(아래에 생성한 패키지는 ViewsController 패키지로 설정이 필요한 경우 https://sancode.tistory.com/35 글을 참조하시면 됩니다)

* ViewsController.java

package com.demo.system.views.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;

@Controller
public class ViewController {

	/**
	 * notiles 하위 1 레벨 경로 mapping controller
	 * 
	 * @param path1
	 * @return
	 */
	@GetMapping("/notiles/{path1}")
	public String notiles (@PathVariable String path1) {
		return "notiles/" + path1;
	}
	
	/**
	 * views 하위 1 레벨 경로 mapping controller
	 * 
	 * @param path1
	 * @return
	 */
	@GetMapping("/views/{path1}")
	public String view (@PathVariable String path1) {
		return "views/" + path1;
	}
	
	/**
	 * views 하위 2 레벨 경로 mapping controller
	 * 
	 * @param path1
	 * @param path2
	 * @return
	 */
	@GetMapping("/views/{path1}/{path2}")
	public String view (@PathVariable String path1, @PathVariable String path2) {
		return "views/" + path1 + "/" + path2;
	}
	
	/**
	 * views 하위 3 레벨 경로 mapping controller
	 * 
	 * @param path1
	 * @param path2
	 * @param path3
	 * @return
	 */
	@GetMapping("/views/{path1}/{path2}/{path3}")
	public String view (@PathVariable String path1, @PathVariable String path2, @PathVariable String path3) {
		return "views/" + path1 + "/" + path2 + "/" + path3;
	}
	
	/**
	 * views 하위 4 레벨 경로 mapping controller
	 * 
	 * @param path1
	 * @param path2
	 * @param path3
	 * @param path4
	 * @return
	 */
	@GetMapping("/views/{path1}/{path2}/{path3}/{path4}")
	public String view (@PathVariable String path1, @PathVariable String path2, @PathVariable String path3, @PathVariable String path4) {
		return "views/" + path1 + "/" + path2 + "/" + path3 + "/" + path4;
	}
}

TilesConfig.java

package com.demo.system.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.view.UrlBasedViewResolver;
import org.springframework.web.servlet.view.tiles3.TilesConfigurer;
import org.springframework.web.servlet.view.tiles3.TilesView;

@Configuration
public class TilesConfig {

	@Bean
	public UrlBasedViewResolver viewResolver () {
		UrlBasedViewResolver tilesViewResolver = new UrlBasedViewResolver();
		tilesViewResolver.setViewClass(TilesView.class);
		
		return tilesViewResolver;
	}
	
	@Bean
	public TilesConfigurer tilesConfigurer () {
		TilesConfigurer tiles = new TilesConfigurer();
		tiles.setDefinitions("/WEB-INF/tiles/tiles.xml");
		return tiles;
	}
}

@Configuration 어노테이션을 사용하여 java bean 등록을 할 수 있도록 해줬습니다.

그리고 maven에서 등록한 Tiles3의 UrlBasedViewResolver, TilesConfigurer 클래스를 활용하여 Tiles 설정을 하였습니다.

TilesConfigurer의 definitions 경로는 실제 jsp를 연동할 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>
	<!-- empty tiles layout add -->
	<definition name="notiles" template="/WEB-INF/jsp/layout/empty.jsp">
		<put-attribute name="title" value="Demo"/>
		<put-attribute name="empty" value=""/>
	</definition>
	
	<definition name="notiles/*" extends="notiles">
		<put-attribute name="empty" value="/WEB-INF/jsp/notiles/{1}.jsp"/>
	</definition>
	
	<!--  base tiles layout add  -->
	<definition name="base" template="/WEB-INF/jsp/layout/base.jsp">
		<put-attribute name="title"	 	value="Demo"/>
		<put-attribute name="header" 	value="/WEB-INF/jsp/layout/header.jsp"/>
		<put-attribute name="body"	 	value=""/>
		<put-attribute name="footer" 	value="/WEB-INF/jsp/layout/footer.jsp"/>
	</definition>
	
	<definition name="views/*" extends="base">
		<put-attribute name="body" value="/WEB-INF/jsp/views/{1}.jsp"/>
	</definition>
	<definition name="views/*/*" extends="base">
		<put-attribute name="body" value="/WEB-INF/jsp/views/{1}/{2}.jsp"/>
	</definition> 
	<definition name="views/*/*/*" extends="base">
		<put-attribute name="body" value="/WEB-INF/jsp/views/{1}/{2}/{3}.jsp"/>
	</definition> 
	<definition name="views/*/*/*/*" extends="base">
		<put-attribute name="body" value="/WEB-INF/jsp/views/{1}/{2}/{3}/{4}.jsp"/>
	</definition> 
</tiles-definitions>

TilesConfig에서 연동한 tiles.xml 파일입니다. 해당 소스 파일에서는 template별 definition 설정을 할 수 있습니다. tiles.xml에서는

jsp/layout 폴더에 있는 파일들을 기준으로 tiles를 구성하게 됩니다.

* jsp/layout
- base.jsp : header.jsp, footer.jsp 등 tiles를 참조하여 template을 구성하게 되는 jsp 파일
- empty.jsp : tiles 참조없이 아무것도 없는 template을 구성하게 되는 jsp 파일 (팝업, 로그인 등 tiles 미적용 페이지에 필요)
- footer.jsp : footer 영역을 구성하게 되는 jsp 파일
- header.jsp : header 영역을 구성하게 되는 jsp 파일

크게 empty tiles (tiles 적용 안 함)와 base tiles layout을 나눠줬습니다.

empty : notiles 경로 하위에 있는 jsp 파일 적용

base : views 경로 하위에 있는 jsp 파일 적용

3. layout 폴더 하위 jsp 파일

taglib 연동

<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>

tiles.insertAttribute 설정을 하기 위해선 위와 같이 tiles를 연동해줘야 합니다.

base.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Demo</title>
	</head>
	<body>
		<!-- Header tile -->
		<tiles:insertAttribute name="header"/>
		<!-- Body tile -->
		<tiles:insertAttribute name="body"/>
		<!-- Footer tile -->
		<tiles:insertAttribute name="footer"/>
	</body>
</html>

base.jsp에서는 header, body, footer 영역을 참조하고 있으며, body가 views 폴더 하위에 생성한 jsp 파일이 들어가게 됩니다.

header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<div>
	Header Tile
</div>

base.jsp에서 호출하게 되는 header 영역입니다.

footer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<div>
	Footer Tile
</div>

base.jsp에서 호출하게 되는 footer 영역입니다.

empty.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Demo</title>
	</head>
	<body>
		<tiles:insertAttribute name="empty" />
	</body>
</html>

empty.jsp에서는 아무것도 참조하지 않고 notiles 경로 하위에 있는 jsp 파일만 띄워주게 됩니다.

4. base.jsp ( views/tilesTest.jsp ) 테스트

tiles 설정은 모두 끝났고 tiles 적용이 잘 됐는지 확인해 보도록 하겠습니다. views 경로 하위에 tilesTest.jsp 파일을 생성해 줬습니다.

tilesTest.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<div>
	Main Tiles TEST
</div>

실행 결과

위에서 적용한 header와 footer tiles가 적용이 잘 됐네요!

그럼 이어서 notiles 적용도 잘 되는지 확인해 보겠습니다~

4. empty.jsp ( notiles/notilesTest.jsp ) 테스트

notiles 경로 하위에 notilesTest.jsp 파일을 생성하였고, tiles가 제외된 empty.jsp를 통해 jsp를 띄워주는지 확인해 보겠습니다.

notilesTest.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<div>
	No Tiles TEST
</div>

실행 결과

tiles 미포함된 empty.jsp 설정 기준으로 적용이 잘 된 테스트 화면입니다.

마무리

오늘은 Sprint Boot + JSP 환경에서 Tiles3까지 적용하여 예제를 만들어 봤습니다. 화면 개발을 하면서 tiles 적용을 안 하면 모든 페이지마다 공통 header, footer, menu 등 동일하게 넣어줘야 하는데 그런 불필요한 작업을 줄여줄 수 있는 기능입니다. 막상 tiles를 세팅해서 사용해 보면 설정 방법도 간단하고 이해하기도 정말 쉽습니다. :)

그럼 오늘도 저의 작고 소중한 글을 읽어주셔서 감사합니다.

* Spring Boot - JSP ViewController 만들기

https://sancode.tistory.com/35

* Spring Boot + Mybatis + MySQL (mariaDB) 연동하기

https://sancode.tistory.com/45

* Spring Boot 프로젝트 생성 시작하기

https://sancode.tistory.com/32

* Spring Boot + JSP 연동 (서버 재시작 없이 jsp 수정 사항 반영하기)

https://sancode.tistory.com/34

'Java > Spring Boot' 카테고리의 다른 글

[Spring Boot] 리액트 네이티브 bcrypt를 이용해서 암호화 검증하기 (0)	2023.07.10
Spring Boot 매핑 어노테이션 종류 알아보기 (@GetMapping, @PostMapping) (0)	2023.01.27
Spring Boot + JSP 연동 (서버 재시작 없이 jsp 수정 사항 반영하기) (0)	2023.01.04
Spring Boot 프로젝트 생성 시작하기 (0)	2023.01.03