이번 실습에서는 include 지시어의 고급 활용과 include 액션과의 차이점등을 살펴본다. 페이지 include 는 화면 구성요소를 분리해 재활용할 수 있는 방법으로 실제 개발에도 널리 활용되는 기법이다.

실습을 통해 include 지시어와 액션의 차이점을 이해하고 필요시 활용할 수 있다.

실습 내용

메인 파일인 includeTest.jsp 에서 menu.jsp, news.jsp, shopping.jsp 파일을 포함해 하나의 화면을 구성하는 예제이다.

실제 포탈의 메인 화면구성에 사용될 수 있는 형태로 includeTest.jsp 는 화면 구성을 위한 레이아웃을 제공하고 각 화면 구성요소들은 각각의 jsp 파일을 통해 불러오는 방식이다.

포함되는 파일은 jsp 이외에 html 도 가능하며 여기서는 모두 jsp 로 간주한다. 각각의 jsp 는 includeTest.jsp 의 서블릿 코드에 통합 되므로 별도의 HTML 기본 문서 구조를 가지지 않아도 된다. 다만 해당 파일들이 단독으로도 동작한다고 하면 구성요소들을 모두 갖춰야 한다.

includeTest.jsp

메인 화면으로 테이블을 이용해 간단하게 레이아웃을 구성했다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!doctype html>
<html> 
<head>
<TITLE>include directive example</TITLE></HEAD>
<BODY>
<div align="CENTER">
<H2>include directive example</H2>
<HR>

<%@ include file="menu.jsp" %>
<P>
<table border="0" cellpadding="5" cellspacing="1">
	<tr>
		<td><font size=-1><%@include file="news.jsp" %></font></td>
		<td width="20">&nbsp;</td>
		<td><font size=-1><%@include file="shopping.jsp" %></font></td>
	</tr>	
</table>

</div>
</BODY>
</HTML>

menu.jsp, news.jsp, shopping.jsp

포함되는 파일들은 별도의 jsp 나 HTML 구성요소 없이 텍스트로만 구성되어 있다. 각각의 파일에서 스크립트릿, EL, JSTL등의 사용이 가능하다. 단, 통합된 파일에서 접근 가능한 구조여야만 한다.

# menu.jsp
[Game] [Shopping] [News]

# news.jsp
[News]<HR>
2021.00.00 : New Java Book Published !! <BR>
2021.00.00 : Spring framework tutorials <BR>

# shopping.jsp
[Shopping] New Product Arrived!!<HR>
1. New Smartphons  <BR>
2. 10 inch Tablets <BR>

실행 결과는 다음과 같다.

include 실행 결과

include 액션은 include 지시어와 기능상으로는 유사하지만 동작방식에는 차이가 있다. 예제를 통해 include 액션의 활용방법을 알아본다.

예제는 includeAction.jsp 에서 footer.jsp 를 포함하는 구조이며 액션의 특징을 살려 파라미터를 footer.jsp 에 전달하고 출력하도록 되어 있다.

includeAction.jsp

기본 생성 파일에 다음과 같이 footer.jsp 를 포함한다. jsp:param을 이용해 email 과 tel 값을 전달한다.

<jsp:include page="footer.jsp">
	<jsp:param name="email" value="test@test.net" />
	<jsp:param name="tel" value="000-000-0000" />
</jsp:include>

만일 이전 페이지에서 includeAction.jsp 로 전달된 파라미터가 있다면 해당 파라미터도 함께 전달되며 jsp:param들이 추가 된다. 만일 전달 받은 파라미터의 이름과 jsp:param 에서 추가한 파라미터의 이름이 같다면 앞에서 전달받은 값이 변경되는 효과가 있다.

footer.jsp

footer.jsp 라는 제목을 출력한 다음 전달받은 파라미터 값들을 출력하도록 되어 있다.

<h3>footer.jsp: print parameters !!</h3> 
<HR>
<ul>
	<li>Name: <%= request.getParameter("name") %></li>
	<li>Email: <%= request.getParameter("email") %></li>
	<li>Tel: <%= request.getParameter("tel") %></li>
</ul>

footer.jsp 를 단독으로 실행하면 실행은 되지만 속성값들이 모두 null 로 나온다. includeAction.jsp 를 실행하면 email 과 tel 은 출력되고 name 만 null로 나온다.

실행결과는 다음과 같다.

includeAction 실행

생각해볼 문제

footer.jsp 에서 name 파라미터를 출력하게 되어 있지만 includeAction.jsp 에서는 해당 파라미터를 전달하고 있지 않다. 이 경우 두 파일의 코드를 수정하지 않고 name 이 출력되려면 어떻게 해야 할까 ?

include action 과 forward 액션은 서블릿 코드로 변환시 request 와 response 를 include 나 forward 되는 페이지 까지 전달한다. 따라서 includeAction.jsp 의 request 로 전달되는 파라미터에 name 속성이 포함되어 있으면 된다.

GET 방식이라면 includeAction.jsp 를 호출하는 URL에 파라미터를 추가해도 되고 POST로 한다면 form 에 name 속성을 추가하는 형태로 가능하다.

실행 URL 뒤에 name 파라미터를 추가해 보도록 한다.

http://localhost:8080/jwprj/basic/includeAction.jsp?name=hong

실행결과 다음과 같이 name 값이 추가된 것을 알 수 있다.

includeAction 실행

강좌에서 설명한것 처럼 include 지시어는 포함하는 파일들을 모두 하나로 만든다음 컴파일 하는 구조이며 include 액션은 각각의 파일들을 독립적으로 컴파일한 다음 포함 시점에 각각의 실행결과를 포함해 하나의 화면을 만드는 방식이다.

jsp 가 변환된 자바 코드와 컴파일된 클래스 파일을 살펴보면 확인이 가능하다.

참고로 jsp 를 서블릿 코드로 변환한 파일들이 위치하는 폴더는 이클립스 워크스페이스 폴더를 기준으로 다음과 같다.

C:\Dev\WorkSpace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\work\Catalina\localhost\jwbook\org\apache\jsp

변환 파일 목록

그림과 같이 includeTest_jsp.java만 생성되고 menu.jsp, news.jsp, shopping.jsp 는 생성되지 않은 것을 확인할 수 있다. 반면 includeAction.jsp 와 forward.jsp 는 모두 생성된것을 확인할 수 있다.

생성된 자바 파일의 내용을 보면 다음과 같이 모든 파일의 내용이 하나로 통합되어 구성된것을 알 수 있다.

includeTest_jsp.java 구조