서론
안녕하세요! 이전 포스트에서 서블릿을 활용하여 간단한 회원 관리 시스템을 구현해보았고, 서블릿의 한계에 대해서 알아보았습니다. 서블릿을 이용하게 되면 웹 프로그래밍이 가능해지지만, 화면 인터페이스 구현에 너무 많은 코드가 필요해지는 등의 단점이 있었죠?
기억이 안나신다면 ? 이전포스트 보고 오시는것을 추천합니다. ㅎㅎ
이러한 단점을 보완하기 위해 나온것이 템플릿 엔진이었고, 템플릿 엔진 중에 하나가 JSP 입니다. 오늘 포스트에서는 이전 포스트에서 서블릿으로 진행했던 간단한 회원가입, 조회, 목록보기 작업을 JSP로 진행해보겠습니다.
1. JSP 라이브러리 추가
JSP를 사용하려면 먼저 다음 라이브러리를 build.gradle에 추가해야 합니다.
// JSP 의존성 추가 (스프링부트 3.0 미만)
implementation 'org.apache.tomcat.embed:tomcat-embed-jasper'
implementation 'javax.servlet:jstl'( 저는 스프링부트 3.0 이상이기에 밑에 코드를 추가했습니다. )
// JSP 의존성 추가 (스프링부트 3.0 이상)
implementation 'org.apache.tomcat.embed:tomcat-embed-jasper'
implementation 'jakarta.servlet:jakarta.servlet-api'
implementation 'jakarta.servlet.jsp.jstl:jakarta.servlet.jsp.jstl-api'
implementation 'org.glassfish.web:jakarta.servlet.jsp.jstl' 
라이브러리 추가 이후에 Gradle을 refresh해주시는 것 잊지 말아주시고요!
(코끼리 클릭!!)
2. 회원 등록 폼 JSP
main/webapp/jsp/members/new-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>코드 설명
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
-> JSP문서라는 뜻입니다. JSP 문서는 이렇게 시작합니다.
실행결과
3. 회원 저장 JSP
main/webapp/jsp/members/new-form.jsp
<%@ 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();
System.out.println("save.jsp");
String username = request.getParameter("username");
int age = Integer.parseInt(request.getParameter("age"));
Member member = new Member(username, age);
System.out.println("member = " + member);
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>
</body>
</html>
코드 설명
-
<%@ page import="hello.servlet.domain.member.MemberRepository" %>
-> 자바의 import 문과 같습니다.import hello.servlet.domain.member.MemberRepository
자바로 표현하면 이렇게 되겠죠? -
<% ~~ %>
이 부분에는 자바 코드를 입력할 수 있습니다. -
<%= ~~ %>
이 부분에는 자바 코드를 출력할 수 있습니다.
회원 저장 JSP를 보면, 회원 저장 서블릿 코드와 같습니다. 다른 점이 있다면, HTML을 중심으로 하고, 자바 코드를 부분부분 입력했습니다.
<% ~ %>를 사용해서 HTML 중간에 자바 코드를 출력하고 있습니다.
4. 회원 목록 JSP
main/webapp/jsp/members.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>
<tr>
<th>id</th>
<th>username</th>
<th>age</th>
</tr>
</thead>
<tbody>
<%-- JSP 스크립틀릿에서 반복문을 사용 --%>
<%
for (Member member : members) {
%>
<tr>
<td><%= member.getId() %></td>
<td><%= member.getUsername() %></td>
<td><%= member.getAge() %></td>
</tr>
<%
}
%>
</tbody>
</table>
</body>
</html>코드 설명
회원 리포지토리를 먼저 조회하고, 결과 List를 사용해서 중간에
<tr>, <td> 등의 HTML 태그를 반복해서 출력하고 있습니다.
실행 결과
결론
서블릿으로 개발할 때는 뷰(View)화면을 위한 HTML을 만드는 작업이 자바 코드에 섞여서 지저분하고 복잡했습니다. 하지만, 이제 JSP를 사용한 덕에 뷰를 생성하는 HTML 작업이 깔끔해지고, 중간중간 동적으로 변경이 필요한 부분에는 자바코드를 적용해서 사용했습니다.
하지만, 이것이 과연 깔끔한 코드일까요?
회원 저장 JSP를 보면, 코드의 윗 부분은 회원을 저장하기 위한 비즈니스 로직이고, 코드의 아랫부분은 HTML로 보여주기 위한 뷰 영역입니다. 회원 목록도 마찬가지이고요! 이렇게 되면 JAVA 코드, 데이터를 조회하는 레포지토리 등의 다양한 코드가 JSP에 노출되게 됩니다.
즉, JSP가 너무 많은 역할을 하게 된다는 것이죠. View의 수정할 부분이 있으면 JSP 코드를 건드려야하고, 비즈니스 로직을 수정해야하면 JSP코드를 건드려야 합니다. 이렇게 되면 결국, 유지보수를 하는데에 있어서 힘들어질 수 밖에 없습니다. 그래서 이걸 해결하기 위해서 MVC 패턴이 등장하게 된 것입니다.
지금까지의 포스트들을 정리하자면, 웹 애플리케이션 개발에서는 유지보수성과 효율성을 높이기 위해 끊임없이 새로운 기술이 등장해왔습니다.
1️⃣ 서블릿을 사용하면 HTTP 요청과 응답을 직접 처리할 수 있지만, HTML을 자바 코드 안에서 작성해야 하기 때문에 유지보수가 어렵고, 비효율적인 코드가 많아지는 단점이 있었습니다.
2️⃣ 이를 보완하기 위해 JSP가 등장하여 HTML과 Java 코드를 분리할 수 있게 되었지만, 여전히 비즈니스 로직과 뷰(View) 코드가 뒤섞이는 문제가 남아 있었습니다.
3️⃣ 이런 문제를 해결하기 위해 MVC(Model-View-Controller) 패턴이 도입되었고, 이를 기반으로 스프링 프레임워크가 발전하면서 보다 구조적이고 유지보수하기 쉬운 웹 애플리케이션 개발이 가능해졌습니다.
즉, 서블릿 → JSP → MVC 패턴으로 발전하면서, 웹 애플리케이션은 점점 더 효율적이고 확장 가능한 구조를 갖추게 되었습니다.
다음 포스트에서는 MVC 패턴을 적용하여 리팩토링하는과정을 포스팅 하겠습니다!
다음 포스트에서 만나요!!!
