(스프링 MVC1) 서블릿,JSP, MVC 패턴

짜스의 하루 ·2024년 3월 4일
김영한 - 스프링 MVC1 참조

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

회원 정보

  • 이름: username
  • 나이: age

기능 요구사항

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

회원 도메인 모델
: servlet > domain 패키지를 생성하고, 내부에 memebr 패키지를 생성

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

회원 저장소 MemberRepository 클래스 생성

public class MemberRepository {

    private static Map<Long, Member> store = new HashMap<>();
    private static long sequence = 0L;
    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;
    }

    public Member findById(Long id){
        return store.get(id);
    }
    public List<Member> findAll(){
        return new ArrayList<>(store.values());
    }

    public void clearStore(){
        store.clear();
    }
}
  • Spring을 사용하면 싱글톤을 따로 구성하지 않아도 된다.
    <메소드 로직>
  • save : Member의 setId를 통해 고유값을 증가시켜 셋팅하고 그 id를 store Map에 Key값으로, Member 객체를 value로 저장한 후 저장한 member 반환
  • findById : id를 파라미터로 넘겨 store에서 꺼내옴
  • findAll : store의 values()를 통해 ArrayList형태로 모두 꺼내옴
  • clearStore : map을 클리어 처리

Repository 테스트 클래스 생성

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

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

    }
    @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);
    }
}
  • 테스트 생성 단축키 : ctrl + shift + t
  • 테스트가 끝날 때, 다음 테스트에 영향을 주지 않도록 각 테스트의 저장소를 clearStore()를 호출해서 초기화 시켰다. (@AfterEach 애노테이션 사용)

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

순수하게 서블릿으로만 HTML Form 까지 작성할 수 있다.

MemberFormServlet 클래스
회원 등록용 HTML 서블릿

@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" +
                "</form>\n" +
                "</body>\n" +
                "</html>\n");
    }
}

전송을 클릭하여 DB에 저장 후 결과를 보여줄 서블릿을 만들어보자

MemberSaveServlet 클래스

@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);
 
        //save로직 수행 후 결과 HTML출력
        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>");
    }
}

  • username 과 age를 누르고 전송을 누르면
  • save 결과 화면을 볼 수 있다.

마지막으로 목록을 보여줄 서블릿을 만들어보자

MemberListServlet 클래스

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

        //멤버 리스트 HTML 출력
        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>");
        }
        w.write(" </tbody>");
        w.write("</table>");
        w.write("</body>");
        w.write("</html>");
    }
}

  • 저장한 후, http://localhost:8080/servlet/members 에 접속하면,

    을 출력할 수 있다.

  • MemberListServlet 은 다음 순서로 동작한다.
    1) memberRepository.findAll() 을 통해 모든 회원을 조회한다.
    2) 회원 목록 HTML을 for 루프를 통해서 회원 수 만큼 동적으로 생성하고 응답한다.

템플릿 엔진으로
지금까지 서블릿과 자바코드로만 HTML을 만들어 보았다. 서블릿 덕분에 동적으로 원하는 HTML을 만들 수 있었다.
하지만, 코드를 보게 되면 매우 복잡하고 비효율적임을 알 수 있다. 자바 코드로 HTML을 만들어내는 것보다, HTML문서에 동적으로 변경해야 하는 부분을 자바 코드를 넣을 수 있다면 더 편리하다는 것을 알 수 있다.
--> 템플릿 엔진을 사용하게 되면, HTML 문서에 필요한 곳만 동적으로 변경할 수 있다.

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

JSP를 사용하기 전에 build.gradle에 라이브러리를 추가해보자.

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-web'
	compileOnly 'org.projectlombok:lombok'
	annotationProcessor 'org.projectlombok:lombok'
 
	//JSP 추가 시작
	implementation 'org.apache.tomcat.embed:tomcat-embed-jasper'
	implementation 'javax.servlet:jstl'
	//JSP 추가 끝
 
	providedRuntime 'org.springframework.boot:spring-boot-starter-tomcat'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
}

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>

위의 코드를 살펴보면, 첫 줄을 제외하고는 HTML과 동일한 모습을 하고 있으며, 서버 내부에서 서블릿으로 변환한다.

  • 첫 줄은 JSP문서라는 뜻이다. JSP 문서는 이렇게 시작해야 한다.
    ( <%@ page contentType="text/html;charset=UTF-8" language="java" %> )
  • (참고) webapp밑에 있는 파일들은 주소만 치면 바로 들어갈 수 있다.

