오봉이와 함께하는 개발 블로그

스프링 MVC 1 - 서블릿으로 회원 관리 웹 애플리케이션 만들기 본문

BE/Servlet

스프링 MVC 1 - 서블릿으로 회원 관리 웹 애플리케이션 만들기

오봉봉이 2022. 8. 11. 00:33
728x90

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

먼저 서블릿으로 회원 등록 HTML 폼을 제공해보자.

MemberFormServlet - 회원 등록 폼

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

MemberFormServlet은 단순하게 회원 정보를 입력할 수 있는 HTML Form을 만들어서 응답한다.
자바 코드로 HTML을 제공해야 하므로 쉽지 않다.

실행

http://localhost:8080/servlet/members/new-form을 통해 실행할 수 있다.
HTML Form 데이터를 POST로 전송해도 전달 받는 서블릿이 없기 때문에 오류가 발생한다.

MemberSaveServlet - 회원 저장

이제 실제 회원 데이터가 저장되도록 해보자.
전송 방식은 POST HTML Form과 같다

@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")); // request.getParameter()의 결과는 항상 문자이기 때문에 숫자로 변환

        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을 동적으로 만들어서 응답한다.

MemberListServlet - 회원 목록

저장된 모든 회원 목록을 조회하는 기능을 만들어보자.

@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>");
    }
}
  1. memberRepository.findAll()을 통해 모든 회원을 조회
  2. 회원 목록을 HTML for 루프를 통해 회원 수 만큼 동적으로 생성하고 응답한다.

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

템플릿 엔진

서블릿과 자바 코드로만 HTML을 만들었다.
서블릿 덕분에 동적으로 원하는 HTML을 만들 수 있었다.
정적인 HTML 문서라면 화면이 계속 달라지는 페이지를 만드는 것은 불가능하다.
그런데, 서블릿 코드를 보면 매우 복잡하고 가독성도 떨어지며 유지보수도 어려울 것이다.
자바코드로 HTML을 만드는 것보다 HTML 문서에 동적으로 변경해야 하는 부분만 자바 코드를 넣을 수 있다면 더 편리할 것이다.

그래서 템플릿 엔진이 나왔다.
템플릿 엔진을 사용하면 HTML 문서에 필요한 곳만 자바 코드를 적용해서 동적으로 변경할 수 있다.
템플릿 엔진에는 JSP, Thymeleaf, Freemarker, Velocity등이 있다.

참고

JSP는 성능, 기능 모두 다른 템플릿 엔진과 경쟁에서 밀리면서 점점 사장되어 간다.
스프링과 잘 통합되는 Thymeleaf를 사용하자.

Welcome 페이지 변경

지금부터 서블릿에서 JSP, MVC 패턴, 직접 만드는 MVC 프레임워크, 스프링까지 할 예정이기 때문에 welcome 페이지를 변경하자.

<!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>
출처 : 인프런 김영한 지식 공유자님 강의 - 스프링 MVC 1편 백엔드 웹 개발 핵심 기술
728x90
저작자표시 (새창열림)

'BE > Servlet' 카테고리의 다른 글

스프링 MVC 1 - 프론트 컨트롤러 도입 v1  (0) 2022.08.11
스프링 MVC 1 - 프론트 컨트롤러 패턴 소개  (0) 2022.08.11
스프링 MVC 1 - 회원 관리 웹 애플리케이션 요구사항  (0) 2022.08.11
스프링 MVC 1 - HttpServletResponse 사용법  (0) 2022.08.10
스프링 MVC 1 - HTTP 요청 데이터 API 메시지 바디 TEXT, JSON  (0) 2022.08.10
'BE/Servlet' Related Articles more
Comments