지난 포스팅에 이어 이번에는 `thymeleaf`를 이용해 Layout을 적용해 보겠다.
`jsp`를 사용할 때에는 `tiles`를 사용했었다 보니 `thymeleaf`의 문법이 낯설어 약간의 거부감이 들었지만 사용자가 직접 설정할 부분이 현저히 줄어들어 굉장히 편하다는 인상을 받았다.
그럼 차근차근 적용을 시작해 보자.
0. 레이아웃 적용 왜 하나?
1) 편하다
나에게는 가장 중요한 이유라고 볼 수 있겠다. 여러 페이지를 만들다 보면 결국에 공통적으로 들어가야 할 부분이 생기기 마련인데 레이아웃 적용을 안 해놓으면 그때마다 복사 붙여 넣기를 할 수밖에 없다. (사실 복붙이야 개발자의 일상이니까 조금 피곤하고 말면 되기는 한다.)
2) 유지보수
이게 정말 중요한데, 유지보수에 드는 에너지를 현저히 줄여준다. 100개의 페이지의 공통적인 코드 부분을 고치려면 100개의 소스 코드를 일일이 수정해야 하는데, 레이아웃을 적용했다면 1개의 파일만 수정해도 100개의 페이지에 모두 같은 내용을 반영할 수 있다.
3) 신뢰감 상승
모든 페이지가 통일감 있게 적용되어 있다면 사용자는 안정감과 신뢰감을 느끼게 될 것이다. 예를 들어 상단 헤더에 어떤 페이지에서는 마이페이지 버튼이 어떤 페이지에서는 내 정보라고 생성되어 있으면 사용자는 현기증을 느끼며 페이지를 떠나버릴 것이다.
1. 기본세팅
1) dependencies 추가
나는 그래들을 사용하기 때문에 `build.gradle` 파일을 수정해 주겠다.
dependencies {
/* thymeleaf */
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'
}`spring-boot-starter-thymeleaf`같은 경우에는 스프링 부트를 처음 세팅할 때 의존성 추가를 해줬다면 이미 추가가 되어 있을 것이다.
`nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect`를 추가해 주자.
2) application.yml 설정 추가
spring:
application:
name: lotto
thymeleaf:
enable: true
cache: false
prefix: classpath:/templates/
suffix: .html
check-template-location: true
`enable : true` thymeleaf 사용 활성화
`cache : false ` 개발 환경에서는 소스변경이 자주 일어나기 때문에 캐시 저장을 꺼두는 게 좋다. 캐시가 켜져 있으면 소스를 변경할 때마다 캐시를 삭제해 줘야 새로운 소스가 반영된 것을 확인할 수 있다.
운영환경에서는 페이지 속도향상을 위해 해당 옵션을 true로 바꿔주자.
`prefix : classpath:/templates/` thymeleaf에서 파일 경로 지정 시 자동으로 붙여줄 prefix 설정이다. templates에 놓겠다고 설정했으니 thymeleaf파일은 templates폴더에 위치시킨 뒤 그다음 경로만 작성해 주면 된다.
`suffix: .html` thymeleaf에서 파일 경로 지정 시 마지막에 .html을 자동으로 붙여준다.
`check-template-location: true` templates 디렉토리에 파일이 있는지 체크 후 없으면 에러를 발생시킨다.
3) 폴더 생성
`src > main > resources > templates` 폴더 안에 `common`, `pages` 를 다시 `common` 폴더안에 `fragments`, `layouts`를 생성해 주었다.
`fragments`에는 레이아웃의 조각들인 fragment들을, `layouts`은 fragment들을 이용해 만들어낸 레이아웃을, `pages`에는 본문 내용으로 넣을 html 파일들을 넣어줄 것이다.
2. fragment 생성
fragment라는 뜻 그대로 조각이다. 이 조각들을 이용해 layout을 구성할 것이다.
그럼 fragment를 생성해 보자.
1) config.html 생성
`src > main > resources > templates > common > fragments` 에 `config.html` 생성
<!DOCTYPE html>
<html lang="en"
xmlns:th="http:www.thymeleaf.org"
th:fragment="ConfigFragment">
<head>
<meta charset="UTF-8">
</head>
</html>`xmlns:th="http:www.thymeleaf.org"` thymeleaf를 사용하기 위해 추가
`th:fragment="ConfigFragment"` fragment를 사용하기 위한 이름 부여
`config.html`은 다음과 같이 공통적으로 사용되는 파일들을 추가해 주고 관리하기 위해 생성했다.
2) header.html 생성
`src > main > resources > templates > common > fragments` 에 `header.html` 생성
<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
th:fragment="HeaderFragment">
<head>
<meta charset="UTF-8">
<h1>이것은 header 이다</h1>
</head>
</html>3) footer.html 생성
`src > main > resources > templates > common > fragments` 에 `footer.html` 생성
<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
th:fragment="FooterFragment">
<footer>
<h1>이것은 footer 이다.</h1>
</footer>
</html>
필요한 조각들은 생성이 마무리되었다. 이제 이 조각들을 이용한 레이아웃 구성을 만들어보겠다.
3. layout 생성
만들어진 조각들을 이용해 페이지를 찍어낼 구성도를 그려둔다고 생각하면 되겠다.
내가 만들고 싶은 화면 구성은 header - 본문 - footer로 이루어진 기본적인 구성이다.
이 구성을 찍어내기 위한 기본 레이아웃을 만들어보겠다.
1) defaultLayout.html 생성
`src > main > resources > templates > common > layouts` 에 `defaultLayout.html` 생성
<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head th:replace="~{common/fragments/config :: ConfigFragment}">
<title>Title</title>
</head>
<body>
<header th:replace="~{common/fragments/header :: HeaderFragment}"></header>
<th:block layout:fragment="Content"></th:block>
<footer th:replace="~{common/fragments/footer :: FooterFragment}"></footer>
</body>
</html>`xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"` 레이아웃 파일이라면 추가해야 한다
`th:replace="~{경로 :: fragment명}"` 입력한 경로에 있는 입력한 fragment명의 파일로 해당 태그를 대체하겠다는 뜻이다
경로는 처음에 `prefix`와 `suffix`를 설정했기 때문에 `templactes`이후로 작성하면 되며, `.html`은 생략가능하다.
`th:block layout:fragment="Content"` th:block는 페이지 렌더링시 제거되고 안에 내용만 그대로 페이지에 남겨준다.
이제 이 defaultLayout을 사용하면 Content 부분만 갈아 끼우면서 config, header, footer 들은 따로 추가해 줄 필요가 없어졌다.
4. main 페이지 출력
이제 만들어진 레이아웃으로 메인페이지를 한 번 띄어보자.
1) main.html 생성
`src > main > resources > templates > pages > main > main.html` 에 `main.html` 생성
<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{common/layouts/defaultLayout}"
layout:fragment="Content">
<head>
<meta charset="UTF-8">
<title>로또 명당</title>
</head>
<body>
이 것은 메인페이지의 Content입니다.
</body>
</html>`layout:decorate="~{common/layouts/defaultLayout}"` 사용할 레이아웃의 경로를 입력해 준다.
`layout:fragment="Content"` 이 html파일의 Fragment 명을 입력해 준다. 레이아웃에서 사용할 때 이 fragment명을 사용하면 된다.
2) mainController.java 생성
package lottoisgood.com.lotto.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class MainController {
@GetMapping("/")
public String maniPage() {
return "pages/main/main";
}
}
기본페이지 요청을 받아줄 컨트롤러 생성했다.
현재 프로젝트 구성이다. 이제 준비가 다 되었다.
서버를 켜고 `localhost:8080`에 접속해 보면 layout이 잘 적용된 것을 확인할 수 있다.
다음 포스팅에서는 이제 만들어 놓은 header에서 네비게이션 메뉴를 만들어보겠다.
'사이드 프로젝트 > 로또명당' 카테고리의 다른 글
| [Spring Boot 사이드 프로젝트] 5. 로또명당 프로젝트 회고 (0) | 2024.08.09 |
|---|---|
| [Spring Boot 사이드 프로젝트] 4. 정적 리소스(html, css, js) 바로 반영 설정(spring boot devtools) (0) | 2024.05.18 |
| [Spring Boot 사이드 프로젝트] 2. 깃허브에 프로젝트 올리기(인텔리제이) (0) | 2024.05.12 |
| [Spring Boot 사이드 프로젝트] 1. Spring boot 프로젝트 세팅 (0) | 2024.05.11 |
| [Spring Boot 사이드 프로젝트] 0. 사이드 프로젝트의 시작 방법 (0) | 2024.05.10 |
