현실적인 개발자 로드맵 - JSP 모델2
# 포스팅에서 사용된 코드의 전체 코드는 https://github.com/ITVillage-Kevin/roadmap-jsp 에서 다운로드 받으실 수 있습니다.
# 해당 포스팅은 IT Village 유튜브 채널(https://www.youtube.com/channel/UCSIvsntWA8aJ3Apoc7kTxig)에서도 시청하실 수 있습니다.
안녕하세요, Kevin입니다. 지난 시리즈에 이어 개발자 로드맵 이야기를 계속 해보겠습니다. 지난 시간에 어떤 이야기를 했는지 기억나시나요?^^ 지난 시간에는 Java 개발자로 입문하면서 필수적으로 배워야 할 것들이 무엇인지 JSP Model1 방식으로 구현한 TO DO 애플리케이션을 통해서 알아보았습니다. 지난 시간까지 알아본 바로는 아래와 같은 기술들을 배워야 한다고 했죠?
[JSP 모델1 방식에서 추출한 기술]
자, 그럼 오늘은 JSP Model1 방식으로 만든 TODO 애플리케이션을 조금 더 개선 해보면서 어떤 기술들을 더 알아야하는지 알아보겠습니다.
클라이언트 + 서버 통합(JSP 모델2)
지난 시간과 비슷하게 오늘은 JSP 모델2 방식의 구성도를 먼저 보도록 하겠습니다.
[JSP 모델2 구성도]
JSP 모델1의 구성도와 어떤 차이가 있는지 느껴지시나요? 모델1의 경우 JSP에서 클라이언트의 요청을 직접 받고 클라이언트에게 응답으로 돌려줄 View 까지 생성했더랬습니다. 그야말로 JSP가 모든 일을 다 하는거라고 보시면 됩니다. 그렇기 때문에 소스 코드 상에서도 요청을 처리하는 Java 코드가 뷰를 구성하는 JSP 코드에 구현 되어 있는것을 보실 수 있었는데요.
모델1에서 요청을 처리하는 코드와 뷰를 구성하는 코드가 JSP에 모두 구성되어 있는 반면에 JSP 모델2 방식은 Servlet이라는 자바 클래스가 요청을 받아서 뷰에 표시될 데이터들만 JSP에게 넘겨 주고, JSP는 이 데이터들을 HTML 코드에 잘 보이도록 적절하게 랜더링한 후, 클라이언트에게 넘겨줍니다.
한마디로 말해서 각자의 할 일은 각자 하자는 구성 방식이라고 볼 수 있습니다. 요청을 처리하는 역할은 Servlet이 맡고 , JSP는 뷰로써의 역할만 하자는 역할 분리가 이루어진셈입니다.
실제 코드를 보면 조금 더 이해 하시기 쉬울겁니다. 소스 코드를 한번 볼까요?
==== web.xml ====
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<display-name>To Do JSP</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>Todo</servlet-name>
<servlet-class>com.itvillage.servlet.TodoServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Todo</servlet-name>
<url-pattern>/todo</url-pattern>
</servlet-mapping>
</web-app>
모델2 방식에서는 클라이언트의 요청을 처리하게 되는 Servlet 설정 정보를 위와 같이 web.xml에 설정해주어야합니다. 이렇게 Servlet 클래스와 URL의 매핑을 해주어야지만 클라이언트에서 /todo URL로 요청을 보냈을때 /todo URL에 매핑되는 TodoServlet 클래스가 요청을 처리할 수 있습니다.
==== ToDoServlet ====
package com.itvillage.servlet;
import com.itvillage.vo.ToDo;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@WebServlet(name = "TodoServlet")
public class TodoServlet extends HttpServlet {
// Database를 대신한다.
private List<ToDo> todoList;
@Override
public void init() throws ServletException {
super.init();
this.todoList = new ArrayList<>();
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
System.out.println("Hello Servlet doPost!");
String todoName = request.getParameter("todoName");
String todoDate = request.getParameter("todoDate");
todoList.add(new ToDo(todoName, todoDate));
RequestDispatcher dispatcher =
request.getRequestDispatcher("/todo_model2.jsp");
request.setAttribute("todoList", todoList);
dispatcher.forward(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("Hello Servlet doGet!");
RequestDispatcher dispatcher =
request.getRequestDispatcher("/todo_model2.jsp");
request.setAttribute("todoList", todoList);
dispatcher.forward(request, response);
}
}
클라이언트에게서 받은 요청을 처리하는 TodoServlet 클래스입니다. doPost()에서 할 일을 등록한 후, 등록된 할 일 데이터를 JSP로 넘겨주고 doGet()에서는 단순히 등록된 할일을 JSP로 넘겨줍니다.
doPost() 안에 있는 소스 코드들은 이전 시간에 봤던 모델1 방식에서 result_model1.jsp 안에 포함되어 있던 코드들인데 이렇게 TodoServlet 클래스 안으로 분리되었습니다.
==== todo_model2.jsp ====
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<html>
<head>
<meta http-equiv="Content-Language" content="ko"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>TODO 등록</title>
<style>
#todoList {
border: 1px solid #8F8F8F;
width: 500px;
border-collapse: collapse;
}
th, td {
padding: 5px;
border: 1px solid #8F8F8F;
}
</style>
<script>
function registerTodo(){
var todoName = document.getElementById("todoName").value;
var todoDate = document.getElementById("todoDate").value;
if(!todoName){
alert("할일을 입력해주세요.");
return false;
}
if(!todoDate){
alert("날짜를 입력해주세요.");
return false;
}
var form = document.getElementById("todoForm");
form.submit();
}
</script>
</head>
<body>
<h3>TO DO 등록</h3>
<div>
<form id="todoForm" method="POST" action="/todo">
<input type="text" name="todoName" id="todoName" value=""/>
<input type="date" name="todoDate" id="todoDate" value=""/>
<input type="button" id="btnReg" value="등록" onclick="registerTodo()"/>
</form>
</div>
<div>
<h4>TO DO List</h4>
<table id="todoList">
<thead>
<tr>
<td align="center">todo name</td>
<td align="center">todo date</td>
</tr>
</thead>
<tbody>
<c:choose>
<c:when test="${fn:length(todoList) == 0}">
<tr>
<td align="center" colspan="2">할 일이 없습니다.</td>
</tr>
</c:when>
<c:otherwise>
<c:forEach items="${todoList}" var="todo">
<tr>
<td>${todo.todoName}</td>
<td align="center">${todo.todoDate}</td>
</tr>
</c:forEach>
</c:otherwise>
</c:choose>
</tbody>
</table>
</div>
</body>
</html>
todo_model2.jsp는 todo_model1.jsp와 변한게 없으므로 넘어가겠습니다.
자, 그럼 지난 시간과 마찬가지로 이번에도 우리가 배워야 할 기술들을 추출해 보겠습니다. 눈치채신 분도 계시겠지만 이번 시간에 변화 된것은 딱 한가지 밖에 없습니다. 바로 Servlet입니다. 저희가 배워야 될 기술에 Servlet만 포함시키면 됩니다.
"오래된 방식인데 꼭 배워야 해?"라고 말씀하시는 분들이 많겠지만 일단 포함을 시켜보겠습니다. Servlet이 포함된 추가된 로드맵은 다음과 같겠죠?
[JSP 모델2 방식에서 추가된 개발자 로드맵]
자, 그럼 Servlet은 과연 배워야 할까요? Servlet을 사용하고 있는 회사라면 당연히 배워야됩니다. 하지만 아직도 Servlet을 사용하고 있는 기업이라면.. 음.. 저 멀리 아주 멀리, 시대에 동 떨어진 회사라고 봐도 될 것 같습니다.
Servlet을 여전히 메인 방식으로 사용하고 있는 회사라면 과감하게 입사를 포기하든가 아니면 입사하셔서 여러분이 직접 회사를 바꾸시면 되겠습니다. ^^;
오늘은 이쯤에서 포스팅을 마치기로 하고, 다음 시간에는 오늘 포스팅 한 소스 코드를 살짝만 더 개선해보도록 하겠습니다.
그럼 좋은 주말 보내세요~
