Verity's Daily Logs_

[Spring Boot]SiteMesh 설정하기 본문

Spring Framework

[Spring Boot]SiteMesh 설정하기

johye0 2020. 10. 13. 11:14
반응형

SiteMesh가 무엇인지, 사용하면 어떤 게 좋을지 확인해 본 후 실제 JSP 화면에 적용시키는 실습까지 진행한다. 화면까지 직접 디자인하는 것은 시간낭비일 것 같아서 무료 부트스트랩 테마를 가져와 확인해볼 생각이다.

(사용 템플릿: bootstrapmade.com/demo/Eterna/)

 

1. SiteMesh란?

SiteMesh 관련 문서 사이트 (wiki.sitemesh.org/wiki/display/sitemesh3/SiteMesh+3+Overview)에서 설명하고 있는 SiteMesh의 설명은 아래와 같다.

 

SiteMesh는 일관된 모양 / 느낌, 탐색 및 레이아웃 체계가 필요한 페이지로 구성된 사이트를 만드는 데 도움이 되는 웹 페이지 레이아웃 및 장식 프레임 워크 및 웹 응용 프로그램 통합 프레임 워크입니다.
SiteMesh는 웹 서버를 통해 요청된 정적 또는 동적으로 생성된 HTML 페이지에 대한 요청을 가로채서 콘텐츠를 처리 한 다음 하나 이상의 데코레이터와 병합하여 최종 결과를 만듭니다.

 

보편적인 웹사이트의 모습은 상단에 메뉴바나 header가 위치하고, 하단에는 Copyright 표시등의 footer를 가지고 있다. 이런 기본적인 레이아웃은 내가 다른 메뉴로 이동한다고 해도 그대로 가져갈 것이기 때문에, 새로 만드는 메뉴마다 똑같은 소스를 집어넣는 것은 큰 리소스 낭비다.

 

예를 들어 10개의 메뉴(JSP)를 똑같은 header와 footer를 포함해서 만들어 논 후에, "Copyrighttt"라고 오타가 난 것을 발견한다면? 10개의 JSP를 모두 열어 수정해야 하는 짜증 나는 일이 발생할 수도 있다.

 

이처럼 내가 만들 사이트에서 가져가야 할 일관된 레이아웃이 있다면, 하나의 데코레이터를 작성하여 모든 페이지에서 그 레이아웃을 가져갈 수 있도록 하는 것이 SiteMesh이다.

 

내가 실습해볼 화면 중 데코레이터로 만들 부분은 빨간색 박스로 표시한 부분이다.

 

 

2. build.gradle 추가

SiteMesh사용을 위하여 build.gradle 파일에 아래 Dependency 구문을 추가한다. (수정 후 빌드는 필수)

(dependency구문확인: mvnrepository.com/artifact/org.sitemesh/sitemesh/3.0.1)

dependencies {
  ...생략

  compile group: 'org.sitemesh', name: 'sitemesh', version: '3.0.1'

  ...생략
}

 

3. Bean 등록하기

스프링부트에서는 web.xml 이 더 이상 사용되지 않아 서블릿이나 필터를 org.springframework.boot.web.servlet 의 RegistrationBean을 통해 등록해야 한다. DemoApplication 클래스에 명시적으로 FilterRegistrationBean을 등록한다.

package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;

import com.example.demo.config.SiteMeshConfig;

@SpringBootApplication
public class DemoApplication {

	public static void main(String[] args) {
		SpringApplication.run(DemoApplication.class, args);
	}
	
	@Bean
	public FilterRegistrationBean<SiteMeshConfig> siteMeshFilter() {

		FilterRegistrationBean<SiteMeshConfig> filter = new FilterRegistrationBean<SiteMeshConfig>();
		filter.setFilter(new SiteMeshConfig());

		return filter;

	} 

}

 

4. SiteMeshFilter 생성하기

