본문 바로가기
Java/Servlet & JSP

JSP) 페이지 재사용 - include 처리

by 박채니 2022. 6. 18.

안녕하세요, 코린이의 코딩 학습기 채니 입니다.

 

개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.

페이지 재사용 - include 처리

<li><a href="/web2/jsp/main1.jsp">페이지재사용 - include 처리</a></li>

 

main1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>페이지재사용</title>
</head>
<body>
	<header>
		<h1>Hello Web</h1>
		<nav>
			<ul>
				<li><a href="/web2/jsp/main1.jsp">main1</a></li>
				<li><a href="/web2/jsp/main2.jsp">main2</a></li>
			</ul>
		</nav>
	</header>
	<main>
		<h2>main1</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus fugit odio magni ducimus quas maiores et ipsam totam optio reprehenderit temporibus quis quidem maxime excepturi voluptatibus animi facere dolor ullam.</p>
	</main>
	<footer>
		<p>코린이의 코딩 학습기</p>
	</footer>
</body>
</html>

위와 같은 페이지 구조를 가지고 있다고 가정하였을 때, header 태그 안의 'Hello Web'과 nav태그인 메뉴, 그리고 footer태그 안에 있는 내용 등은 대부분 고정 되어있습니다.

만일, main2 페이지를 만든다고 하였을 때 똑같이 코드를 복사하여 이름만 본문 이름만 'main2'로 변경을 하겠죠.

하지만 이렇게 될 경우, 코드의 중복이 많아지며 추후 메뉴가 하나 추가 되었을 때 모든 페이지의 html을 변경해줘야 하는 번거로움이 있습니다.

 

이런 경우를 대비하여 include로 페이지를 재사용해줄 수 있습니다.

 

header 태그의 내용은 header.jsp에, footer 태그의 내용은 footer.jsp에서 처리해보겠습니다.

 

header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>페이지재사용</title>
</head>
<body>
	<header>
		<h1>Hello Web</h1>
		<nav>
			<ul>
				<li><a href="/web2/jsp/main1.jsp">main1</a></li>
				<li><a href="/web2/jsp/main2.jsp">main2</a></li>
			</ul>
		</nav>
	</header>
	<main>

 

footer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
	</main>
	<footer>
		<p>코린이의 코딩 학습기</p>
	</footer>
</body>
</html>

이렇게 코드를 나눠주었고, main1.jsp에는 아래와 같은 코드만 남아있을 겁니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<h2>main1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus fugit odio magni ducimus quas maiores et ipsam totam optio reprehenderit temporibus quis quidem maxime excepturi voluptatibus animi facere dolor ullam.</p>

 

여기서 include처리를 해줍니다.

<%@ include file="" %>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/jsp/header.jsp" %>
<h2>main1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus fugit odio magni ducimus quas maiores et ipsam totam optio reprehenderit temporibus quis quidem maxime excepturi voluptatibus animi facere dolor ullam.</p>
<%@ include file="/jsp/footer.jsp" %>

이렇게 include를 이용하여 추가를 해주었으며, 페이지 소스를 확인해보겠습니다.

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>페이지재사용</title>
</head>
<body>
	<header>
		<h1>Hello Web</h1>
		<nav>
			<ul>
				<li><a href="/web2/jsp/main1.jsp">main1</a></li>
				<li><a href="/web2/jsp/main2.jsp">main2</a></li>
			</ul>
		</nav>
	</header>
	<main>
<h2>main1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus fugit odio magni ducimus quas maiores et ipsam totam optio reprehenderit temporibus quis quidem maxime excepturi voluptatibus animi facere dolor ullam.</p>

	</main>
	<footer>
		<p>코린이의 코딩 학습기</p>
	</footer>
</body>
</html>

페이지를 쪼개었다가 합쳤는 지 원래 한 페이지였는 지 구분할 수가 없습니다.

 

main2.jsp도 include처리

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/jsp/header.jsp" %>
<h2>main2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis magni nihil quae nam dicta ducimus et quod optio aut facere modi quidem quasi quam laboriosam iusto accusamus at natus maiores?</p>
<%@ include file="/jsp/footer.jsp" %>

 

어떻게 처리가 된건지 확인하기 위해서 지역 서버 파일 디렉토리로 이동해보겠습니다.

(이동방법 : 서버더블클릭 - Open launch configuration - Arguments - VM arguments 상 주소 - work - ... )

우선 head.jsp와 footer.jsp는 .java/.class 파일로 변환되지 않은 것을 확인할 수 있습니다.

main1_jsp.java 파일을 드래그 드랍하여 확인해보겠습니다.

 

