스프링MVC3_서블릿,JSP,MVC 패턴

82452 단어 spring mvcspring mvc

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

1. 개발 요구사항

  • 회원 정보
    -> 이름 : username
    -> 나이 : age

  • 기능 요구사항
    -> 회원 저장
    -> 회원 목록 조회

2. 도메인과 테스트코드

  • Member.java
  • MemberRepository.java

    -> 회원저장소는 싱글톤 패턴 적용
    -> 싱글톤 패턴은 객체를 단 하나만 생성해서 공유해야 하므로 생성자를 private접근자로 막아둠

  • MemberRepositoryTest.java
package hellp.servlet.domain.member;

import org.assertj.core.api.Assertions;
import org.junit.jupiter.api.AfterEach;
import org.junit.jupiter.api.Test;

import java.util.List;

import static org.assertj.core.api.Assertions.*;
import static org.junit.jupiter.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
        Assertions.assertThat(result.size()).isEqualTo(2);

    }

}

(2) 서블릿으로 회원 관리 웹 애플리케이션 만들기

1. MemberFormServlet - 회원 등록 폼

package hello.servlet.web.servlet;

import hello.servlet.domain.member.MemberRepository;

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.io.PrintWriter;

@WebServlet(name = "memberFormSerlvet", 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" +
                "</form>\n" +
                "</body>\n" +
                "</html>\n");
    }
}

2. MemberSaveServlet - 회원 저장

package hello.servlet.web.servlet;

import hello.servlet.domain.member.Member;
import hello.servlet.domain.member.MemberRepository;

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.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);
        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>");
    }
}
  • 동작순서
    -> 파라미터를 조회해서 Member 객체를 만든다
    --> Member객체를 MemberRepository를 통해서 저장한다.
    ---> Member 객체를 사용해서 결과 화면용 HTML을 동적으로 만들어서 응답한다.

3. MemberListServlet - 회원 목록

package hello.servlet.web.servlet;

import hello.servlet.domain.member.Member;
import hello.servlet.domain.member.MemberRepository;

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.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 {
        List<Member> members = memberRepository.findAll();

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

        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>");
    }
}
  • 동작순서
    -> memberRepository.findAll()을 통해 모든 회원을 조회한다.
    --> 회원 목록 HTML을 for 루프를 통해서 회원 수 만큼 동적으로 생성하고 응답한다.

4. 정리 ( 템플릿 엔진으로 )

  • 서블릿과 자바 코드 만으로 HTML을 만들어 보았음
  • 서블릿 덕분에 동적으로 원하는 HTML 생성 가능
  • 자바코드로 HTML을 만들어내는 것은 매우 비효율적
    -> HTML문서에 동적으로 변경해야 하는 부분만 자바코드 넣는 것이 더 편리할 것
    --> 템플릿 엔진이 나온 이유
  • 템플릿 엔진을 사용하면 HTML 문서에서 필요한 곳만 코드를 적용하여 동적으로 변경 가능
  • 템플릿 엔진 종류 : JSP, Thymeleaf, Freemarker, Velocity...
  1. Welcome 페이지 변경
  • index.html 변경
<!DOCTYPE html>
<html><head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li><a href="basic.html">서블릿 basic</a></li>
    <li>서블릿
        <ul>
            <li><a href="/servlet/members/new-form">회원가입</a></li>
            <li><a href="/servlet/members">회원목록</a></li>
        </ul>
    </li>
    <li>JSP
        <ul>
            <li><a href="/jsp/members/new-form.jsp">회원가입</a></li>
            <li><a href="/jsp/members.jsp">회원목록</a></li>
        </ul>
    </li>
    <li>서블릿 MVC
        <ul>
            <li><a href="/servlet-mvc/members/new-form">회원가입</a></li>
            <li><a href="/servlet-mvc/members">회원목록</a></li>
        </ul>
    </li>
    <li>FrontController - v1
        <ul>
            <li><a href="/front-controller/v1/members/new-form">회원가입</a></li>
            <li><a href="/front-controller/v1/members">회원목록</a></li>
        </ul>
    </li>
    <li>FrontController - v2
        <ul>
            <li><a href="/front-controller/v2/members/new-form">회원가입</a></li>
            <li><a href="/front-controller/v2/members">회원목록</a></li>
        </ul>
    </li>
    <li>FrontController - v3
        <ul> <li><a href="/front-controller/v3/members/new-form">회원가입</a></li>
            <li><a href="/front-controller/v3/members">회원목록</a></li>
        </ul>
    </li>
    <li>FrontController - v4
        <ul>
            <li><a href="/front-controller/v4/members/new-form">회원가입</a></li>
            <li><a href="/front-controller/v4/members">회원목록</a></li>
        </ul>
    </li>
    <li>FrontController - v5 - v3
        <ul>
            <li><a href="/front-controller/v5/v3/members/new-form">회원가입</a></
            li>
            <li><a href="/front-controller/v5/v3/members">회원목록</a></li>
        </ul>
    </li>
    <li>FrontController - v5 - v4
        <ul>
            <li><a href="/front-controller/v5/v4/members/new-form">회원가입</a></
            li>
            <li><a href="/front-controller/v5/v4/members">회원목록</a></li>
        </ul>
    </li>
    <li>SpringMVC - v1
        <ul>
            <li><a href="/springmvc/v1/members/new-form">회원가입</a></li>
            <li><a href="/springmvc/v1/members">회원목록</a></li>
        </ul>
    </li>
    <li>SpringMVC - v2
        <ul>
            <li><a href="/springmvc/v2/members/new-form">회원가입</a></li>
            <li><a href="/springmvc/v2/members">회원목록</a></li>
        </ul>
    </li>
    <li>SpringMVC - v3
        <ul>
            <li><a href="/springmvc/v3/members/new-form">회원가입</a></li> <li><a href="/springmvc/v3/members">회원목록</a></li>
        </ul>
    </li>
