이번 실습에서는 include 지시어의 고급 활용과 include 액션과의 차이점등을 살펴본다. 페이지 include 는 화면 구성요소를 분리해 재활용할 수 있는 방법으로 실제 개발에도 널리 활용되는 기법이다.
실습을 통해 include 지시어와 액션의 차이점을 이해하고 필요시 활용할 수 있다.
메인 파일인 includeTest.jsp
에서 menu.jsp, news.jsp, shopping.jsp
파일을 포함해 하나의 화면을 구성하는 예제이다.
실제 포탈의 메인 화면구성에 사용될 수 있는 형태로 includeTest.jsp
는 화면 구성을 위한 레이아웃을 제공하고 각 화면 구성요소들은 각각의 jsp 파일을 통해 불러오는 방식이다.
포함되는 파일은 jsp 이외에 html 도 가능하며 여기서는 모두 jsp 로 간주한다. 각각의 jsp 는 includeTest.jsp
의 서블릿 코드에 통합 되므로 별도의 HTML 기본 문서 구조를 가지지 않아도 된다. 다만 해당 파일들이 단독으로도 동작한다고 하면 구성요소들을 모두 갖춰야 한다.
메인 화면으로 테이블을 이용해 간단하게 레이아웃을 구성했다.
<%@ 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"> </td>
<td><font size=-1><%@include file="shopping.jsp" %></font></td>
</tr>
</table>
</div>
</BODY>
</HTML>
포함되는 파일들은 별도의 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 액션의 활용방법을 알아본다.
예제는 includeAction.jsp 에서 footer.jsp 를 포함하는 구조이며 액션의 특징을 살려 파라미터를 footer.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 라는 제목을 출력한 다음 전달받은 파라미터 값들을 출력하도록 되어 있다.
<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로 나온다.
실행결과는 다음과 같다.
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 값이 추가된 것을 알 수 있다.
강좌에서 설명한것 처럼 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 는 모두 생성된것을 확인할 수 있다.
생성된 자바 파일의 내용을 보면 다음과 같이 모든 파일의 내용이 하나로 통합되어 구성된것을 알 수 있다.