[스프링 MVC 1편] 서블릿, JSP, MVC 패턴
포스트
취소

[스프링 MVC 1편] 서블릿, JSP, MVC 패턴

서블릿, JSP, MVC 패턴

  • 서블릿, JSP, MVC 패턴의 차이를 알기 위해 가상의 서비스를 구상해보자.
  • 회원을 관리하는 웹 애플리케이션을 만들어보자.
    • 도메인
      • 이름 : username
      • 나이 : age 기능 요구사항
      • 회원 저장
      • 회원 목록 조회

회원 도메인 모델

  • id 는 Member 를 회원 저장소에 저장하면 회원 저장소가 할당한다.
package hello.servlet.domain.member;

import lombok.Getter;
import lombok.Setter;

@Getter
@Setter
public class Member {
    private Long id;
    private String username;
    private int age;

    public Member() {}
    public Member(String username, int age) {
        this.username = username;
        this.age = age;
    }
}

회원 저장소

  • 회원 저장소는 싱글톤 패턴을 적용했다.
  • 스프링을 사용하면 스프링 빈으로 등록하면 된다.
    • 지금은 최대한 스프링 없이 순수 서블릿 만으로 구현하는 것이 목적이다.
  • 싱글톤 패턴은 객체를 단 하나만 생생해서 공유해야 하므로 생성자를 private 접근자로 막아둔다.
package hello.servlet.domain.member;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * 동시성 문제가 고려되어 있지 않음, 실무에서는 ConcurrentHashMap, AtomicLong 사용 고려
 */
public class MemberRepository {
    private static Map<Long, Member> store = new HashMap<>(); //저장소, static 사용
    private static long sequence = 0L; //회원 번호, static 사용
    private static final MemberRepository instance = new MemberRepository();
    
    public static MemberRepository getInstance() {
        return instance;
    }
    private MemberRepository() {}

    //회원 저장
    public Member save(Member member) {
        member.setId(++sequence);
        store.put(member.getId(), member);
        return member;
    }
    
    //Id를 통해 회원 조회하기
    public Member findById(Long id) {
        return store.get(id);
    }
    
    //모든 회원 조회하기
    public List<Member> findAll() {
        return new ArrayList<>(store.values());
    }
    
    //저장소 초기화
    public void clearStore() {
        store.clear();
    }
}

회원 저장소 테스트 코드

  • MemberRepository에서 Ctrl + Shift + T를 눌러서 테스트를 생성 후 실행하자.
package hello.servlet.domain.member;

import org.junit.jupiter.api.AfterEach;
import org.junit.jupiter.api.Test;
import java.util.List;
import static org.assertj.core.api.Assertions.*;

class MemberRepositoryTest {
    MemberRepository memberRepository = MemberRepository.getInstance();

    @AfterEach
    void afterEach() {
        memberRepository.clearStore();
    }

    @Test
    void save() {
        //given
        Member member = new Member("hello", 20);
        //when
        Member savedMember = memberRepository.save(member);
        //then
        Member findMember = memberRepository.findById(savedMember.getId());
        assertThat(findMember).isEqualTo(savedMember);
    }

    @Test
    void findAll() {
        //given
        Member member1 = new Member("member1", 20);
        Member member2 = new Member("member2", 30);
        memberRepository.save(member1);
        memberRepository.save(member2);
        //when
        List<Member> result = memberRepository.findAll();
        //then
        assertThat(result.size()).isEqualTo(2);
        assertThat(result).contains(member1, member2);
    }
}

서블릿으로 웹 애플리케이션 만들기

  • 서블릿으로 회원 관리 웹 애플리케이션을 만들어보자.

회원 등록 폼

package hello.servlet.web.servlet;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet(name = "memberFormServlet", urlPatterns = "/servlet/members/new-form")
public class MemberFormServlet extends HttpServlet {
    @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" +
                        "</form>\n" +
                    "</body>\n" +
                "</html>\n"
        );
    }
}

회원 저장

package hello.servlet.web.servlet;

import hello.servlet.domain.member.Member;
import hello.servlet.domain.member.MemberRepository;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet(name = "memberSaveServlet", urlPatterns = "/servlet/members/save")
public class MemberSaveServlet extends HttpServlet {
    private MemberRepository memberRepository = MemberRepository.getInstance();

    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("MemberSaveServlet.service");

        String username = request.getParameter("username");
        int age = Integer.parseInt(request.getParameter("age"));
        Member member = new Member(username, age);

        System.out.println("member = " + member);