위에 코드를 그대로 복사+붙여넣기 했다면 SiteMeshConfig 부분에서 오류가 날 것이다. SiteMesh설정을 위한 Config 클래스를 아래 경로에 생성하고, decorator 위치 지정까지 완료해 보자. Config 클래스는 ConfigurableSiteMeshFilter를 상속받아 사용한다.

아래 코드 중 가장 중요한 부분은  .addDecoratorPath 부분이다. 모든 경로의 jsp는 (/*) 설정한 경로(/WEB-INF/jsp/decorator/defaultLayout.jsp)의 데코레이터 파일을 가지도록 한다고 명시하는 코드이기 때문이다.

package com.example.demo.config;

import org.sitemesh.builder.SiteMeshFilterBuilder;
import org.sitemesh.config.ConfigurableSiteMeshFilter;

public class SiteMeshConfig extends ConfigurableSiteMeshFilter {

	@Override
	protected void applyCustomConfiguration(SiteMeshFilterBuilder builder) { 
		builder
		// Map decorators to path patterns. 
                .addDecoratorPath("/login", 	"/WEB-INF/jsp/decorator/emptyLayout.jsp")
                .addDecoratorPath("/*", 		"/WEB-INF/jsp/decorator/defaultLayout.jsp")
                // Exclude path from decoration.
                .addExcludedPath("/html/*")
                .addExcludedPath(".json")

                .setMimeTypes("text/html");
	}

}

 

5. decorator 파일 생성하기

일단 SiteMesh적용이 잘 되었는지 확인하기 위해서 간단한 defaultLayout.jsp를 만들어낸다. 생성경로는 당연히 위에 Config 클래스에서 설정한 대로 가져간다.

 

defaultLayout.jsp작성:

<sitemesh:write property='' /> 는 title, head, body가 있다. decorator를 적용할 페이지의 title, head, body를 각각 해당 위치로 넣어준다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
	<head>
		<sitemesh:write property='head'/>
	</head>
	<body>
		이 부분은 DefaultLayout입니다!
		<div>
			<sitemesh:write property='body'/>
		</div>
	</body>
</html>

 

index.jsp작성:

지난번 JSP 적용 챕터 대비 변경한 차이점은 jstl 라이브러리 선언 태그가 없어졌다는 것이다. 이 부분도 대부분의 JSP에서 공통으로 가져가는 코드기 때문에, 위에 defaultLayout.jsp 파일에 포함시키도록 했다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	</head>
	<body>
		hello!!!
		이 컨트롤러의 NAME은 ${name} 입니다.
	</body>
</html>

 

6. 서버 실행 및 적용 확인하기

프로젝트 실행 후 브라우저를 확인해보면 아래 이미지와 같은 화면을 볼 수 있다. 실제로는 두 개의 jsp이지만, 하나의 페이지인 것처럼 통합하여 리턴해 주는 것이 SiteMesh이다.

 

7. 최종 적용 모습

기본 레이아웃은 body부분에 아무런 내용을 넣지 않음으로써 확인할 수 있고, 앞서 확인했던 전체 화면도 알맞게 만들어 낼 수 있다. (소스는 생략!)

 

기본 레이아웃 확인

내용까지 넣어서 확인

 

 

8. Database 연결하기

다음에는 Mybatis를 이용하여 Database를 연결해 보도록 한다.

 

 

 

 

 

반응형
저작자표시

'Spring Framework' 카테고리의 다른 글

[Spring Boot]JDBC+MyBatis 연결하기(2)  (0) 2020.10.14
[Spring Boot]JDBC+MyBatis 연결하기(1)  (0) 2020.10.14
[Spring Boot]JSP 파일 생성 및 연결하기  (1) 2020.10.13
[Spring Boot]프로젝트 생성하기  (0) 2020.10.12
Spring Framework VS Spring Boot  (0) 2020.10.12
'Spring Framework' Related Articles more
Comments