</ul>
</body>
</html>

(3) JSP로 회원 관리 웹 애플리케이션 만들기

1. JSP 라이브러리 추가

  • build.gradle 추가
implementation 'org.apache.tomcat.embed:tomcat-embed-jasper'
implementation 'javax.servlet:jstl'

2. 회원등록 폼 JSP

  • 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>

3. 회원 저장 JSP

  • 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>
  • JSP는 자바 코드를 그대로 다 사용할 수 있다.
    -> <%@ page import="hello.servlet.domain.member.MemberRepository" %> : 자바의 import문과 같다
    -> <% ~~ %> : 이 부분에는 자바 코드를 입력할 수 있다.
    -> <%= ~~ %> : 이 부분에는 자바 코드를 출력할 수 있다.
  • HTML을 중심으로 하고, 자바 코드를 부분부분입력해준다. (동적 작용)

4. 회원 목록 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>

5. 서블릿과 JSP의 한계

  • 서블릿
    -> 개발 시 뷰(view)화면을 위한 HTML을 만드는 작업이 자바코드에 섞임
    --> 지저분 하고 복잡함
  • JSP
    -> HTML생성 부분을 깔끔하게 처리하고, 중간중간 동적으로 변경이 필요한 부분에만 자바 코드 적용.
    --> 상위 절반은 비지니스 로직, 하위 절반은 뷰 영역
    ---> JAVA코드, 데이터 조회 리포지토리 등 다양한 코드가 모두 JSP에 노출되어 있음 / JSP가 너무 많은 역할을 함

6. MVC 패턴의 등장

  • 비즈니스 로직은 서블릿처럼 다른 곳에서 처리
  • JSP는 목적에 맞게 HTML로 화면(view)을 그리는 일에 집중

(4) MVC 패턴 개요

1. 너무 많은 역할

  • 하나의 서블릿이나 JSP만으로 비즈니스 로직과 뷰 렌더링까지 모두 처리하게 되면, 너무 많은 역할을
    하게되고, 결과적으로 유지보수가 어려워진다.
  • 비즈니스 로직을 호출하는 부분에 변경이 발생해도 해당
    코드를 손대야 하고, UI를 변경할 일이 있어도 비즈니스 로직이 함께 있는 해당 파일을 수정해야 한다.

2. 변경의 라이프 사이클

  • UI를 일부 수정하는 일과 비즈니스 로직을 수정하는 일은 각각 다르게 발생할 가능성이 매우 높고 대부분
    서로에게 영향을 주지 않는다.
  • 이렇게 변경의 라이프 사이클이 다른 부분을 하나의 코드로 관리하는 것은 유지보수하기 좋지 않다.

3. 기능 특화

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

4. Model View Controller

  • 컨트롤러: HTTP 요청을 받아서 파라미터를 검증하고, 비즈니스 로직을 실행한다. 그리고 뷰에 전달할 결과
    데이터를 조회해서 모델에 담는다.
  • 모델: 뷰에 출력할 데이터를 담아둔다. 뷰가 필요한 데이터를 모두 모델에 담아서 전달해주는 덕분에 뷰는
    비즈니스 로직이나 데이터 접근을 몰라도 되고, 화면을 렌더링 하는 일에 집중할 수 있다.
  • 뷰: 모델에 담겨있는 데이터를 사용해서 화면을 그리는 일에 집중한다. 여기서는 HTML을 생성하는 부분을
    말한다.

