🌱 Spring MVC (1) Servlet, JSP : 예전 방식으로 간단한 회원 가입, 조회 애플리케이션 작성

Kim Dae Hyun·2021년 7월 1일

Spring jsp servlet spring mvc

Spring-MVC

목록 보기

1/13

Github 소스코드

Spring MVC가 얼마나 편한 기능을 제공해주고 또 그 기능의 내부는 어떤 식으로 이루어졌는지 알아보기 위해 아주 별로인 예전 방식의 Servlet과 JSP를 사용하여 간단한 애플리케이션을 만들어보자.

🔎 이런거 해볼 거에요

1. servlet만을 이용하여 구현

2. JSP만을 이용하여 구현

3. Servlet + JSP MVC패턴 적용

📌 프로젝트 준비 (공통)

spring은 사용하지 않을 것이지만 내장 tomcat과 개발 생산성을 위해 두 개 dependency를 갖는 springboot application을 생성합니다.
https://start.spring.io/
위 사이트에서 프로젝트를 생성하고 Spring web과 Lombok 을 dependency로 추가해줍니다.

📌 프로젝트 테스트 (공통)

Servlet을 사용하기 위해 main클래스에 @ServletComponentScan 어노테이션을 추가해줍니다.

@SpringBootApplication
@ServletComponentScan

public class ServletApplication {

	public static void main(String[] args) {
		SpringApplication.run(ServletApplication.class, args);
	}

}

main클래스를 실행했을 때 아래 화면이 나오면 프로젝트 준비가 잘 된 것 입니다.

📌 도메인 클래스 작성 (공통)

클라이언트로부터 입력받은 값을 메모리 혹은 DB에 저장하기 위해 데이터를 받아줄 도메인 클래스가 필요합니다.
우리는 username과 age를 입력받을 것이기에 아래와 같이 작성해줍니다.

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

📌 Repository 작성 (공통)

저장소를 위한 Repository 클래스를 작성합니다.
DB를 사용하지 않기 때문에 메모리에 저장해야 합니다. (그냥 서버가 켜져있는 동안 전역변수에 저장한다고 생각하면 됩니다.)
저장(save), ID로 찾기(findById), 전체조회(FindAll) 3개 메서드를 구현합니다.

public class MemberRepository {

    private static Map<Long, Member> store = new HashMap<>();
    private static Long sequence = 0L;

    private static final MemberRepository instance = new MemberRepository();

    private MemberRepository() {
    }

    public static MemberRepository getInstance() {
        return instance;
    }

    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 clearAll() {
        store.clear();
    }
}

👉🏻 참고

static 클래스를 사용하고 기본 생성자를 private로 하여 외부에 호출을 막는 이유

Repository 클래스를 싱글톤으로 관리하기 위함 입니다.

싱글톤 클래스의 인스턴스가 단 한 개만 생성되어 생성된 인스턴스를 여러 곳에서 공유하여 사용하는 것으로, 단 한 개의 객체만 생성되는 것을 보장하는 디자인 패턴입니다.

클래스 내부에서 static으로 클래스를 컴파일 타임에 미리 생성해놓고 사용하는 쪽에서는 getInstance 메서드로 생성된 객체를 받아 사용합니다.

기본 생성자까지 막아두었으므로 외부에서 new 로 클래스 인스턴스를 생성할 수 없게 됩니다.

1-1 Form을 랜더링하기 위한 Servlet 작성

Servlet을 사용하기 위해 HttpServlet을 상속받고 service 메서드를 오버라이딩 합니다.
@WebServlet url매핑 정보를 설정합니다.
PrintWriter 객체를 이용하여 html을 작성하는 것이 보이십니까?
- IDE의 도움없이.... 이건 좀 아닌 것 같지만 일단 해봅시다..

@WebServlet(name = "memberFormServlet", urlPatterns = "/servlet/members/new-form")
public class MemberFormServlet extends HttpServlet {    

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {

        res.setContentType("text/html");
        res.setCharacterEncoding("utf-8");

        PrintWriter w = res.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");
    }
}

아래와 같은 Form이 생성되었습니다.

1-2 저장을 위한 Servlet 작성

