Spring / 순수 Servlet 패턴, JSP 패턴

이번 포스팅에서는 간단하게 회원가입, 회원조회 로직을 MVC 패턴을 살펴보기에 앞서 순수 Servlet 패턴과 JSP 패턴을 사용해서 구현해보고, 각 패턴의 한계와 단점을 살펴보고 다음 포스팅에서 MVC 패턴을 살펴보도록 하겠습니다.

회원 도메인 정보

이름 : username
나이 : age

기능

회원 저장
회원 목록 조회

순수 Servlet

우선 회원 도메인 정보를 만들어야겠죠.

Lombok 라이브러리를 사용해서 Getter, Setter는 따로 구현하지 않았습니다.

Member.java

package hello.servlet.basic.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;
    }
}

그리고 도메인을 기록하기 위해 도메인 리포지토리도 만들어주어야겠죠. HashMap으로 만들었습니다.

MemberRepository.java

package hello.servlet.basic.domain.member;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class MemberRepository {
    private 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();
    }
}

스프링 부트를 사용하지 않고 ( 엄밀히 말하면 톰캣서버만 이용 ) MemberRepository를 싱글톤으로 유지하기 위해,

1. private MemberRepository 생성자로 외부에서 인스턴스 생성 밴

2. 클래스레벨에 MemberRepository을 final로 선언해 변경 밴

3. getInstance()로 항상 같은 리포지토리를 조회하도록 설정하였습니다.

이제 서블릿만을 사용해서 회원 등록, 저장, 조회 로직을 구현해보겠습니다.

첫 번째로, 등록 로직입니다.

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

1. HTML Form을 통해서 회원을 등록할 것이기 때문에, Content-type을 text/html;charset=utf-8 으로 지정해주었습니다.

2. 서블릿에서 클라이언트의 요청에 대한 응답 형태는 문자나 바이트형태가 될 수 있는데, 클라이언트의 요청에 문자 형태로 응답하려면 데이터의 Stream을 컨트롤해야 합니다.

즉, 텍스트형태로 응답을 보내도록 설정하기 위해 PrintWriter 클래스를 사용해 getWriter() 메소드를 통해 응답으로 내보낼 출력 스트림을 얻어낸 후 스트림에 텍스트를 기록했어요.

3. 전송 버튼을 누르면 <form> tag의 action을 servlet/members/save로, method를 POST로 지정해 입력한 폼을 servlet/members/save로 POST하도록 설정했습니다.

<참고자료>

https://charliecharlie.tistory.com/353

[Servlet&JSP] PrintWriter out = response.getWriter(); 의 동작 원리

클라이언트로부터 Servlet으로 요청이 들어오면 요청(Request)을 파악한 후 응답(Response)을 전달한다. Servlet으로 들어온 요청을 텍스트(HTML) 형태로 응답을 보내려면 아래와 같이 응답으로 내보낼 출

charliecharlie.tistory.com

두 번째로, 저장 로직입니다.

앞선 등록 로직에서 HTML Form의 내용을 servlet/members/save에 POST 했었습니다.

저장 로직에서는

1. 등록 로직에서의 HTML Form으로부터 전송된 도메인 정보를 통해 도메인 객체를 하나 만든 다음,싱글톤으로 생성한 리포지토리에 save 합니다.

2. servlet/members/save에 POST된 도메인 정보를 출력합니다.

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

우선 response로 부터 username과 age를 getParameter()을 사용해서 요청받고 해당 파라미터 값을 통해, 도메인을 하나 만들어 주었습니다. 그 후 도메인을 리포지토리에 기록했어요.

그 다음 도메인 객체로부터 getter하여 PrintWriter 출력스트림을 통해 html 방식으로 출력해주었습니다.

( setContentType, setCharacterEncoding 을 통해 Content-type : text/html;charset=utf-8 로 미리 지정 )

세 번째로 회원 목록 조회입니다.

package hello.servlet.web.servlet;

