[JSP] 8.2 <jsp:include> 액션 태그를 이용한 레이아웃 템플릿
2022. 4. 8. 17:17ㆍJAVA/Servlet&JSP
레이아웃 템플릿 사용 이유
이전 글의 예제인 layout1.jsp와 layout2.jsp 페이지를 보면 공통 부분(top,jsp, left,jsp, bottom.jsp)이 동일하고 유일하게 다른 것은 중앙의 내용정도 뿐이였습니다. 유지보수 관점에서 문제가 될 수 있는 부분은 각각의 페이지(layout1.jsp, layout2.jsp)가 동일한 공통 부분(top, left, bottom) 페이지를 호출한다는 점입니다. 예를 들어 레이아웃 중 left.jsp가 right.jsp로 변경이 되어 오른쪽에 위치한다면 layout1.jsp와 layout2.jsp 페이지는 수정이 될 수 밖에 없습니다. 만약 이러한 페이지가 100개가 있다면 유지보수 관점에서 부적절하다고 생각합니다.
위 문제를 해결하기 위해서 레이아웃 템플릿을 사용할 수 있습니다.
1. 레이아웃 템플릿의 구현 방법
레이아웃 템플릿의 구성
- template.jsp : 레이아웃과 관련된 코드를 저장하고 있음
- useTemplate.jsp : template.jsp의 내용 부분에 어떤 페이지를 삽입할지 저장함
- 내용 페이지.jsp : template.jsp의 내용 부분에 삽입되는 페이지
- 공통 구성 요소 JSP 페이지 : top.jsp, left.jsp와 같이 공통적으로 사용되는 JSP 페이지로서 template.jsp는 이들 구성 요소들을 삽입함
08_template.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String pageTitle = (String)request.getParameter("PAGETITLE");
String contentPage = request.getParameter("CONTENTPAGE");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><%= pageTitle %></title>
</head>
<body>
<table width="400" border="1" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">
<jsp:include page="/Chapter08/module/top.jsp" flush="false"/>
</td>
</tr>
<tr>
<td width="100" valign="top">
<jsp:include page="/Chapter08/module/left.jsp" flush="false"/>
</td>
<td width="300" valign="top">
<!-- 내용부분: 시작 -->
<jsp:include page="<%= contentPage %>" flush="false"/>
<br><br><br>
<!-- 내용부분: 끝 -->
</td>
</tr>
<td colspan="2">
<jsp:include page="/Chapter08/module/bottom.jsp" flush="false"/>
</td>
<tr>
</tr>
</table>
</body>
</html>
09_info_proc.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//템플릿인 template.jsp에서 필요로 하는 request 기본 객체의 "PAGETITLE" 속성의 값을 지정한다.
//request.setAttribute("PAGETITLE", "정보보기");
request.setCharacterEncoding("UTF-8");
%>
<!-- 템플릿인 template.jsp를 사용한다. -->
<!-- 템플릿인 template.jsp에서 내용 부분을 출력할 때 필요로 하는 "CONTENTPAGE"파라미터를 지정한다. -->
<jsp:forward page="/Chapter08/08_template.jsp">
<jsp:param name="CONTENTPAGE" value="/Chapter08/10_info_view.jsp"/>
<jsp:param name="PAGETITLE" value="정보보기"/>
</jsp:forward>- request 기본 객체의 PAGETITLE 속성값 - "정보보기"
- CONTENTPAGE 파라미터 - /Chapter08/10_info_view.jsp
10_info_view.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>제품번호</td><td>XXXX</td>
</tr>
<tr>
<td>가격</td><td>10,000원</td>
</tr>
</table>
<jsp:include page ="07_infoSub.jsp" flush="false">
<jsp:param value="A" name="type"/>
</jsp:include>
</body>
</html>
실행결과 (09_info_proc.jsp 실행)
info_proc.jsp를 실행할때의 처리 순서
2. 템플릿 방식과 일반 방식의 비교
일반 방식과 템플릿 방식의 차이
일반 방식의 특징
- 하나의 JSP 페이지에서 모든 것이 처리되는 형태로서 단순한다.
- 실행 과정에서 문제가 발생할 때 하나의 JSP 페이지만 검사하면 된다.
- 각각의 페이지가 레이아웃과 관련된 코드를 중복해서 포함하고 있음
- 레이아웃 변경시 관련된 모든 JSP 페이지를 변경해주어야 한다.
템플릿 방식의 특징
- 레이아웃 정보를 담고 있는 템플릿 JSP 페이지가 존재한다.
- 하나의 기능을 구현하기 위해서는 정보를 지정해 주는 JSP 페이지와 내용 부분에 출력될 JSP 페이지가 필요함
- 레이아웃 변경시 템플릿 JSP를 변경해주면 된다.
References
source code : https://github.com/yonghwankim-dev/JSP2.0/tree/master/jsp2/src/main/webapp/Chapter08
JSP 2.0 프로그래밍 기초부터 중급까지
'JAVA > Servlet&JSP' 카테고리의 다른 글
| [JSP] 8.4 <jsp:include> 액션 태그와 include 디렉티브의 비교 (0) | 2022.04.08 |
|---|---|
| [JSP] 8.3 include 디렉티브를 이용한 중복된 코드 삽입 (0) | 2022.04.08 |
| [JSP] 8.1 <jsp:include> 액션 태그를 이용한 페이지 모듈화 (0) | 2022.04.08 |
| [JSP] 7.2 리다이렉트와 자바 스크립트를 이용한 페이지 이동 (0) | 2022.04.08 |
| [JSP] 7.1 <jsp:forward> 액션 태그를 이용한 JSP 페이지 이동 (0) | 2022.04.08 |