37. JSP의 주요 구성 요소 (1)

JSP의 작성법을 배우며 작성할 때 사용할 수 있는 JSP 전용 태그와 그 태그의 용도를 알아보며, JSP로 서블릿 파일을 만들 때 JSP 전용 태그가 어떤 자바 명령문으로 바뀌는지도 알아본다.

JSP를 구성하는 요소는 크게 2가지로 템플릿 데이터와 JSP 전용 태그이다. 템플릿 데이터는 클라이언트로 출력되는 콘텐츠(HTML, 자바스크립트, 스타일 시트, JSON 형식 문자열, XML, 일반 텍스트 등)이고, JSP 전용 태그는 특정 자바 명령문으로 바뀌는 태그이다.

계산기 프로그램을 JSP로 구현하여 계산기 화면을 출력하고, 사용자가 입력한 값을 계산하여 결과를 출력하는 JSP를 만들어본다. web05 프로젝트의 WebContent 폴더에 calc 폴더를 만들고 이 폴더에 Calculator.jsp 파일을 만든다.

<%@ page 
	language="java" 
	contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String v1 = "";
String v2 = "";
String result = "";
String[] selected = {"", "", "", ""};

//값이 있을 때만 꺼낸다.
if (request.getParameter("v1") != null) {
	v1 = request.getParameter("v1");
	v2 = request.getParameter("v2");
	String op = request.getParameter("op");
	
	result = calculate(
				Integer.parseInt(v1), 
				Integer.parseInt(v2), 
				op);
	
	if ("+".equals(op)) {
		selected[0] = "selected";
	} else if ("-".equals(op)) {
		selected[1] = "selected";
	} else if ("*".equals(op)) {
		selected[2] = "selected";
	} else if ("/".equals(op)) {
		selected[3] = "selected";
	}
}
%>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>계산기</title>
</head>
<body>
<h2>JSP 계산기</h2>
<form action="Calculator.jsp" method="get">
	<input type="text" name="v1" size="4" value="<%=v1%>"> 
	<select name="op">
		<option value="+" <%=selected[0]%>>+</option>
		<option value="-" <%=selected[1]%>>-</option>
		<option value="*" <%=selected[2]%>>*</option>
		<option value="/" <%=selected[3]%>>/</option>
	</select> 
	<input type="text" name="v2" size="4" value="<%=v2%>"> 
	<input type="submit" value="=">
	<input type="text" size="8" value="<%=result%>"><br>
</form> 
</body>
</html>
<%! 
private String calculate(int a, int b, String op) {
	int r = 0;
	
	if ("+".equals(op)) {
		r = a + b;	
	} else if ("-".equals(op)) {
		r = a - b;
	} else if ("*".equals(op)) {
		r = a * b;
	} else if ("/".equals(op)) {
		r = a / b;
	}
	
	return Integer.toString(r);
}
%>

이후 http://localhost:9999/web05/calc/Calculator.jsp 링크를 통해 웹 브라우저에 Calculator.jsp를 요청(GET 요청)한다(그림 1).

계산기 화면에서 값을 입력한 뒤 '=' 버튼을 누르면, 다시 계산기 입력 화면이 출력되면서 계산 결과가 출력된다(그림 2).

form 태그의 action 속성값을 Calculator.jsp로 설정했기 때문에 계산 결과도 이 JSP가 처리한다.

- 템플릿 데이터

템플릿 데이터는 클라이언트로 출력되는 콘텐츠로 HTML, XML, 자바스크립트, 스타일 시트, JSON 문자열, 일반 텍스트 등이 있다. 템플릿 데이터를 작성하기 위한 별도의 문법없이 문서 작성하듯 클라이언트로 출력할 내용을 작성하면 된다. 템플릿 데이터는 서블릿 코드를 생성할 때 출력문으로 바뀐다.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>계산기</title>
</head>
<body>
<h2>JSP 계산기</h2>
<form action="Calculator.jsp" method="get">
	<input type="text" name="v1" size="4" value="<%=v1%>"> 
	<select name="op">
		<option value="+" <%=selected[0]%>>+</option>
		<option value="-" <%=selected[1]%>>-</option>
		<option value="*" <%=selected[2]%>>*</option>
		<option value="/" <%=selected[3]%>>/</option>
	</select> 
	<input type="text" name="v2" size="4" value="<%=v2%>"> 
	<input type="submit" value="=">
	<input type="text" size="8" value="<%=result%>"><br>
</form> 
</body>
</html>

Calculator.jsp에서의 출력문, 즉 템플릿 데이터이다.

JSP 엔진이 Calculator.jsp로부터 만든 자바 서블릿 파일의 소스를 확인한다.

C:\javaide\workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\work\Catalina\localhost\web05\org\apache\jsp\calc

경로에 있는 Calculator_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("    \n");
      out.write("<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \n");
      out.write("	\"http://www.w3.org/TR/html4/loose.dtd\">\n");
      out.write("<html>\n");
      out.write("<head>\n");
      out.write("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">\n");
      out.write("<title>계산기</title>\n");
      out.write("</head>\n");
      out.write("<body>\n");
      out.write("<h2>JSP 계산기</h2>\n");
      out.write("<form action=\"Calculator.jsp\" method=\"get\">\n");
      out.write("	<input type=\"text\" name=\"v1\" size=\"4\" value=\"");
      out.print(v1);
      out.write("\"> \n");
      out.write("	<select name=\"op\">\n");
      out.write("		<option value=\"+\" ");
      out.print(selected[0]);
      out.write(">+</option>\n");
      out.write("		<option value=\"-\" ");
      out.print(selected[1]);
      out.write(">-</option>\n");
      out.write("		<option value=\"*\" ");
      out.print(selected[2]);
      out.write(">*</option>\n");
      out.write("		<option value=\"/\" ");
      out.print(selected[3]);
      out.write(">/</option>\n");
      out.write("	</select> \n");
      out.write("	<input type=\"text\" name=\"v2\" size=\"4\" value=\"");
      out.print(v2);
      out.write("\"> \n");
      out.write("	<input type=\"submit\" value=\"=\">\n");
      out.write("	<input type=\"text\" size=\"8\" value=\"");
      out.print(result);
      out.write("\"><br>\n");
      out.write("</form> \n");
      out.write("</body>\n");
      out.write("</html>\n");
	...
 }

서블릿 소스의 _jspService()를 보면, JSP 엔진은 템플릿 데이터의 각 라인에 대해 출력문을 만들었다. 만약 개발자가 직접 out.write()를 사용하여 직접 출력문을 작성하면 매우 번거롭고 힘들겠지만, JSP를 도입하면 HTML 출력과 같은 번거로운 일을 JSP 엔진이 처리한다.

참고도서 : https://freelec.co.kr/book/1674/

[열혈강의] 자바 웹 개발 워크북

freelec.co.kr

'교재 실습 > 자바 웹 개발 워크북' 카테고리의 다른 글

39. JSP의 주요 구성 요소 (3) (0)	2022.02.05
38. JSP의 주요 구성 요소 (2) (0)	2022.02.04
36. 뷰 컴포넌트와 JSP (2) (0)	2022.02.02
35. 뷰 컴포넌트와 JSP (1) (0)	2022.02.01
34. MVC 이해하기 (0)	2022.01.31

코딩 데이터베이스

37. JSP의 주요 구성 요소 (1)

'교재 실습 > 자바 웹 개발 워크북' 카테고리의 다른 글

댓글

티스토리툴바

37. JSP의 주요 구성 요소 (1)

'교재 실습 > 자바 웹 개발 워크북' 카테고리의 다른 글

관련글

댓글

티스토리툴바