MemberRepository 객체를 받아옵니다.
이전과 동일하게 HttpServlet을 상속받고 service메서드를 구현하고 @WebServlet에 매핑정보를 설정합니다.
- Form을 랜더링하는 servlet의 form action url과 잘 맞춰주세요.
Request객체의 getParameter메서드를 이용하여 전송된 데이터를 파싱합니다.
파싱된 데이터로 Member객체를 생성하고 Repository의 save메서드를 이용하여 저장합니다.
저장 후 결과를 위한 html도 구성해줍니다. (....)

@WebServlet(name = "memberSaveServlet", urlPatterns = "/servlet/members/save")
public class MemberSaveServlet extends HttpServlet {

    private MemberRepository memberRepository = MemberRepository.getInstance();

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {

        String username = req.getParameter("username");
        int age = Integer.parseInt(req.getParameter("age"));

        Member member = new Member(username, age);

        memberRepository.save(member);

        res.setContentType("text/html");
        res.setCharacterEncoding("utf-8");
        PrintWriter w = res.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>");
    }
}

데이터 전송시 아래와 같은 페이지가 랜더링 됩니다.

1-3 전체 데이터 조회

MemberRepository의 findAll 저장소의 모든 데이터를 받아옵니다.
받아온 데이터를 foreach문을 이용하여 html을 구성해줍니다.

@WebServlet(name = "memberListServlet", urlPatterns = "/servlet/members")
public class MemberListServlet extends HttpServlet {

    private MemberRepository memberRepository = MemberRepository.getInstance();

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {

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

        res.setContentType("text/html");
        res.setCharacterEncoding("utf-8");

        PrintWriter w = res.getWriter();
        w.write("<html>");
        w.write("<body>");
        for (Member member : members) {
            w.write("<ul>");
            w.write("<li>");
            w.write("<span> username: "+member.getUsername()+" age: "+ member.getAge()+"</span>");
            w.write("</li>");
            w.write("</ul>");
        }
        w.write("</body>");
        w.write("</html>");
    }
}

아래와 같은 결과가 나오네요.

Servlet은 JAVA코드로 HTML을 작성해야 하기 때문에 매우 불편합니다.

또한 이렇게 JAVA코드와 HTML코드가 혼재되어 있는 것은 개발 생산성, 유지보수성 등 모든 면에서 좋지 않습니다.

2-1 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>

2-2 저장을 위한 JSP 파일 작성

<% %> 내에 Java코드 작성
<%= %> 결과값 출력
.jsp 파일 내에서 request, resoponse 객체는 별도 선언 없이 예약어처럼 사용 가능합니다.

<%@ page import="basic.servlet.domain.member.MemberRepository" %>
<%@ page import="basic.servlet.domain.member.Member" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
  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>

2-3 전체 데이터 조회

out 또한 request, response와 마찬가지로 선언 없이 예약어처럼 사용 가능합니다.

<%@ page import="basic.servlet.domain.member.MemberRepository" %>
<%@ page import="basic.servlet.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>
    <title>Title</title>
</head>
<body>
<a href="/index.html">메인</a>
<table>
  <thead>
  <th>id</th>
  <th>username</th>
  <th>age</th>
  </thead>
  <tobdy>
    <%
      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>");
      }
    %>
  </tobdy>
</table>
</body>
</html>

JSP가 순수 servlet보다는 HTML을 구성하는데는 훨씬 편한 것 같네요.

3-1 Form을 위한 JSP파일 작성

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<!-- 상대경로 사용 => localhost:8080/test/page.jsp 에서 이 jsp파일 호출시
     action url은 localhost:8080/test/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>

3-2 Form 랜더링 요청을 위한 Servlet 작성

urlPattenrs에 지정한 경로로 요청이 오면 Form이 있는 .jsp파일을 응답하기 위한 Servlet을 작성합니다.

이 경로로 요청이 왔을 때 jsp파일을 응답하는 2가지 방법이 있습니다. (jsp파일 뿐만 아니라 다른 리소스에 대해서도 마찬가지 입니다.)

Redirect
- 클라이언트로부터 요청이 왔을 때 test.jsp를 응답하려면 클라이언트에게 test.jsp로 이동하라는 응답을 보내고 다시 클라이언트의 브라우저가 서버에 test.jsp를 요청해야 한다.
- 즉, 2번의 요청이 발생하는 것이다.
Dispatcher.forward
- 클라이언트로부터 요청이 왔을 때 test.jsp를 응답하려면 서버 내부적으로 test.jsp에 요청을 보내고 클라이언트에게 응답해준다.
- 즉 클라이언트의 브라우저는 1번의 요청으로 test.jsp를 호출한 것이다. 사실 요청은 추가로 서버 내부적으로 발생하였지만 브라우저는 이 사실을 알지 못한다.