import hello.servlet.basic.domain.member.Member;
import hello.servlet.basic.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 {
    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>");

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

URI는 /servlet/members로 접근할 수 있고, List에 findAll 메소드를 사용해서 리포지토리에 기록된 도메인 정보들을 저장.
HTML 형식으로 회원목록을 뿌려주기 위해 마찬가지로 컨텐츠타입은 html, 인코딩은 utf-8로 설정했습니다.

이렇게 해서 아주아주 간단하게 서블릿과 자바코드만으로 HTML을 만들어보았는데, 서블릿 덕분에 동적으로 HTML을 만들 수 있지만,

코드를 보면 매우 복잡하고 비효율적임을 볼 수 있어요. 밑에 코드처럼 일일히 다 저렇게 HTML을 작성하는 건 굉장히 불편하고 귀찮고 비효율적입니다.

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

자바코드로 HTML을 만드는 것보다 차라리 HTML 문서에 동적으로 변경해야 하는 부분만 자바코드를 넣을 수 있다면 더 편리할 것입니다.
이렇게 HTML 문서에 Java 코드를 넣는 방식이 바로 템플릿 엔진입니다.
템플릿 엔진에는 JSP, Thymeleaf, FreeMarker, Velocity 등이 있습니다.
각 엔진들은 장단점이 있는데 그 중에서 JSP를 사용해서 로직 구현을 해보겠습니다.

JSP 패턴

JSP(Java Server Page)은 템플릿 엔진 중 하나로 JSP를 사용하려면 build.gradle에 JSP 라이브러리를 추가해야 합니다.

//JSP 추가 시작
	implementation group: 'org.apache.tomcat.embed', name: 'tomcat-embed-jasper', version: '9.0.44'
	implementation 'javax.servlet:jstl'
//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는 서버 내부에서 서블릿으로 변환되기 때문에, 서블릿으로 짠 MemberFormSevlet과 거의 비슷하게 변환됩니다.

두 번째는 저장 로직입니다.

<%@ page import="hello.servlet.basic.domain.member.Member" %>
<%@ page import="hello.servlet.basic.domain.member.MemberRepository" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    // request, response 사용 가능
    MemberRepository memberRepository = MemberRepository.getInstance();

    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>

<%@ page ~~~ %>

➣ import문

<% ~~ %>

➣ 이 부분에 자바 코드를 입력할 수 있습니다.

<%= ~~ %>

➣ 이 부분에 자바 코드를 출력할 수 있습니다.

JSP 라이브러리에 request와 response는 예약어로 설정되어 있기 때문에 따로 선언하지 않고 사용할 수 있습니다.

세 번째 로직은 회원 목록 조회입니다.

<%@ page import="hello.servlet.basic.domain.member.MemberRepository" %>
<%@ page import="hello.servlet.basic.domain.member.Member" %>
<%@ page import="java.util.List" %>
<%@ 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>

1. 회원 리포지토리를 먼저 조회

2. 회원 리포지토리 -> 리스트

3. <tr><td> HTML 태그를 반복해서 출력

여기서 out 또한 JSP라이브러리 예약어로 JSP 페이지가 생성하는 결과를 출력할때 사용되는 출력 스트림입니다.

<참고 자료>

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

스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술 - 인프런 | 강의

웹 애플리케이션을 개발할 때 필요한 모든 웹 기술을 기초부터 이해하고, 완성할 수 있습니다. 스프링 MVC의 핵심 원리와 구조를 이해하고, 더 깊이있는 백엔드 개발자로 성장할 수 있습니다., -

www.inflearn.com

https://blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=kimkwon429&logNo=220759230473

'📕 Backend > MVC Pattern' 카테고리의 다른 글

Front-Controller 패턴 (0)	2023.02.27
Spring / MVC 패턴 (0)	2023.02.24
Spring MVC / HttpServletResponse (0)	2023.02.22
Spring MVC / HttpServletRequest (0)	2023.02.22
Spring MVC / 웹 애플리케이션 (0)	2023.02.21

블로그의 정보

Study Repository

rlaehddnd0422

Spring / 순수 Servlet 패턴, JSP 패턴

순수 Servlet

첫 번째로, 등록 로직입니다.

두 번째로, 저장 로직입니다.

세 번째로 회원 목록 조회입니다.

JSP 패턴

첫 번째 등록 로직입니다.

두 번째는 저장 로직입니다.

세 번째 로직은 회원 목록 조회입니다.

'📕 Backend > MVC Pattern' 카테고리의 다른 글

블로그의 정보

활동하기

티스토리툴바

순수 Servlet

첫 번째로, 등록 로직입니다.

두 번째로, 저장 로직입니다.

세 번째로 회원 목록 조회입니다.

JSP 패턴

첫 번째 등록 로직입니다.

두 번째는 저장 로직입니다.

세 번째 로직은 회원 목록 조회입니다.

'📕 Backend > MVC Pattern' 카테고리의 다른 글

블로그의 정보

활동하기

공유하기

다른 글

티스토리툴바