2 분 소요


회원 관리 웹 애플리케이션(Servlet)

MemberFormServlet - 회원 등록 폼

@WebServlet(name = "memberFormServlet", urlPatterns = "/servlet/members/new-form")
public class MemberFormServlet extends HttpServlet {

    private MemberRepository memberRepository = MemberRepository.getInstance();

    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        response.setContentType("text/html");
        response.setCharacterEncoding("utf-8");

        PrintWriter w = response.getWriter();
        w.write("<!DOCTYPE html>\n" +
        "<html>\n" +
        "<head>\n" +
        " <meta charset=\"UTF-8\">\n" +
        " <title>Title</title>\n" +
        "</head>\n" + 
        "<body>\n" +
        "<form action=\"/servlet/members/save\" method=\"post\">\n" +
            " username: <input type=\"text\" name=\"username\" />\n" +
            " age: <input type=\"text\" name=\"age\" />\n" +
            " <button type=\"submit\">전송</button>\n" +
        ...
        ...

자바 코드로 HTML을 제공하여 회원 정보를 입력할 수 있는 HTML Form을 만들었다.

MemberListServlet - 회원 목록

response.setContentType("text/html");
response.setCharacterEncoding("utf-8");

List<Member> members = memberRepository.findAll();

PrintWriter w = response.getWriter();
w.write("<html>");
w.write("<head>");
w.write(" <meta charset=\"UTF-8\">");
w.write(" <title>Title</title>");
w.write("</head>");
w.write("<body>");
w.write("<a href=\"/index.html\">메인</a>");
w.write("<table>");
w.write(" <thead>");
w.write(" <th>id</th>");
w.write(" <th>username</th>");
w.write(" <th>age</th>");
w.write(" </thead>");
w.write(" <tbody>");

for (Member member : members) {
    w.write(" <tr>");
    w.write(" <td>" + member.getId() + "</td>");
    w.write(" <td>" + member.getUsername() + "</td>");
    w.write(" <td>" + member.getAge() + "</td>");
    w.write(" </tr>");
}
...
...

회원 목록 HTML을 for 루프를 통해서 회원 수 만큼 동적으로 생성하고 응답한다.


템플릿 엔진

서블릿 덕분에 동적으로 원하는 HTML을 만들 수 있었지만, 코드를 보면 매우 복잡하고 비효율적이다. 자바 코드로 HTML을 만드는 것 보다는 HTML 문서에 동적으로 변경해야 하는 부분만 자바 코드를 넣는 것이 더 편할 것이다.
템플릿 엔진을 사용하면 HTML 문서에 필요한 곳만 코드를 적용해서 동적으로 변경할 수 있다.
템플릿 엔진에는 JSP, Thymeleaf, Freemarker, Velocity등이 있다.


회원 관리 웹 애플리케이션(JSP)

new-form.jsp - 회원 등록 폼 JSP

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<form action="/jsp/members/save.jsp" method="post">
    username: <input type="text" name="username" />
    age:      <input type="text" name="age" />
    <button type="submit">전송</button>
</form>
</body>
</html>
  • <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    • JSP 문서는 이렇게 시작해야 한다.
  • 첫 줄을 제외하면 HTML과 똑같다.
  • JSP는 서버 내부에서 서블릿으로 변환되는데, MemberFormServlet과 거의 비슷하게 변환된다.

members.jsp - 회원 목록 JSP

<%@ page import="java.util.List" %>
<%@ page import="hello.servlet.domain.member.MemberRepository" %>
<%@ page import="hello.servlet.domain.member.Member" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%
    MemberRepository memberRepository = MemberRepository.getInstance();
    List<Member> members = memberRepository.findAll();
%>

<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<a href="/index.html">메인</a>
<table>
    <thead>
    <th>id</th>
    <th>username</th>
    <th>age</th>
    </thead>
    <tbody>
<%
for (Member member : members) {
    out.write(" <tr>");
    out.write(" <td>" + member.getId() + "</td>");
    out.write(" <td>" + member.getUsername() + "</td>");
    out.write(" <td>" + member.getAge() + "</td>");
    out.write(" </tr>");
}
%>
    </tbody>
</table>
</body>
</html>

회원 리포지토리를 조회한 결과 List를 사용해서 <tr><td>HTML 태그를 반복해서 출력하고 있다.


서블릿과 JSP의 한계

서블릿으로 개발할 때는 View 화면을 위한 HTML을 만드는 작업이 자바 코드에 섞여 복잡했다.
JSP를 사용한 덕분에 View 화면을 생성하는 HTML 작업을 복잡하지 않게 수행할 수 있었고, 중간에 동적으로 변경이 필요한 부분만 자바 코드를 적용했다.
하지만, JAVA 코드, 데이터를 조회하는 리포지토리 등등 다양한 코드가 모두 JSP에 노출되어 JSP가 너무 많은 역할을 하게 된다.
이러한 문제점을 보완하기 위해 MVC 패턴이 등장했다.


<출처 : 인프런 - 스프링 MVC 1편 : 백엔드 웹 개발 핵심 기술(김영한)>

댓글남기기

참고