웹 페이지를 만들다보면 네비게이션 바, 푸터, 헤더 등 중복되는 부분이 생길 수 있습니다.
JSP Fragment 구현을 통해,
다른 JSP에서 이를 추가하여 코드를 간소화할 수 있습니다.
패키지 구성
Fragment를 모아놓을 패키지를 만들고,
Fragment로 사용할 JSP Fragment 파일을 생성합니다.
확장자명은 jspf 입니다.
.jspf 파일 생성
taglib 및 bootstrap을 사용한다면, header.jspf와 footrt.jspf를 다음과 같이 구성할 수 있습니다.
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<link href="webjars/bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
<link href="webjars/bootstrap-datepicker/1.10.0/css/bootstrap-datepicker.standalone.min.css" rel="stylesheet">
<title>Manage Your Todos</title>
</head>
<body><script src="webjars/bootstrap/5.2.3/js/bootstrap.min.js"></script>
<script src="webjars/jquery/3.6.4/jquery.min.js"></script>
<script src="webjars/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js"></script>
</body>
</html>만약 Navigation bar를 사용한다면 navigation.jspf 파일을 아래와 같이 생성할 수 있습니다.
<nav class="navbar navbar-expand-md navbar-light bg-light mb-3 p-1">
<a class="navbar-brand m-1" href="https://ride-dev.tistory.com">ride</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/list-todos">Todos</a></li>
</ul>
</div>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="/logout">Logout</a></li>
</ul>
</nav>jspf 참조
앞서 생성한 jspf 파일을 참조합니다.
welcome.jsp
<%@include file="common/header.jspf"%>
<%@include file="common/navigation.jspf"%>
<div class="container">
<h1>Welcome</h1>
<a href="list-todos">Manage</a> your todos
</div>
<%@include file="common/footer.jspf"%>파일 참조 경로 기준은, 작업중인 파일을 기준으로 합니다.
예제의 파일 구성은 아래와 같습니다.
L common
L footer.jspf
L header.jspf
L navigation.jspf
welcome.jsp
welcome.jsp와 common 디렉토리가 같은 경로에 있고,
common 디렉토리에 jsp fragment 파일이 모여있습니다.
결론
JSP fragment는 웹 애플리케이션 개발에서 코드의 재사용성과 유지보수성을 향상시키는 강력한 기술 중 하나입니다.
페이지의 일부를 모듈화하고,
재사용 가능한 코드 조각을 만들어 활용하는 것을 통해,
코드의 가독성을 높이고 개발 생산성을 향상시킬 수 있습니다.
728x90
'Java' 카테고리의 다른 글
| [Http Client] RestTemplate에서 RestClient 적용으로 최적화 (2) | 2024.01.19 |
|---|---|
| [Swagger] 테스트 코드, Swagger 등 개발 시 우선순위 몇 가지 (0) | 2024.01.17 |
| [Spring MVC] 아키텍처 모델 종류; Dispatcher Servlet, Model 1, Model 2, Front Controller (1) | 2023.12.26 |
| [SpringBoot] 로깅 (1) | 2023.12.26 |
| [JPA, Hibernate] 시작하기 -3, JPA 와 Hibernate (0) | 2023.12.23 |