페이지 모듈화와 요청 흐름 제어

하나의 웹사이트에는 헤더와 푸터메뉴가 동일한 경우가 많다.

<jsp:include> 액션 태그와 include 디렉티브를 사용하면 이런 공통 화면을 모듈화해서 코드가 중복되는 것을 방지할 수 있다.

<jsp:forward> 액션 태그를 이용하면 클라이언트의 요청 처리를 다른 JSP페이지에 전달할 수 있는데, 이를 통해 JSP의 요청 처리 흐름을 제어할 수 있다.

 

1. <jsp:include> 액션 태그를 이용한 페이지 모듈화

 

<jsp:include> 액션 태그는 지정한 페이지를 태그의 위치한 부분에 포함시킬 때 사용된다.

 

동작 방식

1) main.jsp가 웹 브라우저의 요청을 받음

2) [출력내용 A]를 출력 버퍼에 저장

3) <jsp:include>가 실행되면 요청 흐름을 sub.jsp로 이동

4) [출력내용 B]를 출력 버퍼에 저장

5) sub.jsp의 실행이 끝나면 요청 흐름을 다시 main.jsp의 <jsp:include>로 돌아옴

6) <jsp:include> 이후 부분인 [출력내용 C]를 출력 버퍼에 저장

7) 출력 버퍼의 내용을 응답 데이터로 전송

 

즉 <jsp:include> 액션 태그는 포함할 JSP페이지의 실행 결과를 현재 위치에 포함시킨다고 할 수 있다.

 

 

1.1 <jsp:include> 액션 태그 사용법

 

<jsp:include page="포함할페이지" flush="true" />

 

<jsp:include> 액션 태그의 두 속성은 다음과 같은 의미를 갖는다.

 

1) page 속성 : 포함할 JSP 페이지

2) flush 속성 : 지정한 JSP 페이지를 실행하기 전에 출력 버퍼를 플러시 할 지의 여부를 지정한다. true이면 출력 버퍼를 플러시하고, false이면 하지 않는다.

 

 

<jsp:include> 액션태그 동작예제

 

main.jsp

main.jsp에서 생성한 내용

<jsp:include page="sub.jsp" flush="false" />

include 이후의 내용

 

 

sub.jsp

<p>
sub.jsp에서 생성한 내용
</p>

 

실행결과와 생성된 HTML코드

 

 

1-2. <jsp:include> 액션 태그를 이용한 중복 영역처리

 

웹사이트에는 상단메뉴와 하단메뉴가 고정적인 것들이 있다.

공통부분을 별도로 분리하지 않고 프로그래밍을 한다면 동일한 내용이 여러 코드에 중복적으로 작성이 될 것이다.

문제는 되지 않지만 해당 코드에 내용을 추가하려면 jsp를 모두 수정해야하는 문제가 발생한다.

 

이럴 경우에 <jsp:include> 액션태그를 사용하면 공통되는 부분 수정문제를 최소화 할 수 있다.

아래 그림과 같이 별도로 JSP페이지로 작성하고 <jsp:include>액션 태그를 사용하면 지정한 위치에 포함시킬 수 있다. 

중복 영역을 모듈화 하는 데 유용

 

 

<jsp:include>액션 태그를 사용하여 페이지 공통부분을 읽어오는 예

 

layout.jsp

<table width="400" border="1" cellpadding="0" cellspacing="0">
<tr>
	<td colspan="2">
		<jsp:include page="./module/top.jsp" flush="false" />
	</td>
</tr>
<tr>
	<td width="100" valign="top">
		<jsp:include page="./module/left.jsp" flush="false" />
	</td>
	<td width="300" valign="top">
	레이아웃1
	<br><br><br>
	</td>
</tr>
<tr>
	<td colspan="2">
		<jsp:include page="./module/bottom.jsp" flush="false" />
</tr>

</table>

 

실행화면

 

layout.jsp는 상단, 좌측, 하단 부분에 코드를 직접 생성하지 않고 <jsp:include> 액션 태그를 사용하여 관련 부분을 생성하고 있다.

layout.jsp를 실행하면 좌측 화면과 같이 공통부분이 출력되는 것을 확인 할 수 있다.

 

 

 

1-3. <jsp:param> 을 이용해서 포함될 페이지에 파라미터 추가하기

 

<jsp:param> 액션 태그는 <jsp:include> 액션 태그의 자식으로 추가되며, name속성과 value속성에는 각각 포함할 페이지에 새로 추가할 파라미터의 이름과 값을 입력한다. value 속성에는 값을 직접 지정할 수도 있고, 또는 표현식을 이용해서 값을 지정할 수 있다.

 

사용방법

<jsp:param name="파라미터이름" value="값" />

 

 

info.jsp

<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="infoSub.jsp" flush="false">
	<jsp:param name="type" value="A" />
</jsp:include>

infoSub.jsp에 이름이 type이고 값이 A인 파라미터를 추가로 전달한다

 

 

infoSub.jsp

<%
	String type = request.getParameter("type");
	if (type == null) {
		return;
	}
