15. 뷰 중복 코드 제거
타임리프 프래그먼트 (Fragment) 사용하기
> https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#including-template-fragments
> 프래그먼트 정의
>> th:fragment
> 프래그먼트 사용
>> th:insert
>> th:replace
뷰 중복 코드
> 메인 네비게이션
> 하단 (footer)
> 헤더 (head)
중복 코드 제거는 뷰 템플릿 엔진마다 방법이 다를 수 있다.
fragment를 정의하는 fragments.html 파일 생성
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head th:fragment="head">
<meta charset="UTF-8">
<title>Dot Study</title>
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" />
<style>
.container{
max-width: 100%;
}
</style>
</head>
<!-- nav -->
<nav th:fragment="main-nav" class="navbar navbar-expand-sm navbar-dark bg-dark">
내용 생략
</nav>
<!-- footer -->
<footer th:fragment="footer">
<div class="row justify-content-center">
<img class="mb-2" src="/images/test_logo.jpg" alt="" width="100">
<small class="d-block mb-3 text-muted">© 2020</small>
</div>
</footer>
뷰 생성
위에 정의한 fragments.html :: head를 사용하려면 사용할 html파일에 th:repalce하면 된다
index.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<!-- 와우..! html도 이런게 되네 -->
<head th:replace ="fragments.html :: head"></head>
<!-- 개꿀! -->
<nav th:replace="fragments.html :: main-nav"></nav>
<!-- 요호~ -->
<footer th:replace="fragments.html :: footer"></footer>
sign-up.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace ="fragments.html :: head"></head>
<body class="bg-light">
<nav th:replace="fragments.html :: main-nav"></nav>
...
<footer th:replace="fragments.html :: footer"></footer>
...
</body>
</html>
checked-email.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace ="fragments.html :: head"></head>
<body class="bg-light">
<nav th:replace="fragments.html :: main-nav"></nav>
<div class = "py-5 text-center" th:if="${error}">
<p class="lead">닷스터디 이메일 확인</p>
<div class="alert alert-danger" role="alert">
이메일 확인 링크가 정확하지 않습니다.
</div>
</div>
<div class = "py-5 text-center" th:if="${error == null}">
<p class="lead">닷스터디 이메일 확인</p>
<h2>
이메일을 확인했습니다. <span th:text="${numberOfUser}">10</span>번째 회원,
<span th:text="${nickname}">이종원</span>님 가입을 축하합니다.
</h2>
<small class="text-info">이제부터 가입할 때 사용한 이메일 또는 닉네임과 패스워드로 로그인 할 수 있습니다.</small>
</div>
</body>
</html>
참고
'Dot Programming > Spring Clone' 카테고리의 다른 글
| [스프링 웹앱 프로젝트 #16] 현재 인증된 사용자 정보 참조 (0) | 2020.12.07 |
|---|---|
| [스프링 웹앱 프로젝트 #15] 첫 페이지 보완 (Fontawesome, Jdenticon 사용) (0) | 2020.12.01 |
| [스프링 웹앱 프로젝트 #13] 프론트엔드 라이브러리 설정 (0) | 2020.11.27 |
| [스프링 웹앱 프로젝트 #12] 회원 가입 메인 네비게이션 메뉴 (0) | 2020.11.27 |
| [스프링 웹앱 프로젝트 #11]회원 가입 완료 후 자동 로그인 (0) | 2020.11.26 |
