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

728x90

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

✔ 회원 정보

이름 : username
나이 : age

✔ 기능 요구사항

회원 저장
회원 목록 조회

⚡ 회원 도메인 모델

🔶 hello.servlet.domain.member.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;
    }
}

id 는 Member 를 회원 저장소에 저장하면 회원 저장소가 할당

⚡ 회원 저장소

🔶 hello.servlet.domain.member.MemberRepository

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

    public Member findById(Long id){
        return store.get(id);
    }

    public List<Member> findAll(){
        return new ArrayList<>(store.values());
    }
    public void clearStore(){
        store.clear();
    }



}

회원 저장소는 싱글톤 패턴 적용
- 싱글톤 패턴은 객체를 단 하나만 생성해서 공유해야 하므로 생성자를 private 접근자로 막아둠
스프링을 사용하면 스프링 빈으로 등록하면 되지만, 지금은 최대한 스프링이 없는 순수 서블릿 만으로 구현

⚡ 회원 저장소 테스트 코드

🔶 /test/java/hello.servlet.domain.member.MemberRepository

package hello.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.assertThat;
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
        assertThat(result.size()).isEqualTo(2);
        assertThat(result).contains(member1, member2);
    }

}

회원을 저장하고, 목록을 조회하는 테스트를
각 테스트가 끝날 때, 다음 테스트에 영향을 주지 않도록 각 테스트의 저장소를 clearStore() 를 호출해서 초기화

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

✔ 서블릿으로 회원 등록 HTML 폼 제공

⚡ 회원 저장소 테스트 코드

🔶 hello.servlet.web.servlet

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

MemberFormServlet 은 단순하게 회원 정보를 입력할 수 있는 HTML Form을 만들어서 응답

실행

http://localhost:8080/servlet/members/new-form
HTML Form 데이터를 POST로 전송해도, 전달 받는 서블릿을 아직 만들지 않음
- 오류가 발생하는 것이 정상

⚡ 회원 저장

🔶 hello.servlet.web.servlet
➡ HTML Form에서 데이터를 입력하고 전송을 누르면 실제 데이터가 저장되도록 함

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

MemberSaveServlet 은 다음 순서로 동작
1. 파라미터를 조회해서 Member 객체를 만든다.
2. Member 객체를 MemberRepository를 통해서 저장한다.
3. Member 객체를 사용해서 결과 화면용 HTML을 동적으로 만들어서 응답한다.

실행

http://localhost:8080/servlet/members/new-form
데이터가 전송되고, 저장 결과를 확인

⚡ 회원 목록

🔶 hello.servlet.web.servlet
➡ HTML Form에서 데이터를 입력하고 전송을 누르면 실제 데이터가 저장되도록 함

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("    </tbody>");
        w.write("</table>");
        w.write("</body>");
        w.write("</html>");
    }
}

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

실행

http://localhost:8080/servlet/members
저장된 회원 목록을 확인 가능

⚡ 템플릿 엔진으로

서블릿 : 동적으로 원하는 HTML을 마음껏 만들 수 있음
- 정적인 HTML 문서라면 화면이 계속 달라지는 회원의 저장 결과라던가, 회원 목록 같은 동적인 HTML을 만드는 일은 불가능 할 것
- 하지만, 매우 복잡하고 비효율 적
템플릿 엔진 : HTML 문서에서 필요한 곳만 코드를 적용해서 동적으로 변경가능
- JSP, Thymeleaf, Freemarker, Velocity 등

cf)
JSP는 성능과 기능면에서 다른 템플릿 엔진과의 경쟁에서 밀리면서, 점점 사장되어 가는 추세

⚡ Welcome 페이지 변경

🔶 main/webapp/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>

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

⚡ JSP 라이브러리 추가

✔ 스프링 부트 3.0 이상

🔶 build.gradle

//JSP 추가 시작
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 추가 끝

➡ 스프링 부트 3.0 이상이면 javax.servlet:jstl 을 제거하고 위 코드를 추가해야 함

⚡ 회원 등록 폼 JSP

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

✔ <%@ page contentType="text/html;charset=UTF-8" language="java" %>

첫 줄은 JSP 문서라는 뜻
첫 줄을 제외하고는 HTML과 똑같음
JSP는 서버 내부에서 서블릿으로 변환되는데 우리가 만든 MemberFormServlet과 거의 비슷하게 변환됨

실행

http://localhost:8080/jsp/members/new-form.jsp
실행시 .jsp 까지 함께 적어주어야 함