%>
<br>
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
	<td>타입</td>
	<td><b><%= type %></b></td>
</tr>
<tr>
	<td>특징</td>
	<td>
<%  if (type.equals("A")) { %>
	강한 내구성.
<%  } else if (type.equals("B")) { %>
	뛰어난 대처 능력
<%  } %>
	</td>
</tr>
</table>

 

 

실행화면

 

<jsp:param>태그는 동일한 이름의 파라미터가 존재할 경우, 기존 파라미터 값을 유지하면서 새로운 값을 추가한다.

 

<jsp:param>태그는 기존 파라미터 값을 유지하고 값을 새로 추가한다

요청 URL에 '?name=cbk'가 포함되어 있으므로 body_main.jsp는 이름이 name이고 값이 cbk인 파라미터 한개를 갖는다.

여기서 name을 추가하면 기존 파라미터는 유지된 채 새로운 파라미터가 추가된다.

 

<jsp:param>액션 태그로 추가된 파라미터가 기존 파라미터보다 우선하기 때문에, 포함되는 body_sub.jsp에서 request.getParameter("name")을 실행하면 기존 파라미터가 아닌 <jsp:param>을 통해서 추가된 파라미터의 값을 사용하게 된다.

 

실행화면

대부분 이렇게 실행되는 경우는 없겠지만 <jsp:param>의 특징이니 기억해두기로 하자.

 

 

 

2. include 디렉티브의 처리 방식과 사용법

 

include 디렉티브도 <jsp:include>와 마찬가지로 지정한 페이지를 현재 위치에 포함시켜 주는 기능을 제공한다.

하지만 <jsp:include>와 달리 다른 파일의 내용을 현재 위치에 삽입한 후에 JSP파일을 자바 파일로 변환하고 컴파일하는 방식이다.

 

비교항목	<jsp:include>	include 디렉티브
처리시간	요청 시간에 처리	JSP 파일을 자바 소스로 변환할 때 처리
기능	별도의 파일로 요청 처리 흐름을 이동	현재 파일에 삽입시킴
데이터 전달방법	request 기본 객체나 <jsp:param>을 이용한 파라미터 전달	페이지 내의 변수를 선언한 후, 변수에 값 저장
용도	화면의 레이아웃의 일부분을 모듈화할 때 주로 사용된다.	다수의 JSP 페이지에서 공통으로 사용되는 변수를 지정하는 코드나 저작권과 같은 문장을 포함한다.

 

2-1. include 디렉티브의 처리방식과 사용법

 

<%@ include file="포함할파일" %>

여기서 file 속성은 include디렉티브를 사용하여 포함할 파일의 경로를 나타낸다.

 

include 디렉티브의 처리방식

 

includer.jsp

<% int number = 10; %>

<%@ include file="/chap07/includee.jspf" %>

공통변수 DATAFOLDER = "<%= dataFolder %>"

해당 코드를 보면 선언하지 않은 변수인 dataFolder를 사용하는 것을 확인 할 수 있다. 이 dataFolder변수를 선언하는 코드는 includee.jspf파일에 있다.

 

 

includee.jspf

includer.jsp에서 지정한 번호: <%= number %>
<p>
<%	String dataFolder = "c:\\data"; %>

 

includer.jsp를 실행하면 먼저 includer.jsp의 include디렉티브부분의 includee.jspf가 삽입된다. 해당 파일에서 선언한 변수(dataFolder)를 삽입하는 JSP(includer.jsp)에서 사용할 수 있게 되는 것이다.

 

includer.jsp 실행결과

 

 

2-2. include 디렉티브의 활용

 

include 디렉티브는 코드차원에서 포함되기 때문에 <jsp:include>액션 태그와는 다른용도로 사용될 수 있다.

 

1) 모든 JSP페이지에서 사용되는 변수 지정

2) 저작권 표시 같은 간단하면서도 모든 페이지에 중복되는 문장

 

예시

<%@ page contentType = "text/html; charset=utf-8" %>
이 사이트의 모든 저작물의 저작권은 개발진스에게 있습니다.

 

 

2-3. 코드 조각 자동 포함 기능

 

다수의 JSP페이지에서 앞뒤로 같은 파일(ex. 헤더, 푸터)을 include 디렉티브를 사용해서 삽입할 경우 여러 JSP에서 중복된 코드를 작성해주어야 한다. 

중복되는 코드가 많다면 web.xml파일에 다음과 같은 설정 정보를 추가해줌으로 코드 중복을 막을수 있다.

 

