본문 바로가기
Spring MVC

[MVC] 서블릿, JSP, MVC 패턴(2)

by 개발 Blog 2024. 10. 29.

공부 내용을 정리하고 앞으로의 학습에 이해를 돕기 위해 작성합니다.

 

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

 

JSP 라이브러리 추가

JSP를 사용하려면 필요한 라이브러리를 build.gradle 파일에 추가해야 한다.

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

스프링 부트 3.0 이상 버전에서는 javax.servlet:jstl을 제거하고 위 코드를 추가해야 한다.

 

회원 등록 폼 JSP

main/webapp/jsp/members/new-form.jsp 파일을 생성하여 회원 등록 폼을 작성한다.

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <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 파일은 서버 내부에서 서블릿으로 변환되며, 이전에 작성한 MemberFormServlet과 비슷한 형태로 동작한다.

실행

  • 브라우저에서 http://localhost:8080/jsp/members/new-form.jsp 경로로 접근하여 확인한다. .jsp까지 경로에 포함해야 한다.

 

회원 저장 JSP

main/webapp/jsp/members/save.jsp 파일을 생성하여 회원 정보를 저장하는 로직을 작성한다.

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="hello.servlet.domain.member.Member" %>
<%@ page import="hello.servlet.domain.member.MemberRepository" %>
<%
    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>
</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="..." %>는 자바의 import와 유사하게 필요한 클래스를 불러온다.
  • <% ~ %> 태그는 자바 코드를 삽입할 수 있고, <%= ~ %>는 자바 코드를 출력할 수 있다.
  • MemberSaveServlet과 유사하게 회원 정보를 저장하고 결과를 HTML로 응답한다.

회원 목록 JSP

main/webapp/jsp/members.jsp 파일을 생성하여 회원 목록을 출력한다.

<%@ page import="hello.servlet.domain.member.Member" %>
<%@ page import="java.util.List" %>
<%@ page import="hello.servlet.domain.member.MemberRepository" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    MemberRepository memberRepository = MemberRepository.getInstance();
    List<Member> members = memberRepository.findAll();
%>
<html>
<head>
    <title>회원 목록</title>
</head>
<body>
<a href="/index.html">메인</a>
<table>
    <thead>
        <tr>
            <th>id</th>
            <th>username</th>
            <th>age</th>
        </tr>
    </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>
  • members 리스트를 조회하여 각 회원의 정보를 <tr><td> 형식으로 반복하여 출력한다.
  • out.write를 통해 HTML 태그와 데이터를 동적으로 생성한다.

 

서블릿과 JSP의 한계

서블릿을 통해 HTML을 생성할 때는 자바 코드와 HTML이 혼합되어 코드가 복잡해지고 관리가 어렵다. JSP를 사용하면 HTML 기반의 코드에서 필요한 부분에만 자바 코드를 삽입하여 뷰를 좀 더 깔끔하게 작성할 수 있다. 하지만, 여전히 JSP에서 비즈니스 로직과 뷰 로직이 혼합되어 있어 유지보수가 어렵다.

MVC 패턴의 등장

비즈니스 로직은 서블릿과 같은 다른 계층에서 처리하고, JSP는 오직 뷰(View)로서의 역할에 집중하도록 하자. 과거 개발자들도 이와 같은 문제를 겪었고, 이를 해결하기 위해 MVC 패턴이 도입되었다. 이제 MVC 패턴을 적용하여 프로젝트를 리팩터링해보자.

'Spring MVC' 카테고리의 다른 글

[MVC] 서블릿, JSP, MVC 패턴(4)  (0) 2024.10.29
[MVC] 서블릿, JSP, MVC 패턴(3)  (0) 2024.10.29
[MVC] 서블릿, JSP, MVC 패턴(1)  (0) 2024.10.29
[MVC] 서블릿(4)  (0) 2024.10.15
[MVC] 서블릿(3)  (0) 2024.10.14