컨트롤러와 서비스

  • 컨트롤러에 비즈니스 로직을 둘 수도 있지만, 이렇게 되면 컨트롤러가 너무 많은 역할을 담당한다.
  • 그래서 일반적으로 비즈니스 로직은 서비스(Service)라는 계층을 별도로 만들어서 처리한다.
  • 그리고 컨트롤러는 비즈니스 로직이 있는 서비스를 호출하는 담당한다.
  • 참고로 비즈니스 로직을 변경하면 비즈니스 로직을 호출하는 컨트롤러의 코드도 변경될 수 있다.
  1. MVC 패턴 도식도
  • MVC패턴 이전
  • MVC 패턴 적용

(5) MVC 패턴 적용

0. 목표

  • 컨트롤러 = 서블렛
  • 뷰 = jsp
  • 모델 = HttpServletRequest 객체 사용
    ( request.setAttribute() / request.getAttribute() )
    -> MVC패턴 적용

1. 회원 등록

  • 회원등록 폼 - 컨트롤러
    -> MvcMemberFormServlet.java
  • dispatcher.forward()
    -> 다른 서블릿이나 JSP로 이동할 수 있는 기능
    --> 서버 내부에서 다시 호출 발생
  • /WEB-INF
    -> 이 경로 안에 JSP가 있을 시 외부에서 직접 JSP 호출 불가
    --> 항상 컨트롤러를 통해 JSP 호출
  • rediriect vs forward
    -> 리다이렉트는 실제 클라이언트에 응답이 나갔따가, 클라이언트가 redirect 경로로 다시 요청
    --> 클라이언트가 인지하며, URL 경로도 실제로 변경
    -> 포워드는 서버 내부에서 일어나는 호출
    --> 클라이언트가 인지하지 못함
  • 회원등록 폼 - 뷰
    -> 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>

-> form의 action에 상대경로로 작성
--> 상대경로 사용하면 폼 전송 시 현재 URL이 속한 계층 경로 + save가 호출됨

현재 /servlet-mvc/members/
결과 /servlet-mvc/members/save

2. 회원 저장

  • 회원 저장 - 컨트롤러
    -> MvcMemberSaveServlet.java

-> HttpServletRequest를 Model로 사용
--> request가 제공하는 'setAttribute()'를 사용하여 request 객체에 데이터를 보관해서 뷰에 전달할 수 있다.
---> 뷰는 'request.getAttribute()'를 사용해서 데이터를 꺼낸다

  • 회원 저장 뷰
    -> 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>

-> <%= request.getAttribute("member")%> 문법으로 모델에 저장한 member 객체를 꺼낼 수 있다
--> ${} 문법을 사용하여 request의 attribute에 담긴 데이터를 편리하게 조회할 수 있다.

  • 정리

-MVC 덕분에 컨트롤러 로직과 뷰 로직을 확실하게 분리하였다.
-향후 화면에 수정 발생 시 뷰 로직만 변경하면 된다.

3. 회원 목록 조회

  • 회원목록 조회 - 컨트롤러
    -> MvcMemberListServlet.java
    -> request 객체를 사용하여 List< Member> members를 모델에 보관

  • 회원목록 조회 - 뷰
    -> 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>

-> JSP가 제공하는 taglib기능을 사용하여 반복 출력
-> <c:forEach 기능 사용 >
--> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

(6) MVC 패턴 - 한계

1. 정리

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

2. MVC 컨트롤러의 단점

  • 포워드 중복
    -> view로 이동하는 코드가 항상 중복 호출되어야 한다. 
RequestDispatcher dispatcher = request.getRequestDispatcher(viewPath);
dispatcher.forward(request, response);
  • ViewPath 중복
    -> 만약 jsp가 아닌 다른 뷰로 변경 시 전체 코드를 다 변경해야 한다.
String viewPath = "/WEB-INF/views/new-form.jsp";
  • 사용하지 않는 코드
    -> response 등은 사용하지 않고 있으며, 테스트코드 작성도 어렵다.
HttpServletRequest request, HttpServletResponse response
  • 공통처리가 어렵다
    -> 기능이 복잡해질 수 록 컨트롤러에서 공통으로 처리해야 하는 부분이 점점 더 많이 증가할 것이다.
    -> 단순히 공통 기능을 메서드로 뽑으면 될 것 같지만, 결과적으로 해당 메서드를 항상 호출해야 한다. 그리고 호출하는 것 자체도 중복이다.

3. 새로운 구조

  • 위를 정리하면 공통 처리가 어렵다는 문제가 있다.

  • 이 문제를 해결하려면 컨트롤러 호출 전에 먼저 공통 기능을 처리해야 한다. 소위 수문장 역할을 하는 기능이 필요하다.

  • 프론트 컨트롤러(Front Controller) 패턴을 도입하면 이런 문제를 깔끔하게 해결할 수 있다.

  • 스프링 MVC의 핵심도 바로 이 프론트 컨트롤러에 있다.

[2021 카카오 블라인드] 합승 택시 요금
Three.js 강좌 #4 씬그래프(Scene Graph)를 이용한 공간구성

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage