[Spring] MVC 1편 (5) - 서블릿, JSP를 사용한 회원 관리 웹 애플리케이션

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

회원 정보 : username(이름), age(나이)
기능 요구사항 : 회원 저장, 회원 조회

📌 서블릿으로 구현하기

✅ 회원 등록 폼 - Servlet

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

        // 응답으로 html 받기위해 설정
        response.setContentType("text/html");
        response.setCharacterEncoding("utf-8");

        PrintWriter w = response.getWriter();

        // form 작성시 form action 경로로 이동
        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 화면을 웹 브라우저에 전달한다.

✅ 회원 저장 - Servlet

@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");
        // Form을 통해 넘어온 정보를 변수에 입력
        String username = request.getParameter("username");
        int age = Integer.parseInt(request.getParameter("age"));

        // 인스턴스 생성해서 멤버 저장소에 저장
        Member member = new Member(username, age);
        memberRepository.save(member);

	// 결과를 HTML로 반환
        response.setContentType("text/html");
        response.setCharacterEncoding("utf-8");

        PrintWriter w = response.getWriter();
        
        // 동적 HTML 생성
        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>");

    }
}

Form을 통해 입력된 정보를 request.getParameter() 메서드를 사용해 가져와 Member 객체를 생성한다.
이를 이용해서 비즈니스 로직을 수행하고 동적으로 HTML을 생성해서 전달한다.

✅ 회원 목록 - Servlet

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

 	// memberRepository에 저장된 모든 멤버를 동적으로 출력
        for (Member member : memberList) {
            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>");
    }
}

동적으로 HTML을 생성할 때 for문을 사용할 수 있다.

✅ 템플릿 엔진

서블릿을 이용해서 동적으로 HTML을 생성할 수 있다.
하지만 자바 코드에서 HTML 코드를 한줄한줄 적는 것은 번거롭고 디버깅이 굉장히 힘들다.
이를 해결하기 위해 템플릿 엔진을 사용할 수 있다! e.g. JSP, Thymeleaf, Freemarker, Velocity
템플릿 엔진을 사용하면 HTML 코드에서 필요한 곳만 코드를 적용해서 동적으로 변경할 수 있다.

📌 JSP로 구현하기

main/webapp 폴더 밑에 있는 파일은 기본적으로 호출된다.

✅ JSP 라이브러리 추가

//JSP 추가 시작
implementation 'org.apache.tomcat.embed:tomcat-embed-jasper'
implementation 'javax.servlet:jstl'
//JSP 추가 끝

JSP를 사용하기 위해 위 코드를 build.gradle에 추가해주어야 한다.

✅ 회원 등록 폼 - 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>

첫줄은 JSP 문서임을 나타낸다.
HTML만 전달하는 회원 등록 폼에는 자바 코드가 들어가지 않고 HTML 코드와 거의 같다.

✅ 회원 저장 - JSP

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

JSP 에서 자바 코드는 <%~~%> 안에 적어준다.
자바 코드를 출력하려면 <%=~~%> 안에 적어준다.
서블릿과 같이 request와 response를 사용할 수 있다.

✅ 회원 목록 - 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를 사용해서 for문을 이용해 동적으로 HTML을 출력한다.

📌 서블릿, JSP의 한계

서블릿을 사용하는 경우 뷰 화면을 위한 HTML 코드와 자바 코드가 섞여있어 지저분하고 복잡했다.
JSP를 사용하면 뷰를 생성하는 HTML 코드를 기본적으로 사용하면서 중간중간 동적으로 변경이 필요한 부분에만 자바 코드를 적용했다.
하지만 두가지 방법 모두 뷰와 비즈니스 로직을 한 파일 안에서 구현하기 때문에 각각 너무 많은 역할을 한다. (유지보수 어려움)
또한 대부분 뷰 부분과 비즈니스 로직의 변경은 동시에 발생하지 않는다. 변경의 라이프 사이클이 다른 부분을 하나의 코드에서 관리하는 것은 유지보수하기 좋지 않다.

→ MVC 패턴 등장!

강의 링크

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

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

www.inflearn.com

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

'Spring' 카테고리의 다른 글

[Spring] MVC 1편 (6) - MVC 패턴 적용 (0)	2022.03.29
[Spring] MVC 1편 (4) - HTTP 응답 데이터 (0)	2022.03.29
[Spring] MVC 1편 (3) - HTTP 요청 데이터 (0)	2022.03.29

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

📌 서블릿으로 구현하기

✅ 회원 등록 폼 - Servlet

✅ 회원 저장 - Servlet

✅ 회원 목록 - Servlet

✅ 템플릿 엔진

📌 JSP로 구현하기

✅ JSP 라이브러리 추가

✅ 회원 등록 폼 - JSP

✅ 회원 저장 - JSP

✅ 회원 목록 - JSP

📌 서블릿, JSP의 한계

강의 링크

'Spring' 카테고리의 다른 글

티스토리툴바