[스프링&JPA 스터디] #11 서블릿, JSP, MVC 패턴

오예찬·2023년 7월 18일
스터디스프링
0

spring&jpa 스터디

목록 보기
11/15

회원 관리 웹 애플리케이션 요구사항


회원 정보

  • 이름:username
  • 나이: age

기능 요구사항

  • 회원 저장
  • 회원 목록 조회

서블릿 -> JSP -> MVC 패턴 순으로 회원 등록 폼의 코드를 보면서 어느 부분이 개선되는 지 알아볼 것.

서블릿

서블릿 회원 등록 폼

@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);
        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>");
    }
  • 서블렛은 단순하게 회원 정보를 입력할 수 있는 HTML Form을 만들어서 응답한다.
  • 자바 코드로 HTML을 제공해야 하므로 쉽지 않은 작업이다.

자바 코드를 HTML을 만들지 말고 HTML 문서에 동적으로 변경해야 하는 부분만 자바 코드를 넣을 수 있다면 더 편리하지 않을까? -> JSP 사용

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>

  • 첫줄은 JSP문서라는 뜻이다. JSP 문서는 이렇게 시작해야 한다.

  • 회원 등록 폼 JSP를 보면 첫 줄을 제외하고는 완전히 HTML과 똑같다. JSP는 서버 내부에서 서블릿으로 변환되어 위에 만들어써던 MemberFormServlet과 거의 비슷한 모습으로 변환된다.

회원 저장 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>
  • JSP의 특징으로 <% ~~ %> 부분에 자바 코드를 입력할 수 있다.

서블릿과 JSP의 한계

  • 서블릿은 뷰(View)화면을 위한 HTML을 만드는 작업이 자바 코드에 섞여 지저분하고 복잡하다.

  • JSP의 경우도 상위 절반은 비즈니스 로직, 나머지 하위 절반은 결과를 HTML로 보여주기 위한 뷰 영역이다. 서블릿과 마찬가지로 너무 많은 역할을 한다는 것이다. -> 역할나누기(MVC 패턴)

MVC 패턴


너무 많은 역할

  • 하나의 서블릿이나 JSP만으로 비즈니스 로직과 뷰 렌더링까지 모두 처리하게 되면 너무 많은 역할을 하게되고, 결과적으로 유지보수가 어려워짐.

변경의 라이프 사이클

  • UI와 비즈니스를 수정하는 일은 각각 다르게 발생할 가능성이 매우 높다.
  • 변경의 라이프 사이클이 다른 부분을 하나의 코드로 관리하는 것은 유지보수가 힘들다.

기능 특화

  • 특히 JSP 같은 뷰 템플릿은 화면을 렌더링 하는데 최적화 되어 있기 때문에 이 부분의 업무만 담당하는 것이 가장 효과적.

Model View Controller

MVC 패턴은 하나의 서블릿이나, JSP로 처리하던 것을 컨트롤러(Controller)와 뷰(View)라는 영역으로 서로 역할을 나눈 것을 말한다.

컨트롤러: HTTP 요청을 받아서 파라미터를 검증하고, 비즈니스 로직을 실행한다. 그리고 뷰에 전달할 결과 데이터를 조회해서 모델에 담는다.

모델: 뷰에 출력할 데이터를 담아둔다. 뷰가 필요한 데이터를 모두 모델에 담아서 전달해주는 덕분에 뷰는 비즈니스 로직이나 데이터 접근을 몰라도 되고, 화면을 렌더링 하는 일에 집중할 수 있다.(다형성의 활용)
뷰: 모델에 담겨있는 데이터를 사용해서 화면을 그리는 일에 집중한다. 여기서는 HTML을 생성하는 부분을 말한다.

MVC 패턴


MVC 패턴 - 적용


회원 등록 폼 - 컨트롤러

@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);
    }
}

  • /WEB-INF: 이 경로안에 JSP가 있으면 외부에서 직접 JSP를 호출할 수 없다. 우리가 기대하는 것은 항상 컨트롤러를 통해서 JSP를 호출하는 것이다.

  • redirect vs forward
    리다이렉트는 실제 클라이언트(웹 브라우저)에 응답이 나갔다가, 클라이언트가 redirect 경로로 다시 요청한다. 따라서 클라이언트가 인지할 수 있고, URL 경로도 실제로 변경된다. 반면에 포워드는 서버 내부에서 일어나는 호출이기 때문에 클라이언트가 전혀 인지하지 못한다.

회원 등록 폼 - 뷰

<%@ 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>
  • MVC 덕분에 컨트롤러 로직과 뷰 로직을 확실하게 분리한 것을 확인할 수 있다. 향후 화면에 수정이 발생하면 뷰 로직만 변경하면 된다.

MVC 패턴 - 한계


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

MVC 컨트롤러의 단점

  • 포워드 중복

  • ViewPath에 중복

  • 사용하지 않는 코드

  • 공통 처리가 어렵다

    • 기능이 복잡해질수록 컨트롤러에서 공통으로 처리해야 하는 부분이 점점 더 많아질 것이다. 단순히 공통 기능을 메서드로 뽑으면 될 것 같지만, 결과적으로 해당 메서드를 항상 호출해야 하고, 실수로 호출하지 않으면 문제가 될 것이다. 그리고 호출하는 것 자체도 중복이다.

참고

profile
오예찬
안녕하세요. 반갑습니다.
이전 포스트

[스프링&JPA 스터디] #10 서블릿

다음 포스트

[스프링&JPA 스터디] #12 MVC 프레임워크

1개의 댓글

comment-user-thumbnail
이태균
2023년 7월 18일

잘 봤습니다. 좋은 글 감사합니다.

답글 달기