⚡ 회원 저장 JSP

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

✔ JSP는 자바 코드를 그대로 다 사용 가능

<%@ page import="hello.servlet.domain.member.MemberRepository" %>
- 자바의 import문과 같음
<% ~~ %>
- 이 부분에 자바 코드 입력
<%= ~~ %>
- 이 부분엔 자바 코드 출력

⚡ 회원 목록 JSP

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

회원 리포지토리를 먼저 조회하고, 결과 List를 사용해서 중간에 <tr><td> HTML 태그를 반복해서 출력

⚡ 서블릿과 JSP의 한계

서블릿 : 뷰(View)화면을 위한 HTML을 만드는 작업이 자바 코드에 섞여서 지저분하고 복잡함
JSP : 뷰를 생성하는 HTML 작업을 깔끔하게 가져가고, 중간중간 동적으로 변경이 필요한 부분에만 자바 코드를 적용
- 회원 저장 JSP, 회원 목록
- 코드의 상위 절반은 회원을 저장하기 위한 비즈니스 로직이고, 나머지 하위 절반만 결과를 HTML로 보여주기 위한 뷰 영역
- JAVA 코드, 데이터를 조회하는 리포지토리 등등 다양한 코드가 모두 JSP에 노출되어 있음
- JSP가 너무 많은 역할을 함
- 유지보수 지옥 썰

📌 MVC 패턴

⚡ 개요

✔ 너무 많은 역할

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

✔ 변경의 라이프 사이클 🌟

둘 사이에 변경의 라이프 사이클이 다름
ex) UI를 일부 수정 하는 일과 비즈니스 로직을 수정하는 일은 각각 다르게 발생할 가능성이 매우 높고 대부분 서로에게 영향을 주지 않음
- 이렇게 변경의 라이프 사이클이 다른 부분을 하나의 코드로 관리하는 것은 유지보수하기 좋지 않음
- 물론 UI가 많이 변하면 함께 변경될 가능성도 있음

✔ 기능 특화

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

✔ Model View Controller

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

📎 컨트롤러

HTTP 요청을 받아서 파라미터를 검증하고, 비즈니스 로직을 실행
뷰에 전달할 결과 데이터를 조회해서 모델에 담음

📎 모델

뷰에 출력할 데이터를 담아둠
뷰가 필요한 데이터를 모두 모델에 담아서 전달해주는 덕분에 뷰는 비즈니스 로직이나 데이터 접근을 몰라도 되고, 화면을 렌더링 하는 일에 집중할 수 있음

📎 뷰

모델에 담겨있는 데이터를 사용해서 화면을 그리는 일에 집중
HTML을 생성하는 부분

cf)
컨트롤러에 비즈니스 로직을 둘 수도 있지만, 이렇게 되면 컨트롤러가 너무 많은 역할을 담당
➡ 일반적으로 비즈니스 로직은 서비스(Service)라는 계층을 별도로 만들어서 처리
➡ 컨트롤러는 비즈니스 로직이 있는 서비스를 호출하는 역할을 담당
➡ 참고로 비즈니스 로직을 변경하면 비즈니스 로직을 호출하는 컨트롤러의 코드도 변경될 수 있음

MVC 패턴 이전

MVC 패턴1

MVC 패턴2

⚡ 적용

서블릿을 컨트롤러로 사용
JSP를 뷰로 사용
Model은 HttpServletRequest 객체를 사용
- request는 내부에 데이터 저장소를 가지고 있는데, request.setAttribute() , request.getAttribute() 를 사용하면 데이터를 보관하고, 조회 가능

회원 등록

✔ 회원 등록 폼 - 컨트롤러

🔶 hello.servlet.web.servletmvc.MvcMemberFormServlet

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

✔ dispatcher.forward()

다른 서블릿이나 JSP로 이동할 수 있는 기능
서버 내부에서 다시 호출이 발생

✔ /WEB-INF

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

✔ redirect vs forward

redirect : 실제 클라이언트(웹 브라우저)에 응답이 나갔다가, 클라이언트가 redirect 경로로 다시 요청
- 클라이언트가 인지할 수 있고, URL 경로도 실제로 변경
forword : 서버 내부에서 일어나는 호 출이기 때문에 클라이언트가 전혀 인지 못함

✔ 회원 등록 폼

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

form의 action을 보면 절대 경로( / 로 시작)가 아니라 상대경로( / 로 시작X)
- 상대경로를 사용하면 폼 전송시 현재 URL이 속한 계층 경로 + save가 호출

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

