소개

Spring Boot Layout을 위한 Maven 패키지를 추가하여 레이아웃 페이지(마스터 페이지)를 만드는 방법을 알아봅니다.

2021-09-09_22-48-47.png

본 아티클에 대한 데모 소스는 다음 경로에서 살펴볼 수 있습니다.

https://github.com/VisualAcademy/SpringBootLayoutDemo

 

따라하기

(1) Web, Thymeleaf 패키지가 포함된 JavaCampus 프로젝트 또는 기본 스프링 부트 프로젝트를 생성하고, pom.xml에 thymeleaf-layout-dialect 패키지를 추가합니다. pom.xml 파일의 최소 모양은 다음 코드를 참고하세요.

<코드> pom.xml

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
			<groupId>nz.net.ultraq.thymeleaf</groupId>
			<artifactId>thymeleaf-layout-dialect</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
			<scope>runtime</scope>
			<optional>true</optional>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
	</dependencies>
Copy

</코드>

 

(2) shared 폴더(또는 원하는 폴더에) _layout.html 파일을 만들고 다음과 같이 코드를 작성합니다.

<코드> /templates/shared/_layout.html

<!DOCTYPE html>
<html lang="en" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>헤더</h1>
    <div layout:fragment="content">
        <p>Changing contents</p>
    </div>
    <h1>푸터</h1>
</body>
</html>
Copy

</코드> 

 

(3) Home 컨트롤러의 뷰 페이지를 담당할 index.html 문서를 다음과 같이 작성합니다.

<코드> /templates/index.html

<!DOCTYPE html>
<html lang="en" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="shared/_layout">

<body>

    <div layout:fragment="content">

        내용만 들어오는 곳

    </div>

</body>

</html>
Copy

</코드> 

 

(4) HomeController.java 이름으로 Home 컨트롤러를 작성 후 index 액션 메서드를 다음과 같이 작성합니다.

<코드> HomeController.java

package com.hawaso.javacampus;

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

@Controller
//@RequestMapping("/")
public class HomeController {
    @GetMapping("/")
    public String index() {
        return "index";
    }
}
Copy

</코드>

 

(5) 프로젝트를 실행 후 레이아웃이 적용된 index 페이지를 확인합니다. 

<실행>

JavaCampus_Layout.png

</실행>

 

(6) 자바스크립트 포함를 포함할 때에는 th:block 태그를 사용합니다. 변경된 레이아웃 페이지는 다음과 같습니다.

<코드> _layout.html

<!DOCTYPE html>
<html lang="en" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>헤더</h1>
    <div layout:fragment="content">
        <p>Changing contents</p>
    </div>
    <h1>푸터</h1>

    <th:block layout:fragment="script"></th:block>
</body>
</html>
Copy

</코드>

 

(7) 따로 자바스크립트 코드를 만들지는 않았지만, JavaScript 파일을 호출하는 코드가 적용된 index 페이지입니다.

<코드> index.html

<!DOCTYPE html>
<html lang="en" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="shared/_layout">
<body>
    <div layout:fragment="content">
        내용만 들어오는 곳
    </div>

    <th:block layout:fragment="script">
        <script th:src="@{/js/site.js}"></script>
    </th:block>
</body>
</html>
Copy

</코드> 

 

(8) 실행 소스를 확인하면 script 블록이 추가됨을 확인할 수 있습니다.

<실행>

JavaCampus_Layout_Source.png

</실행>

 

(9) 만약, 레이아웃(_layout.html) 페이지에 들어가는 또 다른 부분 페이지(컴포넌트)를 따로 구성할 수도 있습니다. 다음 그림과 같이 views 폴더에 shared 폴더를 두고 이곳에 _header.html과 _footer.html 페이지를 생성할 수 있습니다. 둘 다 헤더 영역과 푸터 영역을 담당하는 간단한 한 줄 짜리 페이지입니다. 

<실행>

2021-09-09_22-16-59.png

</실행>

 

(10) _header.html 페이지는 다음과 같습니다.

<코드> _header.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Header</title>
</head>

<body>
    <div th:fragment="header">
        <header>
            <div>
                Header &amp; Menu 내용 들어오는 곳
            </div>
            </footer>
    </div>
</body>

</html>
Copy

</코드>

 

(11) _footer.html 페이지는 다음과 같습니다.

<코드> _footer.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Footer</title>
</head>

<body>
    <div th:fragment="footer">
        <footer>
            <div>
                &copy; Copyright 내용 들어오는 곳
            </div>
        </footer>
    </div>
</body>

</html>
Copy

</코드>

 

(12) 다시 변경된 _layout.html 파일의 내용입니다.

<코드> _layout.html 

<!DOCTYPE html>
<html lang="en" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>레이아웃 페이지(마스터 페이지)</title>
</head>

<body>
    <h1>헤더</h1>
    <div th:replace="views/shared/_header :: header">헤더 내용 들어오는 곳</div>

    <div layout:fragment="content">
        <p>변경될 본문 영역</p>
    </div>

    <h1>푸터</h1>
    <div th:replace="views/shared/_footer :: footer">푸터 내용 들어오는 곳</div>

    <th:block layout:fragment="script"></th:block>
</body>

</html>
Copy

</코드>

 

(13) 레이아웃과 헤더 그리고 푸터가 포함된 최종 만들어진 index.html 페이지의 실행 결과는 다음과 같습니다.

<실행> 

2021-09-09_22-24-54.png

</실행>

 

마무리

현재 실습을 마무리하면, 스프링 부트에서 부분 페이지 및 전체 레이아웃을 담당하는 페이지를 구현할 수 있습니다.

 

끝.

 

Comments


Comments are closed