@WebServlet(name = "mvcMemberFormServlet", urlPatterns = "/servlet-mvc/members/new-form")
public class MvcMemberFormServlet extends HttpServlet {

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {

        String viewPath = "/WEB-INF/views/new-form.jsp";
        RequestDispatcher dispatcher = req.getRequestDispatcher(viewPath);
        dispatcher.forward(req, res);
    }
}

3-3 저장을 위한 Servlet 작성

MemberRepository를 통해 받은 데이터를 저장하고 저장된 결과를 랜더링을 위해 save-result.jsp에 전달해주어야 합니다.

request.setAttribute("key", value);
- Model을 이용하여 View단으로 데이터를 넘겨줍니다.
View 단에서 Model에 담아준 데이터를 뿌려주는 역할을 해주게 됩니다.
(save-result.jsp)

@WebServlet(name = "mvcMemberSaveServlet", urlPatterns = "/servlet-mvc/members/save")
public class MvcMemberSaveServlet extends HttpServlet {

    private MemberRepository memberRepository = MemberRepository.getInstance();

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {

        String username = req.getParameter("username");
        int age = Integer.parseInt(req.getParameter("age"));

        Member member = new Member(username, age);

        memberRepository.save(member);

        String viewPath = "/WEB-INF/views/save-result.jsp";
        RequestDispatcher dispatcher = req.getRequestDispatcher(viewPath);
        req.setAttribute("member",member);
        dispatcher.forward(req, res);
    }
}

3-4 저장된 결과를 랜더링해주기 위한 JSP 파일 작성

<%= %> 혹은 ${ } 문법을 이용하여 Model로 전달받은 데이터를 뿌려줍니다.

setAttibute()로 Model에 값을 세팅하고 getAttribute()로 받아옵니다.

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>Title</title>
</head>
<body>
<!-- 방법 1
     getAttribute()로 받은 값이 object 타입이기 때문에 캐스팅이 필요함 .. 조금 번거로움-->
<%--<ul>--%>
<%--  <li>id=<%=((Member)request.getAttribute("member")).getId()%></li>--%>
<%--  <li>username=<%=((Member)request.getAttribute("member")).getUsername()%></li>--%>
<%--  <li>age=<%=((Member)request.getAttribute("member")).getAge()%></li>--%>
<%--</ul>--%>

<!-- 방법2 -->
<ul>
  <li>id=${member.id}</li>
  <li>username=${member.username}</li>
  <li>age=${member.age}</li>
</ul>
<a href="/index.html">메인</a>
</body>
</html>

3-5 전체 데이터 조회를 위한 Servlet 작성

마찬가지로 MemberRepository의 findAll() 메서드를 이용하여 모든 데이터를 읽어오고 읽어온 데이터를 Model에 담아 View단으로 전달합니다.

Object타입으로 전달되기 때문에 List도 관계없이 Model에 담아 전달할 수 있습니다.

@WebServlet(name = "mvcMemberListServlet", urlPatterns = "/servlet-mvc/members")
public class MvcMemberListServlet extends HttpServlet {

    private MemberRepository memberRepository = MemberRepository.getInstance();

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {

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

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

3-6 전체 데이터 조회 결과를 랜더링하기 위한 JSP파일 작성

JSTL core tag를 이용해 반복문을 돌려 Model에 담긴 모든 데이터를 출력합니다.

<%@ 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>
  <tobdy>
  <c:forEach var="member" items="${members}">
    <tr>
      <td>${member.id}</td>
      <td>${member.username}</td>
      <td>${member.age}</td>
    </tr>
  </c:forEach>
  </tobdy>
</table>
</body>
</html>

👉🏻 참고

/WEB-INF 이하에 있는 파일은 외부에서 직접 접근이 불가능합니다.

즉, 외부에서 바로 접근시키고 싶지 않은 파일을 위치시켜야 합니다.

예를들어 members.jsp (전체 회원의 조회 결과를 출력하기 위한 jsp파일)에 직접 파일의 경로로 접근을 허용하지 않고 servlet을 통해 접근하게 하도록 할 수 있습니다.

인프런 김영한님의 스프링 MVC 1편 을 수강하고 정리한 내용입니다.

Kim Dae Hyun

좀 더 천천히 까먹기 위해 기록합니다. 🧐

다음 포스트