        memberRepository.save(member);
        response.setContentType("text/html");
        response.setCharacterEncoding("utf-8");
        PrintWriter w = response.getWriter();
        w.write(
            "<html>\n" +
                "<head>\n" +
                    "<meta charset=\"UTF-8\">\n" +
                "</head>\n" +
                "<body>\n" +
                    "성공\n" +
                    "<ul>\n" +
                        "<li>id="+member.getId()+"</li>\n" +
                        "<li>username="+member.getUsername()+"</li>\n" +
                        "<li>age="+member.getAge()+"</li>\n" +
                    "</ul>\n" +
                    "<a href=\"/index.html\">메인</a>\n" +
                "</body>\n" +
            "</html>"
        );
    }
}

회원 목록

package hello.servlet.web.servlet;

import hello.servlet.domain.member.Member;
import hello.servlet.domain.member.MemberRepository;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

@WebServlet(name = "memberListServlet", urlPatterns = "/servlet/members")
public class MemberListServlet 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");

        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>");
                        /*
                        w.write("<tr>");
                            w.write("<td>1</td>");
                            w.write("<td>userA</td>");
                            w.write("<td>10</td>");
                        w.write("</tr>");
                        */
                    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>");
                    }
                    w.write("</tbody>");
                w.write("</table>");
            w.write("</body>");
        w.write("</html>");
    }
}

JSP로 웹 애플리케이션 만들기

JSP 라이브러리 추가

  • 스프링 부트 3.0 미만
implementation 'org.apache.tomcat.embed:tomcat-embed-jasper'
implementation 'javax.servlet:jstl'
  • 스프링 부트 3.0 이상
    • 스프링 부트 3.0 이상이면 javax.servlet:jstl 을 제거하고 위 코드를 추가해야 한다.
implementation 'org.apache.tomcat.embed:tomcat-embed-jasper'
implementation 'jakarta.servlet:jakarta.servlet-api' //스프링부트 3.0 이상
implementation 'jakarta.servlet.jsp.jstl:jakarta.servlet.jsp.jstl-api' //스프링부트3.0 이상
implementation 'org.glassfish.web:jakarta.servlet.jsp.jstl' //스프링부트 3.0 이상

JSP 시작

  • JSP에는 처음에 <%@ page contentType="text/html;charset=UTF-8" language="java" %>가 명시되어야 한다.
    • 해당 문서가 JSP 문서라는 것을 의미한다.
    • JSP를 보면 첫 줄을 제외하고는 완전히 HTML와 똑같다. JSP는 서버 내부에서 서블릿으로 변환된다.
  • JSP는 자바 코드를 그대로 다 사용할 수 있다.
    • <%@ page import="hello.servlet.domain.member.MemberRepository" %>
      • 자바의 import 문과 같다.
    • <% ~~ %>
      • 부분에는 자바 코드를 입력할 수 있다.
    • <%= ~~ %>
      • 이 부분에는 자바 코드를 출력할 수 있다.