회원 저장 후, 결과를 보여줄 저장 jsp를 만들어보자

save.jsp(회원 저장)

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    MemberRepository memberRepository = MemberRepository.getInstance();
    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);
%>
<html>
<head>
    <title>Title</title>
</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 에서는 동적으로 표현하기 위해 (JAVA코드를 사용하기 위해) 스크립트를 사용하는데,

  • 선언부 : <%! %>로 쓴다. 전역변수, 메서드 선언을 한다
  • 스크립틀릿 : <% %> 로 쓴다. 자바 코드를 입력한다
  • 표현식 : <%= %> 자바 코드를 출력할 때 사용한다

members.jsp (회원 목록) 

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    MemberRepository memberRepository = MemberRepository.getInstance();
    List<Member> members = memberRepository.findAll();
%>
<html>
<head>
    <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에서는 스크립틀릿을 통해 반복문을 돌릴 수 있다.
    이 JSP에 진입하게 되면, 회원 리포지토리를 통해 먼저 회원 리스트를 조회(findAll())을 하고, List를 for문으로 처리한다.

서블릿과 JSP의 한계

  • 서블릿으로 개발할 때에는, 뷰(view)화면을 위한 HTML을 만드는 작업이 자바 코드에 섞여서 지저분하고 복잡했다
  • JSP를 사용한 덕분에 뷰를 생성하는 HTML작업을 깔끔하게 가져가고, 중간 중간 동적으로 변경이 필요한 부분에만 자바 코드를 적용했다.
  • 상위 절반은 회원 저장을 위한 비지니스 영역, 나머지 하위 절반은 HTML을 보여주기 위한 뷰 영역
    --> JAVA코드, 데이터를 조회하는 리포지토리 등 다양한 코드가 노출되어 있다(JSP가 너무 많은 역할을 한다)

MVC 패턴의 등장

  • 비즈니스 로직은 서블릿 처럼 다른 곳에서 처리하고,JSP는 목적에 맞게 HTML로 화면을 그리는 일에 집중하도록 하기 위해 MVC 패턴이 등장했다.

MVC 패턴 - 개요

너무 많은 역할

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

변경의 라이프 사이클

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

기능 특화

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

Model View Controller

: MVC 패턴은 지금까지 학습한 것처럼 하나의 서블릿이나, JSP로 처리하던 것을 컨트롤러(Controller)와 뷰(View)라는 영역으로 서로 역할을 나눈 것을 말한다.
웹 애플리케이션은 보통 이 MVC 패턴을 사용한다.

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

참고

  • 일반적으로 비지니스 로직은 Service라는 계층을 별도로 만들어서 처리한다.
    컨트롤러는 비지니스 로적이 있는 서비스를 호출하는 역할을 담당한다.

MVC 패턴

MVC 패턴 - 적용

서블릿을 컨트롤러로 사용하고, JSP를 뷰로 사용해서 MVC 패턴을 적용해보자

Model은 HttpServletRequest 객체를 사용한다. request는 내부에 데이터 저장소를 가지고 있는데 request.setAttribute()로 데이터를 저장하고, request.getAttribute()로 데이터를 꺼낼 수 있다.

  • 참고) 조금 전 MVC 패턴 그림을 보면, setAttribute로 값을 담고, 뷰에서는 getAttribute로 값을 꺼내간다.

MvcMemberFormServlet(회원 등록)

@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);
    }
}
  • String viewPath = "/WEB-INF/views/new-form.jsp" : 클라이언트로부터 요청을 처리한 후, 보여줄JSP 파일의 경로를 설정한다.
  • RequestDispatcher dispatcher = request.getRequestDispatcher(viewPath); : viewPath로 설정된 경로로 요청을 전달 할 객체를 생성한다.
    일반적으로 JSP파일은 보인 및 직접 접근을 막기 위해 WEB_INF디렉토리 아래에 배치한다.
  • dispatcher.forward() : 다른 서블릿이나, JSP로 이동할 수 있는 기능, 서버 내부에서 다시 호출이 발생한다.

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>
  • WEB_INF : 이 경로 안에 JSP가 있으면, 외부에서 직접 JSP를 호출할 수 없다.
    우리가 기대하는 것은 항상컨트롤러를 통해서 JSP를 호출하는 것이다.
    --> WEB-INF 경로에 넣게 되면, 항상 컨트롤러를 거쳐서 내부에서 forward()를 호출해야 한다.
  • form action="save"를 살펴보면, 절대 경로(/ 로 시작)가 아니라 상대경로() 인것으로 확인할 수 있다.
    상대 경로를 사용하면 폼 전송 시, 현재 URL이 속한 계층 경로 + save가 호출된다

