728x90
헤더(header)와 푸터(footer) 같은 UI 요소는 대부분의 페이지에 동일하게 포함된다.
코드의 중복을 줄이고 유지보수성을 높이기 위해 템플릿 엔진을 사용하는 것이 효과적이다.
Thymeleaf를 이용하여 헤더와 푸터를 재사용하는 방법과 그로 인한 유지보수성 향상에 대해 글을 작성하려고 한다.
1. Thymeleaf란?
Thymeleaf는 Java 기반 웹 애플리케이션에서 HTML 템플릿을 쉽게 작성할 수 있게 해주는 템플릿 엔진입니다. HTML 파일 안에 Thymeleaf 문법을 사용하여 동적으로 콘텐츠를 생성할 수 있다.
2. Header와 Footer의 분리 및 재사용
헤더와 푸터의 HTML 코드를 분리된 파일로 작성하여 재사용 가능한 형태 예시 코드이다.
header.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="">
<th:block th:fragment="header">
<head>
<style>
header {
background-color: #141517;
color: #fff;
display: flex;
align-items: center;
height: 72px;
}
header h1 {
margin: 0;
padding: 10px;
font-size: 24px;
}
.search {
position: relative;
margin: 20px;
width: 300px;
}
.search input[type="text"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 10px;
outline: none;
}
.search button {
position: absolute;
right: -15px;
top: 1px;
padding: 10px;
background-color: #FFFFFF;
border: none;
border-radius: 0 5px 5px 0;
cursor: pointer;
}
</style>
</head>
<header>
<h1>QuizTunes</h1>
<div class="search">
<form id="Form" method="GET">
<label for="Name"></label>
<input type="text" id="Name" name="Name" placeholder="제목 검색" required>
<button type="submit"><i class="fas fa-search"></i></button>
</form>
</div>
</header>
</th:block>
</html>
footer.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="">
<th:block th:fragment="footer">
<style>
footer {
font-family: 'Dongle', sans-serif;
font-size: 20px;
text-align: center;
color: #141517;
}
</style>
<footer>
<p>© 2024 All rights reserved.</p>
</footer>
</th:block>
</html>
3. 페이지에 헤더와 푸터 포함시키기
home.html
<!DOCTYPE html>
<html lang="" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>QuizTunes</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
}
.section:nth-child(odd) {
background-color: #f0f0f0;
}
.section:nth-child(even) {
background-color: #d3d3d3;
}
</style>
</head>
<body>
<th:block th:replace="~{common/header :: header}"></th:block>
<div>
<div id="section1" class="section">Section 1</div>
<div id="section2" class="section">Section 2</div>
<div id="section3" class="section">Section 3</div>
</div>
<th:block th:replace="~{common/footer :: footer}"></th:block>
<script>
// 페이지 스크롤 이벤트 감지
window.addEventListener('scroll', function() {
// 각 섹션 요소 가져오기
const section1 = document.getElementById('section1');
const section2 = document.getElementById('section2');
const section3 = document.getElementById('section3');
// 각 섹션의 위치 계산
const section1Top = section1.getBoundingClientRect().top;
const section2Top = section2.getBoundingClientRect().top;
const section3Top = section3.getBoundingClientRect().top;
// 스크롤 위치에 따라 동작할 구간 정의
const offset = 100; // 스크롤 동작 구간에서의 여백
// 첫 번째 섹션에 도달했을 때
if (section1Top < offset) {
console.log('Reached section 1');
// 여기에서 원하는 동작 수행
}
// 두 번째 섹션에 도달했을 때
if (section2Top < offset) {
console.log('Reached section 2');
// 여기에서 원하는 동작 수행
}
// 세 번째 섹션에 도달했을 때
if (section3Top < offset) {
console.log('Reached section 3');
// 여기에서 원하는 동작 수행
}
});
</script>
</body>
</html>
이렇게 하면 코드의 중복을 줄일 수 있고, 한 번의 수정으로 모든 페이지에 동일한 변경사항을 적용할 수 있다.
코드 중복 제거, 수정이 용이하고, 일관된 구조를 유지할 수 있는 이점 등 있으며,
Thymeleaf를 이용하여 헤더와 푸터를 재사용 가능하게 구성함으로써, 코드의 중복을 줄이고 유지보수성을 높일 수 있다.
728x90
'IT 개발 관련 > [Spring]' 카테고리의 다른 글
| [Spring] Eureka Server (Discovery Server) 생성 (0) | 2024.06.28 |
|---|---|
| [Spring] MSA(MicroService Architecture) 란? (0) | 2024.06.27 |
| [Spring] Swagger 라이브러리 가이드 (0) | 2024.05.28 |
| [Spring] Spring Security, PasswordEncoder 구현하기 (0) | 2024.05.27 |
| [Spring] Binding Result 사용 가이드 (0) | 2024.05.25 |