Fragment
= 홈페이지를 만들 때 여러 페이지 내에서 중복되는 화면을 별도의 파일로 분리한 후 클라이언트에 보여질 때에는 하나의 화면으로 합쳐져서 보여지도록 하는 기능
- 재사용 가능한 부분 템플릿 : HTML 코드에서 공통적으로 사용되는 부분 (ex.
header.putter,navigation-bar등) 을 하나의 템플릿으로 분리하여 다른 여러 페이지에서 사용 가능- Thymeleaf 문법 함께 사용 - 템플릿에서 특정 부분 쉽게 분리 / 호출
만드는 방법
1. 반복되는 문서 코드를 별도의 파일(html)로 저장 => 완성된 형태로 만들어야 함
2. 반복되는 영역에 th:fragment 속성 이용해 이름 저장 -> 코드 조각에 이름 설정 th:fragment=""
templates.fragment > header.html
<!DOCTYPE html>
<html lang="ko" xmlns:th ="http://thymeleaf.org"
xmlns:sec="http://thymeleaf.org/extras/spring-security">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>게시글 목록</title>
<link rel="stylesheet" th:href="@{/css/list.css}">
<script defer th:src="@{/script/search.js}"></script>
</head>
<body>
<div class="container" th:fragment="top-menu(title)">
<div class="logo">
<a th:href="@{/}">
<img th:src="@{/images/logo.png}" alt="logo">
</a>
<h2 th:text="${title}"></h2>
</div>
</div> <!-- end .container -->
</body>
</html>2. 합쳐지는 파일에서 전달되는 데이터가 있을 경우, 함수의 전달인자 등 변수를 이용해 받기
boardList.html
<div class="container" th:replace="fragment/header(title='게시글 목록(f)')">
<!--
<div class="logo">
<a th:href="@{/}">
<img th:src="@{/images/logo.png}" alt="logo">
</a>
<h2>게시글 목록</h2>
</div>
-->
</div> <!-- end .container -->-> 전체 문서에는 th:replace , fragment는 코드 조각에
호출 방법
1. 반복되는 코드를 삽입하는 문서 - th:replace() 사용
<div th:replace="fragment/navigator :: top-menu(uid=사오정)"></div>
2. 삽입하는 방법
<div th:replace=" 폴더명/파일명 :: 플래그먼트명"></div>
<div th:replace=" 폴더명/파일명 :: 플래그먼트명(변수명=값)"></div>
연습
1. Contoller / HTML(Fragment 분리)
@Contoller
@RequestMapping("/display")
public class FragmentController{
@GetMapping("/fragment")
public String fragment() {
return "display/fragmentTest";
}
}<!DOCTYPE html>
<html xmlns:th ="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>navigator</title>
</head>
<body>
<div>
<ul class="navigation" th:fragment="top-menu(uid)">
<li><a class="navi" th:text="|${uid} 홈|" th:href="@{/}">홈</a></li>
<li><a class="navi" href="#">방명록</a></li>
<li><a class="navi" href="#" >로그인</a></li>
<li><a class="navi" href="#" >회원가입</a></li>
<li><a class="navi" href="#" >게시판</a></li>
</ul>
</div>
</body>
</html>2. HTML(Fragment 호출)
<!DOCTYPE html> <html xmlns:th ="http://www.thymeleaf.org">
<head><meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" th:href="@{/style/top.css}">
</head>
<body>
<div th:replace="fragment/navigator :: top-menu(uid=사오정)"></div>
<div class="container">
<h2 class="main">[게시글 목록]</h2>
<!-- 게시글 검색 -->
<form th:action="@{/}" method="GET">
<select name="searchItem">
<option value="title">제목</option>
<option value="usrid">글쓴이</option>
<option value="content"> 글내용</option>
</select>
<input type="text" name="searchWord">
<input class="btn" type="submit" value="검색">
</form>
</div>
</body>
</html>결과 화면
+ 로그인 된 사용자의 이름 (id), 로그아웃 버튼 매 화면마다 표시하기 <Spring7 파일>
header.html
<!-- 로그인 정보 -->
<div id="user">
<ul>
<li sec:authorize="isAnonymous()"><a th:href="@{/user/login}">로그인</a></li>
<li sec:authorize="isAuthenticated()">
<a th:href="@{/user/logout}">[[${loginName}]]님 ([[ ${#authentication.name} ]]), 로그아웃</a>
</li>
</ul>
</div>BoardController
/**
* 게시글 수정을 위해 화면에 출력할 내용을 조회
* @param boardNum
* @return
*/
@GetMapping("/boardUpdate")
public String boardUpdate(
@AuthenticationPrincipal LoginUserDetails loginUser
, @RequestParam(name="boardNum") Long boardNum
, @RequestParam(name="searchItem", defaultValue="boardTitle") String searchItem
, @RequestParam(name="searchWord", defaultValue="") String searchWord
, Model model
) {
BoardDTO board = boardService.selectOne(boardNum); // 조회
model.addAttribute("board", board);
// 검색 기능이 추가되면 계속 달고 다녀야 함
model.addAttribute("searchItem", searchItem);
model.addAttribute("searchWord", searchWord);
// 로그인이 된 사용자의 경우 로그인 아이디를 가져감
if(loginUser != null) {
model.addAttribute("loginName", loginUser.getUserName()); // 실명
}
return "board/boardUpdate";
}
=> @AuthenticationPrincipal LoginUserDetails loginUser
// 로그인이 된 사용자의 경우 로그인 아이디를 가져감 부분 추가
결과 화면
우당탕탕 개발 간잽 일기 - 간잽이 수백 번이면 전문가일지도?