실행

http://localhost:8080/servlet-mvc/members/new-form
HTML Form이 잘 나오는 것을 확인

회원 저장

✔ 회원 저장 - 컨트롤러

🔶 hello.servlet.web.servletmvc.MvcMemberSaveServlet

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

HttpServletRequest를 Model로 사용
request가 제공하는 setAttribute() 를 사용하면 request 객체에 데이터를 보관해서 뷰에 전달 가능
뷰는 request.getAttribute() 를 사용해서 데이터를 꺼냄

✔ 회원 저장 - 뷰

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

✔ <%= request.getAttribute("member")%>

모델에 저장한 member 객체를 꺼낼 수 있지만, 너무 복잡해짐

✔ JSP는 ${} 문법을 제공

request의 attribute에 담긴 데이터를 편리하게 조회 가능

실행

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

회원 목록 조회

✔ 회원 목록 조회 - 컨트롤러

🔶 hello.servlet.web.servletmvc.MvcMemberListServlet

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

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

✔ 회원 목록 조회 - 뷰

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

✔ 모델에 담아둔 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>");
}
%>

실행

http://localhost:8080/servlet-mvc/members
저장된 결과 목록을 확인

⚡ 한계

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 같은 다른 뷰로 변경한다면 전체 코드를 다 변경해야 함

✔ 사용하지 않는 코드

다음 코드를 사용할 때도 있고, 사용하지 않을 때도 있음
특히 response는 현재 코드에서 사용되지 않음

 HttpServletRequest request, HttpServletResponse response

HttpServletRequest , HttpServletResponse 를 사용하는 코드는 테스트 케이스를 작성하기도 어려움

✔ 공통 처리가 어려움

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

✔ 정리하면 공통 처리가 어려움

이 문제를 해결하려면 컨트롤러 호출 전에 먼저 공통 기능을 처리해야 함
- 소위 수문장 역할을 하는 기능이 필요
프론트 컨트롤러(Front Controller) 패턴을 도입하면 이런 문제를 깔끔하게 해결(입구를 하나로!)

<스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술_김영한>을 수강하고 작성한 글입니다

PREV

[스프링 MVC 1편] 2. 서블릿

📌 프로젝트 생성 ✔ 개발 환경 Java 17 IntelliJ IDEA ✔ 스프링 부트 스타터 사이트에서 프로젝트 생성 스프링 부트 스타터 프로젝트 선택 Project : Gradle-Groovy Project Language : Java Spring boot 3.2.1 Project Met

nyeroni.tistory.com

NEXT

[스프링 MVC 1편] 4. MVC 프레임워크 만들기

📌 프론트 컨트롤러 패턴 소개 ⚡ 프론트 컨트롤러 도입 전 ⚡ 프론트 컨트롤러 도입 후 ⚡ FrontController 패턴 특징 프론트 컨트롤러 서블릿 하나로 클라이언트의 요청을 받음 프론트 컨트롤러가

nyeroni.tistory.com

728x90

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

'인프런 Spring 강의 정리 > 스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술' 카테고리의 다른 글

[스프링 MVC 1편] 6. 스프링 MVC - 기본 기능 (0)	2024.01.25
[스프링 MVC 1편] 5. 스프링 MVC - 구조 이해 (1)	2024.01.25
[스프링 MVC 1편] 4. MVC 프레임워크 만들기 (0)	2024.01.25
[스프링 MVC 1편] 2. 서블릿 (1)	2024.01.25
[스프링 MVC 1편] 1. 웹 애플리케이션 이해 (0)	2024.01.24

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

⚡ 회원 도메인 모델

⚡ 회원 저장소

⚡ 회원 저장소 테스트 코드

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

⚡ 회원 저장소 테스트 코드

⚡ 회원 저장

⚡ 회원 목록

⚡ 템플릿 엔진으로

⚡ Welcome 페이지 변경

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

⚡ JSP 라이브러리 추가

⚡ 회원 등록 폼 JSP

⚡ 회원 저장 JSP

⚡ 회원 목록 JSP

⚡ 서블릿과 JSP의 한계

📌 MVC 패턴

⚡ 개요

MVC 패턴 이전

MVC 패턴1

MVC 패턴2

⚡ 적용

회원 등록

회원 저장

회원 목록 조회

⚡ 한계

MVC 컨트롤러의 단점

'인프런 Spring 강의 정리 > 스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술' 카테고리의 다른 글

티스토리툴바