<jsp-config>
    <jsp-property-group>
        <url-pattern>/view/*</url-pattern>
        <include-prelude>/common/variable.jspf</include-prelude>
        <include-coda>/common/footer.jspf</include-coda>
    </jsp-property-group>
</jsp-config>

 

각 태그의 의미

jsp-property-grup : JSP의 프로퍼티를 지정함

url-pattern : 프로퍼티를 적용할 JSP 파일의 URL 패턴을 지정

include-prelude : url-pattern 태그에서 지정한 패턴에 해당되는 JSP 파일의 앞에 자동으로 삽입될 파일을 지정

include-coda : url-pattern 태그에서 지정한 패턴에 해당되는 JSP 파일의 뒤에 자동으로 삽입될 파일을 지정

 

 

 

 

3. <jsp:forward>

 

 

<jsp:forward> 액션 태그는 하나의 JSP페이지에서 다른 JSP페이지로 요청 처리를 전달 할 때 사용된다.

 

<jsp:forward>의 요청 흐름

 

1) 웹브라우저의 요청이 from.jsp에 전달

2) form.jsp는 <jsp:forward> 액션태그글 실행

3) <jsp:forward> 액션태그가 실행되면 요청 흐름이 to.jsp로 이동

4) 요청 흐름이 이동할때 from.jsp에서 사용한 request 기본객체와 response 기본객체가 to.jsp로 전달

5) to.jsp는 응답 결과를 생성

6) to.jsp가 생성한 결과가 웹브라우저에 전달

 

 

✔ 중요한점

 

 * from.jsp가 아닌 to.jsp가 생성한 응답 결과가 웹 브라우저에 전달

 * from.jsp에서 사용한 request.response 기본객체가 to.jsp에 그래로 전달

 

 

왜 from.jsp에서 처리하지 않고 요청처리를 넘길까?

보다 간결하고 구조적으로 JSP 프로그래밍을 할 수 있기 때문이다.
웹 애플리케이션을 개발하다 보면 다양한 조건에 따라 처리해야 하는 경우가 발생한다. 이럴 때 <jsp:forward> 액션 태그를 사용하게 되면 각각의 조건을 처리하는 JSP를 분리시켜 기능별로 모듈화 할수 있게 된다.

 

 

3-1. <jsp:forward> 액션 태그의 사용법

 

<jsp:forward>의 기본 문법

<jsp:forward page="이동할페이지"/

 

이동할 페이지는 웹 어플리케이션 내에서의 경로를 나타내며 직접 값을 지정하거나 표현싱의 결과를 값으로 지정할수 있다.

 

<jsp:forward page="to.jsp"/> 
<%  String uri="to.jsp"; %>
<jsp:forward page="<%=uri%>"/

 

 

 

from.jsp

<body>
    이페이지는 from.jsp가 생성한 것입니다. 
    <jsp:forward page="to.jsp"/>
</body>

 

to.jsp

<body>
	이페이지는 to.jsp가 생성한 것입니다.
</body>

 

from.jsp 실행결과

from.jsp에서 <jsp:forward>를 사용해서 이동한 to.jsp가 생성한 결과가 웹 브라우저에 출력되어 있다.

웹브라우저의 주소는 from.jsp로 최로로 요청을 받은 jsp의 주소이다.

 

<jsp:forward>는 웹 컨테이너 내에서 요청 흐름을 이동시키기 때문에, 웹 브라우저는 요청 처리가 다른 JSP로 이동됐다는 사실을 알지 못한다. 따라서 웹 브라우저는 출력결과가 from.jsp라고 여기지만 실제 출력 결과는 to.jsp이다.

 

 

 

3-2. <jsp:forward> 액션 태그와 출력 버퍼와의 관계

 

<jsp:forward>와 출력 버퍼의 관계

 

1) 처리요청 받은 jsp페이지는 액션태그를 실행하기 전 from.jsp출력결과를 버퍼에 저장 

2) <jsp:forward> 액션태그 실행함으로서 출력버퍼가 비워짐

3) 처리요청을 넘겨받은 to.jsp페이지는 자신의 페이지 출력결과를 버퍼에 저장

4) from.jsp출력결과 버퍼에 저장된 일부 값 받아와서 출력버퍼에 저장해 브라우저에 응답

 

 

 

3-3. <jsp:forward> 액션 태그의 전형적인 사용법

 

<jsp:forward> 액션 태그를 사용한 간단한 코드 예시

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
  String gorwardPage= null;
 
  //조건에 따라 이동할 페이지를 지정
  if(조건판단1)
  {
    forwardPage="페이지URL1";
  }
  else if(조건판단2)
  {
    forwardPage="페이지URL2";
  }
  else if(조건판단3)
  {
    forwardPage="페이지URL3";
  }
%>
 <jsp:forward page="<%=forwardPage%>"/>

 

 

 

 

4. 정리

 

 

사실 이전 첫번째 프로젝트에서는 이런 기능을 모르고, 헤더를 고정해서 사용했었다.

모든 jsp파일을 작성해서 헤더 부분을 만들었고 그 다음 프로젝트에서는 include를 이용해서 작성했었다.

자세한 내용은 모르고 이런 기능이 있구나 정도로 기계처럼 찍어냈었는데 페이지 모듈화의 개념을 알고 보니.. 얼마나 바보같고 답답스러운 코딩을 했었는가.. 하는 자책이 조금 든다.

5월에 시작하는 개인 프로젝트에서는 모듈화, 코드 조각 자동 포함 기능을 이용한 깔끔한 코드를 작성 할 수 있길 바란다.

 

---

참고자료 : 최범균의 JSP 웹프로그래밍