servlet과 자바 코드만으로 HTML을 만들면 매우 복잡하고 비효율적이다
자바코드로 HTML을 만들어 내는것 보다 HTML 문서에 동적으로 변경해야 하는 부분만 자바 코드를 넣을 수 있다면 더 편리할 것이다.
템플릿 엔진을 사용하면 HTML 문서에서 필요한 곳만 코드를 적용해서 동적으로 변경할 수 있다.
JSP,Thymeleaf,Freemarker,Velocity 등이 있다.
JSP로 작업해보기
🤞 참고 )
JSP는 성능과 기능면에서 다른 템플릿 엔진과의 경쟁에서 밀리면서, 점점 사장되어 가는 추세이다.
welcom page 변경
경로) main/webapp/index.html
<!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>
JSP 라이브러리 추가
build.gradle에 추가
implementation 'org.apache.tomcat.embed:tomcat-embed-jasper'
implementation 'javax.servlet:jstl'회원 등록 폼 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/heml;charset=UTF-8" language="java" %>
첫줄은 JSP 문서라는 뜻이다. JSP 문서는 이렇게 시작해야 한다.
첫 줄을 제외하고는 완전히 HTML과 똑같다. JSP는 서버 내부에서 서블릿으로 변환되는데, 우리가 만들었던 MemberFormServlet과 거의 비슷한 모습으로 변환된다.
실행 : http://localhost:8080/jsp/members/new-form.jsp
실행시 .jsp 까지 적어주어야 한다.
회원 저장 JSP
경로) main/webapp/jsp/members/save.jsp
<%@ page import="hello.servlet.domain.member.MemberRepository" %>
<%@ page import="hello.servlet.domain.member.Member" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
//
request, response 사용 가능
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>
<meta charset="UTF-8">
</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 는 java 코드를 그대로 다 사용할 수 있다.
<%@ page import="hello.domain.member.MemberRepository" %>는 자바의 import 문과 같다
``<% ~~ %> 이 부분엔 자바 코드를 입력할 수 있다.
<%= ~~ %> 이 부분엔 자바 코드를 출력할 수 있다.
회원 저장 JSP를 보면, 회원 저장 서블릿 코드와 같다. 다른점이 있다면, HTML을 중심으로 하고, 자바 코드를 부분부분 입력해주었다.
<% ~ %>를 사용해서 HTML 중간에 자바 코드를 출력하고 있다.
회원 목록 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>
<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를 사용해서 중간에 <tr><td>HTML 태그를 반복해서 출력
서블릿과 JSP의 한계
Servlet으로 개발할 때는 뷰(view)화면을 위한 HTML을 만드는 작업이 자바 코드에 섞여서 지저분하고 복잡
JSP를 사용한 덕분에 뷰를 생성하는 HTML 작업을 깔끔하게 가져가고
중간중간 동적으로 변경이 필요한 부분만 java를 적용
회원 저장 JSP를 보면 코드의 상위 절반은 회원을 저장하기 위한 비지니스 로직이고,
나머지 하위 절반만 결과를 HTML로 보여주기 위한 뷰 영역이다. 회원영역도 마찬가지
코드를 잘 보면, JAVA 코드, 데이터를 조회하는 레포지토리 등등 다양한 코드가 모두 JSP에 노출
JSP가 너무 많은 역할을 한다.
수백 수천줄이 있다면 유지보수 지옥에 빠질 것이다.
