Spring MVC/서블릿, JSP, MVC 패턴

[Spring MVC] MVC 패턴 - 적용

Boradoris 2023. 1. 28. 00:43

MVC 패턴 - 적용

서블릿을 컨트롤러로 사용하고, JSP를 뷰로 사용해서 MVC 패턴을 적용해 보자.
Model은 HttpServletRequest 객체를 사용한다. 

request는 내부에 데이터 저장소를 가지고 있는데,
request.setAttribute() , request.getAttribute()를 사용하면 데이터를 보관하고 조회할 수 있다.

 

회원 등록

 

회원 등록 폼 - 컨트롤러

hello.servlet.web.servletmvc.MvcMemberFormServlet

package hello.servlet.web.servletmvc;

import javax.servlet.RequestDispatcher;
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;

@WebServlet(name = "mcvMemberFormServlet", 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);
    }
}

 

dispatcher.forward() : 다른 서블릿이나 JSP로 이동할 수 있는 기능이다. 서버 내부에서 다시 호출이 발생한다.

 

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

 

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

 

 

회원 등록 폼 - 뷰

main/webapp/WEB-INF/views/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>

 

여기서 form의 action을 보면 절대 경로( / 로 시작)가 아니라 상대경로( / 로 시작 X)인 것을 확인할 수 있다.

이렇게 상대경로를 사용하면 폼 전송 시 현재 URL이 속한 계층 경로 + save가 호출된다.


현재 계층 경로: /servlet-mvc/members/
결과: /servlet-mvc/members/save

 

실행

  • http://localhost:8080/servlet-mvc/members/new-form
  • HTML Form이 잘 나오는 것을 확인할 수 있다.

 

 

회원 저장

 

회원 저장 - 컨트롤러

MvcMemberSaveServlet

package hello.servlet.web.servletmvc;

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

import javax.servlet.RequestDispatcher;
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;

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

 

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

 

 

회원 저장 - 뷰

main/webapp/WEB-INF/views/save-result.jsp

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

<%
    //request, response 사용 가능
    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>

 

<%= request.getAttribute("member")%>로 모델에 저장한 member 객체를 꺼낼 수 있지만, 너무 복잡해진다.
JSP는 ${} 문법을 제공하는데, 이 문법을 사용하면 request의 attribute에 담긴 데이터를 편리하게 조회할 수 있다.

 

실행

  • http://localhost:8080/servlet-mvc/members/new-form
  • HTML Form에 데이터를 입력하고 전송을 누르면 저장 결과를 확인할 수 있다.

 

MVC 덕분에 컨트롤러 로직과 뷰 로직을 확실하게 분리한 것을 확인할 수 있다. 

향후 화면에 수정이 발생하면 뷰 로직만 변경하면 된다.

 

 

회원 목록 조회

 

회원 목록 조회 - 컨트롤러

MvcMemberListServlet

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.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 {

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

        //Model에 데이터 보관
        request.setAttribute("members", members);

        String viewPath = "/WEB-INF/views/members.jsp";
        RequestDispatcher dispatcher = request.getRequestDispatcher(viewPath);
        dispatcher.forward(request, response);
    }
}

 

request 객체를 사용해서 List<Member> members를 모델에 보관했다.

 

 

회원 목록 조회 - 뷰

main/webapp/WEB-INF/views/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>

 

모델에 담아둔 members를 JSP가 제공하는 taglib기능을 사용해서 반복하면서 출력했다.
members 리스트에서 member를 순서대로 꺼내서 item 변수에 담고, 출력하는 과정을 반복한다.

 

<c:forEach> 이 기능을 사용하려면 다음과 같이 선언해야 한다.
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

 

해당 기능을 사용하지 않고, 다음과 같이 출력해도 되지만, 매우 지저분하다.

<%
 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>");
 }
%>

 

JSP와 같은 뷰 템플릿은 이렇게 화면을 렌더링 하는데 특화된 다양한 기능을 제공한다.

 

실행

  • http://localhost:8080/servlet-mvc/members
  • 저장된 결과 목록을 확인할 수 있다.

 

출처 : https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-1

저작자표시 비영리 변경금지 (새창열림)

'Spring MVC > 서블릿, JSP, MVC 패턴' 카테고리의 다른 글

[Spring MVC] MVC 패턴 - 한계  (0) 2023.01.28
[Spring MVC] MVC 패턴 - 개요  (0) 2023.01.28
[Spring MVC] JSP로 회원 관리 웹 애플리케이션 만들기  (0) 2023.01.28
[Spring MVC] 서블릿으로 회원 관리 웹 애플리케이션 만들기  (0) 2023.01.28
[Spring MVC] 회원 관리 웹 애플리케이션 요구사항  (0) 2023.01.27

'Spring MVC/서블릿, JSP, MVC 패턴'의 다른글

  • 현재글[Spring MVC] MVC 패턴 - 적용

관련글

댓글

티스토리툴바