public void _jspService(final javax.servlet.http.HttpServletRequest request, final javax.servlet.http.HttpServletResponse response)
      throws java.io.IOException, javax.servlet.ServletException {
..... 코드 생략
      out.write('\r');
      out.write('\n');
      out.write("\r\n");
      out.write("<!DOCTYPE html>\r\n");
      out.write("<html>\r\n");
      out.write("<head>\r\n");
      out.write("<meta charset=\"UTF-8\">\r\n");
      out.write("<title>페이지재사용</title>\r\n");
      out.write("</head>\r\n");
      out.write("<body>\r\n");
      out.write("	<header>\r\n");
      out.write("		<h1>Hello Web</h1>\r\n");
      out.write("		<nav>\r\n");
      out.write("			<ul>\r\n");
      out.write("				<li><a href=\"/web2/jsp/main1.jsp\">main1</a></li>\r\n");
      out.write("				<li><a href=\"/web2/jsp/main2.jsp\">main2</a></li>\r\n");
      out.write("			</ul>\r\n");
      out.write("		</nav>\r\n");
      out.write("	</header>\r\n");
      out.write("	<main>");
      out.write("\r\n");
      out.write("<h2>main1</h2>\r\n");
      out.write("<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus fugit odio magni ducimus quas maiores et ipsam totam optio reprehenderit temporibus quis quidem maxime excepturi voluptatibus animi facere dolor ullam.</p>\r\n");
      out.write("\r\n");
      out.write("	</main>\r\n");
      out.write("	<footer>\r\n");
      out.write("		<p>코린이의 코딩 학습기</p>\r\n");
      out.write("	</footer>\r\n");
      out.write("</body>\r\n");
      out.write("</html>");

_jspService 메소드를 확인해보니, 코드에 작성했던 header.jsp와 footer.jsp가 마치 main1.jsp에 있던 것처럼 처리되어있는 것을 확인할 수 있습니다.

진짜 main1.js 안에 include 되어있는 것을 확인할 수 있습니다. (하나의 서블릿으로 변환)

 

만약 header.jsp에 name이라는 변수를 선언하고, main1.js에서 호출이 가능할까요?

header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String name = "홍길동";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>페이지재사용</title>
</head>
<body>
	<header>
		<h1>Hello Web</h1>
		<nav>
			<ul>
				<li><a href="/web2/jsp/main1.jsp">main1</a></li>
				<li><a href="/web2/jsp/main2.jsp">main2</a></li>
			</ul>
		</nav>
	</header>
	<main>

 

main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/jsp/header.jsp" %>
<h2>main1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus fugit odio magni ducimus quas maiores et ipsam totam optio reprehenderit temporibus quis quidem maxime excepturi voluptatibus animi facere dolor ullam.</p>
<p><%= name %></p>
<%@ include file="/jsp/footer.jsp" %>

가능합니다. 이번에도 main1_jsp.java 파일을 확인해보겠습니다.

 

public void _jspService(final javax.servlet.http.HttpServletRequest request, final javax.servlet.http.HttpServletResponse response)
      throws java.io.IOException, javax.servlet.ServletException {
..... 코드 생략
	String name = "홍길동";

      out.write("\r\n");
      out.write("<!DOCTYPE html>\r\n");
      out.write("<html>\r\n");
      out.write("<head>\r\n");
      out.write("<meta charset=\"UTF-8\">\r\n");
      out.write("<title>페이지재사용</title>\r\n");
      out.write("</head>\r\n");
      out.write("<body>\r\n");
      out.write("	<header>\r\n");
      out.write("		<h1>Hello Web</h1>\r\n");
      out.write("		<nav>\r\n");
      out.write("			<ul>\r\n");
      out.write("				<li><a href=\"/web2/jsp/main1.jsp\">main1</a></li>\r\n");
      out.write("				<li><a href=\"/web2/jsp/main2.jsp\">main2</a></li>\r\n");
      out.write("			</ul>\r\n");
      out.write("		</nav>\r\n");
      out.write("	</header>\r\n");
      out.write("	<main>");
      out.write("\r\n");
      out.write("<h2>main1</h2>\r\n");
      out.write("<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus fugit odio magni ducimus quas maiores et ipsam totam optio reprehenderit temporibus quis quidem maxime excepturi voluptatibus animi facere dolor ullam.</p>\r\n");
      out.write("<p>");
      out.print( name );
 ..... 코드 생략

어차피 하나의 서블릿으로 변환되고 메소드가 호출되는 것이기 때문에 name 변수를 선언, 호출이 당연히 가능합니다.

 

그렇다면 header.jsp에 script태그 안에 있는 내용들도 main1.jsp에서 사용할 수 있을까요?

header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String name = "홍길동";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>페이지재사용</title>
<script>
const num = 123;
</script>
</head>
<body>
	<header>
		<h1>Hello Web</h1>
		<nav>
			<ul>
				<li><a href="/web2/jsp/main1.jsp">main1</a></li>
				<li><a href="/web2/jsp/main2.jsp">main2</a></li>
			</ul>
		</nav>
	</header>
	<main>

 

main1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/jsp/header.jsp" %>
<h2>main1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus fugit odio magni ducimus quas maiores et ipsam totam optio reprehenderit temporibus quis quidem maxime excepturi voluptatibus animi facere dolor ullam.</p>
<p><%= name %></p>
<script>
console.log(num);
</script>
<%@ include file="/jsp/footer.jsp" %>

당연히 출력이 됩니다. script 태그는 브라우저에 가서 실행되는 코드이고, 브라우저는 HTML 코드를 받아 화면에 랜더링 해주는 것이기 때문에 당연히 console에 123이 출력됩니다.

 

 

저작자표시

'Java > Servlet & JSP' 카테고리의 다른 글

JSP) SQL과 함께 사용하기 (접속 테스트 및 파일 구조)  (0) 2022.06.20
JSP) JSP에 데이터 전달 (setAttribute, getAttribute)  (0) 2022.06.20
JSP) 분기처리 - if문/switch문/반복처리  (0) 2022.06.17
JSP) JSP Basic - jsp 주석/html 주석, 서버/클라이언트 연산 처리  (0) 2022.06.17
JSP) context path(서블릿 경로) 지정에 대하여  (0) 2022.06.17

관련글

티스토리툴바