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

YuDeokRin · 2024-05-12T15:44:52Z

YuDeokRin
May 12, 2024
Maintainer

서블릿, JSP, MVC 패턴

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

회원정보 객체
- 이름 : username
- 나이 : age
기능 요구사항
- 회원 저장
- 회원 목록 조회

✅Member 도메인 모델

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

}

✅회원 저장소

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 접근자로 막는다.
    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();
    }
}

✅회원 저장소 테스트 코드

package hello.servlet.domian.member;

import hello.servlet.domain.member.Member;
import hello.servlet.domain.member.MemberRepository;
import org.assertj.core.api.Assertions;
import org.junit.jupiter.api.Test;

import java.util.List;

import static org.assertj.core.api.Assertions.assertThat;

public class MemberRepositoryTest {

    MemberRepository memberRepository = MemberRepository.getInstance();

    //회원을 저장하고, 목록을 조회하는 테스트를 작성했다. 각 테스트가 끝날 때,
    // 다음 테스트에 영향을 주지 않도록 각 테스트의 저장소를 clearStore()를 호출해서 초기화했다.
		@AfterEach
		void afterEach() {
		   memberRepository.clearStore();
		}
		

    @Test
    void sava() {
        //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);

    }
}

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

✅MemberFormServlet - 회원 등록 폼

MemberFormServlet은 단순하게 회원 정보를 입력할 수 있는 HTML Form을 만들어서 응답한다.
단점은 자바코드로 HTML을 만들어야하기 때문에 너무 어렵다..

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

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

✅MemberFormServlet - 회원 저장

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은 다음 순서로 동작한다

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

실행
- http://localhost:8080/servlet/members/new-form
- 데이터가 전송되고, 저장 결과를 확인할 수 있다.

✅MemberListServlet - 회원 목록

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

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

MemberListServlet 동작 순서

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

실행
- http://localhost:8080/servlet/members
- 저장된 회원 목록을 확인할 수 있다.

➡️템플릿 엔진으로 쓰는 이유

코드 작성 매우 불편하다. → 비효율적이다
자바코드 HTML 동적으로 사용 보다 HTML 문서에서 동적으로 변경하는 게 더 좋음 → 그게 바로 템플릿 엔진
템플릿 엔진 : JSP, Thymeleaf, Freemarker, Velocity 등

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

✅JSP를 사용하기 위해서 라이브러리 추가하기

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

<%@ 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문서라는 뜻이다. JSP 문서는 이렇게 시작해야 한다.
회원 등록 폼 JSP를 보면 첫 줄을 제외하고는 완전히 HTML와 똑같다.
JSP는 서버 내부에서 서블릿으로 변환되는데, 우리가 만들었던 MemberFormServlet과 거의 비슷한 모습으로 변환된다.
실행
- http://localhost:8080/jsp/members/new-form.jsp
- 실행시 .jsp 까지 함께 적어주어야 한다.

✅회원 저장 JSP

JSP는 자바 코드를 그대로 다 사용할 수 있다.
- <%@ page import="hello.servlet.domain.member.MemberRepository" %>
- 자바의 import 문과 같다.
<% ~~ %>
- 이 부분에는 자바 코드를 입력할 수 있다.
<%= ~~ %>
- 이 부분에는 자바 코드를 출력할 수 있다.

<%@ 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

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

<%@ 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>

➡️서블릿과 JSP 한계

서블릿 → 개발할 때 뷰(View)화면을 위한 HTML을 만드는 작업이 자바코드랑 섞여서 가독성이 너무 떨어짐
JSP를 사용해서 HTML을 깔끔하게 해결 하지만 동적으로 변경부분에 JAVA코드를 넣는데 넣으면 가독성 또 떨어짐
회원 저장 JSP를 보자. 코드의 상위 절반은 회원을 저장하기 위한 비즈니스 로직이고, 나머지 하위 절반만 결과를 HTML로 보여주기 위한 뷰 영역이다. 회원 목록의 경우에도 마찬가지다.

이와 같이 서블릿과 JSP의 한계를 극복한 것이 등장하는데 바로 MVC패턴이다.

🔗출처

김영한 - 스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술

Navigation Menu

Uh oh!

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

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

YuDeokRin May 12, 2024 Maintainer

서블릿, JSP, MVC 패턴

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

✅Member 도메인 모델

✅회원 저장소

✅회원 저장소 테스트 코드

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

✅MemberFormServlet - 회원 등록 폼

✅MemberFormServlet - 회원 저장

✅MemberListServlet - 회원 목록

➡️템플릿 엔진으로 쓰는 이유

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

✅JSP를 사용하기 위해서 라이브러리 추가하기

✅회원 저장 JSP

✅회원 목록 JSP

➡️서블릿과 JSP 한계

🔗출처

Replies: 0 comments

YuDeokRin
May 12, 2024
Maintainer