회원 등록 폼 (src/main/webapp/jsp/members/new-form.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>

회원 저장 (src/main/webapp/jsp/members/save.jsp)

<%@ page import="hello.servlet.domain.member.MemberRepository" %>
<%@ page import="hello.servlet.domain.member.Member" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    //request, response 사용 가능
    MemberRepository memberRepository = MemberRepository.getInstance();
    System.out.println("save.jsp");
    String username = request.getParameter("username");
    int age = Integer.parseInt(request.getParameter("age"));
    Member member = new Member(username, age);
    System.out.println("member = " + member);
    memberRepository.save(member);
%>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        성공
        <ul>
            <li>id=<%=member.getId()%></li>
            <li>username=<%=member.getUsername()%></li>
            <li>age=<%=member.getAge()%></li>
        </ul>
        <a href="/index.html">메인</a>
    </body>
</html>

회원 목록 (src/main/webapp/jsp/members.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>

서블릿과 JSP의 한계

  • 서블릿으로 개발할 때는 뷰(View) 화면을 위한 HTML을 만드는 작업이 자바 코드에 섞여서 지저분하고 복잡했다.
  • JSP를 사용한 덕분에 어느 정도 깔끔하게 분리가 되긴 했다.
    • JSP가 뷰를 생성하는 HTML 작업을 깔끔하게 가져갔다.
    • 중간중간 동적으로 변경이 필요한 부분에만 자바 코드를 적용했다.
    • 그래도 아직 몇 가지 문제가 남아있다.
  • JSP로 HTML 작업을 분리했어도 그것이 완벽하게 분리된 것은 아니다.
    • 비즈니스 로직과 결과를 HTML로 보여주기 위한 뷰 영역이 섞여있다.
    • 즉, JSP가 너무 많은 역할을 한다.
  • MVC 패턴의 등장
    • 비즈니스 로직은 서블릿 처럼 다른곳에서 처리할 필요가 있다.
    • 또한, JSP는 목적에 맞게 HTML로 화면(View)을 그리는 일에만 집중하도록 처리해야 한다.
    • 이를 해결하기 위해 MVC 패턴이 등장했다.

MVC 패턴 - 개요

너무 많은 역할

  • 서블릿과 JSP만으로 비즈니스 로직과 뷰 랜더링을 모두 처리하기에는 각 파일에 너무 많은 역할이 필요하고 유지보수 또한 어려워진다.

변경의 라이프 사이클

  • 서블릿과 JSP 사이에 변경의 라이프 사이클이 다르다.
  • 무조건은 아니지만 UI와 비즈니스 로직을 수정할 일은 각각 다르게 발생할 확률이 높다.
    • 즉, 각각의 작업에 대해서 영향이 끼쳐서는 안 된다.
    • 그런데 현재의 상황에서는 라이프 사이클이 다른 것을 하나의 코드로 관리하다 보니 영향이 발생할 확률이 존재한다.

기능 특화

  • JSP 같은 뷰 템플릿은 화면을 렌더링 하는데 최적화 되어 있다.
  • 최적화되어 있다라는 것은 해당 업무만 담당하는 것이 가장 효과적임을 의미한다.

Model View Controller

  • MVC 패턴은 컨트롤러(Controller)와 뷰(View)라는 영역으로 서로 역할을 나눈 것을 말한다.
    • 하나의 서블릿이나, JSP로 처리하던 것을 역할에 따라서 다시 나눈 것이다.
  • 모델, 뷰, 컨트롤러
    • 모델
      • 뷰에 출력할 데이터를 담아둔다.
      • 뷰가 필요한 데이터를 모두 모델에 담아서 전달해준다.
        • 덕분에 뷰는 비즈니스 로직이나 데이터 접근을 몰라도 되고, 화면을 렌더링 하는 일에 집중할 수 있다.
      • 모델에 담겨있는 데이터를 사용해서 화면을 그리는 일에 집중한다.
      • 여기서는 HTML을 생성하는 부분을 말한다.
    • 컨트롤러
      • HTTP 요청을 받아서 파라미터를 검증하고, 비즈니스 로직을 실행한다.
      • 뷰에 전달할 결과 데이터를 조회해서 모델에 담는다.
  • 컨트롤러에 비즈니스 로직을 둘 수도 있지만, 이렇게 되면 컨트롤러가 너무 많은 역할을 담당한다.
    • 그래서 일반적으로 비즈니스 로직은 서비스(Service)라는 계층을 별도로 만들어서 처리한다.
    • 그리고 컨트롤러는 비즈니스 로직이 있는 서비스를 호출하는 역할을 담당한다.
    • 참고로 비즈니스 로직을 변경하면 비즈니스 로직을 호출하는 컨트롤러의 코드도 변경될 수 있다.

MVC 패턴 - 적용

  • 서블릿을 컨트롤러로 사용하고, JSP를 뷰로 사용해서 MVC 패턴을 적용해보자.
  • Model은 HttpServletRequest 객체를 사용한다.
  • request는 내부에 데이터 저장소를 가지고 있는데, request.setAttribute(), request.getAttribute()를 사용하면 데이터를 보관하고, 조회할 수 있다.

회원 등록

  • 컨트롤러
package hello.servlet.web.servletmvc;

import jakarta.servlet.RequestDispatcher;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet(name = "mvcMemberFormServlet", urlPatterns = "/servlet-mvc/members/new-form")
public class MvcMemberFormServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String viewPath = "/WEB-INF/views/new-form.jsp";
        RequestDispatcher dispatcher = request.getRequestDispatcher(viewPath);
        dispatcher.forward(request, response);
    }
}
  • JSP (src/main/webapp/WEB-INF/views/new-form.jsp)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
    <!-- 상대경로 사용, [현재 URL이 속한 계층 경로 + /save] -->
    <form action="save" method="post">
      username: <input type="text" name="username" />
      age: <input type="text" name="age" />
      <button type="submit">전송</button>
    </form>
  </body>
</html>
  • dispatcher.forward()
    • 다른 서블릿이나 JSP로 이동할 수 있는 기능이다. 서버 내부에서 다시 호출이 발생한다.
  • /WEB-INF
    • 이 경로안에 JSP가 있으면 외부에서 직접 JSP를 호출할 수 없다.
    • 우리가 기대하는 것은 항상 컨트롤러를 통해서 JSP를 호출하는 것이다.
  • redirect vs forward
    • 리다이렉트는 실제 클라이언트(웹 브라우저)에 응답이 나갔다가, 클라이언트가 redirect 경로로 다시 요청한다.
    • 따라서 클라이언트가 인지할 수 있고, URL 경로도 실제로 변경된다.
    • 반면에 포워드는 서버 내부에서 일어나는 호출이기 때문에 클라이언트가 전혀 인지하지 못한다.

