ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [Camel][JSP] 페이지 모듈화 ( <jsp:include> )
      JSP 2020. 3. 11. 20:24

      페이지 모듈화

       웹 사이트를 구축할 때 페이지는 동일한 상단, 좌측 메뉴와 하단 푸터를 갖는 경우가 많습니다. 이때 <jsp:include> 액션 태그와 include 디렉티브를 이용해서 공통 화면을 모듈화 함으로써 코드의 중복을 방지 할 수 있습니다. 

       

      1. <jsp:include> 액션태그

      <jsp:include>액션태그는 지정한 페이지를 태그가 위치한 부분에 포함시킬 때 사용됩니다. <jsp:include> 액션태그의 사용방법은 아래와 같습니다. 

      <jsp:include page="example.jsp" flush="true"/>

       flush 속성은 지정한 jsp 페이지를 실행하기 전에 출력 버퍼를 Flush 할지 말지를 결정합니다. 위의 코드는 지정한 jsp페이지를 실행하면 출력 버퍼에 저장된 내용을 Flush 한 뒤 example.jsp 페이지로 흐름이 이동한다는 것입니다. 출력 버퍼를 Flush 한다는 것은 출력 버퍼에 저장되어 있는 내용을 웹 브라우저에 전달한다는 것입니다. 이때 전달 되는 내용은 HTTP 헤더 정보를 포함하기 때문에 이후 setHeader 메소드를 사용해 헤더 정보를 추가해도 반영되지 않습니다. 

       

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

       웹 페이지의 공통 부분을 별도 모듈로 분리하지 않고 코딩하는 것이 기술적으로 문제가 되지는 않지만, 동일한 구성을 가지는 JSP 페이지를 수십개 만들어야 한다면 유지보수 단계에서 엄청난 비용이 발생하게 됩니다. 공통된 부분의 변경이 발생한다면 모든 JSP 페이지의 공통된 부분을 수정해주어야 하기 때문입니다. 

       

       하지만 <jsp:include> 액션태그를 사용하면 이러한 문제를 어느정도 해결할 수 있습니다. 공통되는 부분을 별도의 JSP 페이지로 작성한 후, <jsp:include> 액션태그를 사용해 그 페이지를 지정한 위치에 포함시키는 방법입니다.  

      <%@ page contentType="text/html; charset=utf-8" %>
<html>
<head><title> 액션태그 활용 </title></head>
<body>

<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">
    		내용 입력
    	</td>
</tr>

<tr>
	<td colspan="2">
    		<jsp:include page="/module/bottom.jsp" flush="false" />
    	</td>
</tr>
</body>
</html>

       

       

      <jsp:include> 액션태그 활용 중복영역 처리

       

      <jsp:param> 태그

       <jsp:param> 태그는 <jsp:include> 액션태그를 활용해 포함될 페이지에 파라미터를 추가하는 태그입니다. <jsp:param> 태그는 <jsp:include> 액션태그의 자식태그로 표현됩니다. 사용 방법은 아래와 같습니다.

      <%@ page contentType="text/html; charset=utf-8" %>
<%
	request.setCharacterEncoding("utf-8");
%>
<html>
<head><title> 액션태그 활용 </title></head>

<body>
<% String str = "value2"; %>
<table width="400" border="1" cellpadding="0" cellspacing="0">
<tr>
	<td colspan="2">
    		<jsp:include page="/module/top.jsp" flush="false" >
            		<jsp:param name="parameter1" value="value1" />
                	<jsp:param name="parameter2" value="<%=str%>" />
             	</jsp:include>
    	</td>
</tr>

<tr>
	<td width="100" valign="top">
    		<jsp:include page="/module/left.jsp" flush="false" />
    	</td>
    	<td width="300" valign="top">
    		내용 입력
    	</td>
</tr>

<tr>
	<td colspan="2">
    		<jsp:include page="/module/bottom.jsp" flush="false" />
    	</td>