현재 계층 경로: /servlet-mvc/members/
결과: /servlet-mvc/members/save
ex) /servlet-mvc/members/new-form -> /servlet-mvc/members/save

MvcMemberSaveServlet 회원 저장

@WebServlet(name = "mvcMemberSaveServlet", urlPatterns = "/servlet-mvc/members/save")
public class MvcMemberSaveServlet extends HttpServlet {
    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);
        memberRepository.save(member);

        //model에 데이터를 보관한다.
        request.setAttribute("member", member);

        //view로 전달
        String viewPath = "/WEB-INF/views/save-result.jsp";
        RequestDispatcher dispatcher = request.getRequestDispatcher(viewPath);
        dispatcher.forward(request,response);

    }
}
  • HttpServletRequest를 Model로 사용한다
  • request가 제공하는 setAttribute()를 사용하면 request객체에 데이터를 보관해서 뷰에 전달할 수 있다.
  • 뷰는 request.getAttribute()를 사용해서 데이터를 꺼내면 된다.

save-result.jsp 회원 저장 뷰

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</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 객체를 꺼낼 수 있지만, 너무 복잡해진다.
  • JSP는 ${} 문법을 제공하는데, 이 문법을 사용하면 request의 attribute에 담긴 데이터를 편리하게 조회할 수 있다.

MvcMemebrListServlet 회원 목록 조회

@WebServlet(name = "mvcMemberListServlet", urlPatterns = "/servlet-mve/members")
public class MvcMemberListServlet extends HttpServlet {
    MemberRepository memberRepository = MemberRepository.getInstance();
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        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);

    }
}

members.jsp 회원 목록 조회 뷰

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <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>
  • List를 편하게 출력하기 위해 c태그를 사용하였다.

MVC 패턴의 한계

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

MVC 컨트롤러의 단점

  • 포워드 중복: View로 이동하는 코드가 항상 중복 호출이 되어야 한다. 물론 이 부분을 메서드로 공통화 해도 되지만, 해당 메서드도 항상 직접 호출해야 한다.
  • ViewPath 중복:
    /WEB_INF/views/와 .jsp가 계속 중복이 된다. 만약 디렉토리 구조가 바뀌거나, .jsp가 아닌 thymeleaf와 같은 다른 뷰로 변경한다면, 전체 코드를 다 변경해야 한다.
  • 사용하지 않은 코드: 다음 코드를 사용할 때도 있고 아닐 떄도 있다. 특히 현재에는 response는 현재 코드에서 사용되지 않는다.
  • HttpServletRequest request, HttpServletResponse response
    그리고 이런 HttpServletRequest, HttpServletResponse 를 사용하는 코드는 테스트 케이스를 작성하기도 어렵다.
  • 공통 처리가 어렵다 : 기능이 복잡해질 수록 컨트롤러에서 공통으로 처리해야 할 부분이 점점 더 많이 증가할 것이다. 단순히 공통 기능을 메서드로 뽑으면 될 것 같지만, 결과적으로 해당 메서드를 항상 호출해야 하고, 실수로 호출하지 않으면 문제갇 ㅚㄹ 것이다.+ 호출하는 것 자체도 중복이다.

정리하면 공통 처리가 어렵다는 문제가 있다

  • ㅇ 문제를 해결하려면, 컨트롤러 호출 전에(서블릿이 호출되기 전에) 먼저 공통기능을 처리해야 한다. 소위 수문장 역할을 하는 기능이 필요하다(항상 문을 지키는 어떤 객체가 있고, 그 객체를 통해서 컨트롤러들이 호출되도록 한다) 그래서 그 문을 지키는 객체에서 공통처리를 해버리면 된다
  • 프론트 컨트롤러(Front Controller)패턴을 도입하면 이런 문제를 깔끔하게 해결할 수 있다. (입구를 하나로 만들기 때문)
  • 스프링 MVC의 핵심도 바로 이 프론트 컨트롤러에 있다.
profile
짜스의 하루
2024. 01. 02 ~ 백앤드 공부 시작, 2024. 04.01 ~ 프론트 공부 시작
이전 포스트

(스프링 MVC1) 서블릿

다음 포스트

(스프링 MVC1) 스프링 MVC구조 이해

0개의 댓글