회원 저장

  • 컨트롤러
package hello.servlet.web.servletmvc;

import hello.servlet.domain.member.Member;
import hello.servlet.domain.member.MemberRepository;
import jakarta.servlet.RequestDispatcher;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet(name = "mvcMemberSaveServlet", urlPatterns = "/servlet-mvc/members/save")
public class MvcMemberSaveServlet extends HttpServlet {
    private MemberRepository memberRepository = MemberRepository.getInstance();

    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        int age = Integer.parseInt(request.getParameter("age"));
        Member member = new Member(username, age);
        System.out.println("member = " + member);
        memberRepository.save(member);

        //Model에 데이터를 보관한다.
        request.setAttribute("member", member);
        String viewPath = "/WEB-INF/views/save-result.jsp";
        RequestDispatcher dispatcher = request.getRequestDispatcher(viewPath);
        dispatcher.forward(request, response);
    }
}
  • JSP (src/main/webapp/WEB-INF/views/save-result.jsp)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    성공
    <ul>
      <li>id=${member.id}</li>
      <li>username=${member.username}</li>
      <li>age=${member.age}</li>
    </ul>
    <a href="/index.html">메인</a>
  </body>
</html>

회원 목록 조회

  • JSTL을 통해 반복하여 출력시켰다.
  • 현재 JSP를 배우는 것이 주 목적이 아니니 넘어가자.

  • 컨트롤러
package hello.servlet.web.servletmvc;

import hello.servlet.domain.member.Member;
import hello.servlet.domain.member.MemberRepository;
import jakarta.servlet.RequestDispatcher;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

@WebServlet(name = "mvcMemberListServlet", urlPatterns = "/servlet-mvc/members")
public class MvcMemberListServlet extends HttpServlet {
    private MemberRepository memberRepository = MemberRepository.getInstance();
    
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("MvcMemberListServlet.service");
        List<Member> members = memberRepository.findAll();
        request.setAttribute("members", members);
        String viewPath = "/WEB-INF/views/members.jsp";
        RequestDispatcher dispatcher = request.getRequestDispatcher(viewPath);
        dispatcher.forward(request, response);
    }
}
  • JSP (src/main/webapp/WEB-INF/views/members.jsp)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<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>
      <c:forEach var="item" items="${members}">
        <tr>
          <td>${item.id}</td>
          <td>${item.username}</td>
          <td>${item.age}</td>
        </tr>
      </c:forEach>
      </tbody>
    </table>
  </body>
</html>

MVC 패턴 - 한계

  • MVC 패턴을 적용한 덕분에 컨트롤러의 역할과 뷰를 렌더링 하는 역할을 명확하게 구분할 수 있다.
  • 특히 뷰는 화면을 그리는 역할에 충실한 덕분에, 코드가 깔끔하고 직관적이다.
    • 단순하게 모델에서 필요한 데이터를 꺼내고, 화면을 만들면 된다.
  • 그런데 컨트롤러는 딱 봐도 중복이 많고, 필요하지 않는 코드들도 많이 보인다.

포워드 중복

  • View로 이동하는 코드가 항상 중복 호출되어야 한다.
  • 물론 이 부분을 메서드로 공통화해도 되지만, 해당 메서드도 항상 직접 호출해야 한다.
RequestDispatcher dispatcher = request.getRequestDispatcher(viewPath);
dispatcher.forward(request, response);

ViewPath 중복

  • 예시
    • String viewPath = "/WEB-INF/views/new-form.jsp";
    • prefix
      • /WEB-INF/views/
    • suffix
      • .jsp
  • 만약 jsp가 아닌 thymeleaf같은 다른 뷰 템플릿으로 변경한다면 전체 코드를 다 변경해야 한다.

사용하지 않는 코드

  • 현재는 HttpServletRequest requestHttpServletResponse response를 둘 다 명시하고 있다.
    • 그러나 아직까지는 response를 쓸 일이 없는데도 항상 명시하고 있다.
  • 게다가 HttpServletRequest나 HttpServletResponse는 테스트 케이스를 작성하기도 어렵다.

공통 처리가 어렵다.

  • 기능이 복잡해질수록 컨트롤러에서 공통으로 처리해야 하는 부분이 점점 더 많이 증가할 것이다.
  • 단순히 공통 기능을 메서드로 뽑으면 될 것 같아 보인다.
    • 하지만 결과적으로 해당 메서드를 항상 호출해야 한다.
    • 실수로 호출하지 않으면 문제가 될 것이다.
    • 그리고 호출하는 것 자체도 중복이다.
  • 이럴 때 필요한 것이 수문장역할을 하는 프론트 컨트롤러(Front Controller) 패턴이다.

    출처

  • 스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.