</tr>
</body>
</html>

       <jsp:param> 태그는 동일한 이름의 파라미터가 존재할 경우 기존 파라미터 값을 바꾸는 것이 아니라 기존의 값을 유지하고 새로운 값을 추가합니다. URL이 아래와 같이 파라미터를 갖고 있게 입력되었고, <jsp:param> 태그를 사용해 이름이 parameter1인 파라미터를 포함될 페이지에 추가하면 기존 파라미터는 사라지지 않고 새로운 파라미터가 추가되는 것입니다. 

      http://localhost:8080/ch2/examples.jsp?parameter1=value3

       <jsp:param> 태그를 사용해 추가되는 파라미터는 기존에 존재하던 파라미터보다 우선순위가 높습니다. 그렇기 때문에 <jsp:include> 액션태그를 사용해 포함시킬 JSP 페이지에서 request.getParameter("parameter1") 메소드를 실행하면 value1이 아닌 value3을 반환하게 됩니다. 그리고 request.getParameterValues("parameter1") 메소드를 사용하면 새로 추가된 파라미터뿐만 아니라 기존의 파라미터까지도 반환합니다.

       

       단, <jsp:param>를 사용할 때 한가지 주의할 점은 <jsp:param> 태그를 사용해 설정한 파라미터 값이 올바르게 전달되기 위해서 request.setCharacterEncoding 메소드를 사용해 알맞은 캐릭터 셋으로 지정을 해줘야 합니다.  

       

       

      2. include 디렉티브 

       include 디렉티브도 <jsp:include>액션태그처럼 JSP페이지를 현재 위치에 포함시키는 기능을 합니다. 하지만 include 디렉티브의 경우는 포함시키는 방식에 차이가 있습니다. include 디렉티브는 다른 파일의 내용을 현재 위치에 삽입한 후 JSP 파일을 Java파일로 변환한 뒤 컴파일하는 방식입니다. 

       

       include 디렉티브의 사용방법은 아래와 같습니다. 

      <%@ include file="examples.jspf" %>

      main.jsp

      <%@ page contentType="text/html; charset=utf-8" %>
<html>
<head><title> include 디렉티브 활용 </title></head>
<body>

<%
	int num = 10;
%>

<%@ include file = "/examples.jspf" %>

공통 변수 dataPath : "<%= dataPath %>"

</body>
</html>

      examples.jspf

      <%@ page contentType="text/html; charset=utf-8" %>
 main.jsp 에서 선언한 수 : <%= num %>
 <p>
 <%
 	String dataPath = "C:\\data";
 %>

       

       

       위의 예제 코드를 실행해 보면 알 수 있듯이 include 디렉티브는 <jsp:include> 액션태그와는 다르게 코드 차원에서 삽입이 이루어지는 것이기 때문에 examples.jsp 파일에서 선언한 변수를 main.jsp 파일에서 사용할 수 있습니다. 

       

       include 디렉티브는 코드 차원에서 포함된다는 차이점으로 인해 <jsp:include> 액션태그와는 다소 다른 용도로 사용이 되고있습니다. 주로 모든 JSP 페이지에서 사용되는 변수를 지정하거나, 간단하면서 모든 페이지에서 중복되는 문장을 표현할 때 사용합니다. 

       

      <jsp:include> 와 include 디렉티브 비교

        <jsp:include> include 디렉티브
      처리시간 요청 시간에 처리 JSP 파일을 Java 소스코드로 변환할때 처리 
      기능 별도의 파일로 요청 처리 흐름을 이동 현재 파일에 삽입
      데이터 전달 방법

      request 객체를 사용한 파라미터 전달

      <jsp:param> 태그를 이용한 파라미터 전달

      		 페이지 내부에서 변수를 선언한 후 변수에 값 저장
      용도 화면의 레이아웃 이부를 모듈화할때 사용

      공통변수를 지정할때 사용

      간단하면서 중복이 많은 문장 표현할 때 사용

       

      저작자표시 비영리

      'JSP' 카테고리의 다른 글

      [Camel][JSP] CookieBox 클래스 & 로그인 페이지  (0) 2020.03.13
      [Camel][JSP] 쿠키 (Cookie) in JSP  (0) 2020.03.12
      [Camel][JSP] 에러(Error) 처리, 에러 페이지 (Error Page)  (0) 2020.03.12
      [Camel][JSP] 요청 흐름 제어 ( <jsp:forward> )  (0) 2020.03.11
      [Camel][JSP] JSP의 기본객체  (0) 2020.03.09

      관련글 관련글 더보기

      댓글

    Camel`s Tistory.

    티스토리툴바