JSP로 웹을 만들면 불편하게 자바로 HTML을 작성하지 않을 수 있습니다.
안녕하세요.
오늘은 JSP로 회원 관리 웹을 만들어 보겠습니다.
회원을 저장하고, 전체 회원을 조회하는 기능을 만들 것입니다.
지난 게시글(https://passionate.tistory.com/37)에서는 서블릿으로 회원 관리 웹을 만들어보았습니다.
서블릿으로 웹을 만드니, 동적으로 HTML 페이지를 만들 수 있었지만, 자바로 HTML 페이지를 작성해서 응답 데이터를 만드는 것이 복잡하고 비효율적이라는 단점이 있었습니다.
따라서 오늘은 JSP를 사용해보겠습니다.
JSP를 사용하면 HTML 문서에서 필요한 부분만 자바 코드를 적용해서 동적으로 HTML 페이지를 만들 수 있습니다.
JSP(Java Server Pages)
먼저 JSP가 무엇인지 알아봅시다.
JSP는 HTML 내에 자바 코드를 삽입하여 웹 서버에서 동적으로 웹 페이지를 생성하여 웹 브라우저에 돌려주는 서버 사이드 스크립트 언어입니다[1].
HTML 코드 내에 <% code segment %>를 사용해서 자바 코드를 작성할 수 있습니다.
참고로 JSP가 실행되면 서블릿으로 변환되어서 WAS에 의해 관리되며 필요한 역할을 수행합니다[2]. WAS와 서블릿에 대한 정보는 https://passionate.tistory.com/30 에서 참고해주세요.
회원 등록 폼 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 문서는 첫 줄에 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 를 작성해야 합니다. JSP 문서임을 나타내는 코드입니다.
회원 등록 폼에는 자바 코드가 필요하지 않아서 첫 줄을 제외하고는 완전히 html 코드임을 볼 수 있습니다.
서버를 띄우고 http://localhost:8080/jsp/members/new-form.jsp 에 들어가면 아래 창이 나옵니다.
회원 저장 JSP
다음으로 회원을 저장하는 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();
String username = request.getParameter("username");
int age = Integer.parseInt(request.getParameter("age"));
Member member = new Member(username, age);
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>가장 윗줄의 <%@ %>는 자바의 import문과 같습니다.
아래 두 코드가 같은 뜻입니다.
<%@ page import="hello.servlet.domain.member.MemberRepository" %> // JSP
import hello.servlet.domain.member.MemberRepository; // Java
<% ~~ %>에는 자바 코드를 입력할 수 있고, <%= ~~ %>에는 자바 코드를 출력할 수 있습니다.
JSP 코드를 보면, HTML이 중심이고 <% ~~ %>를 사용해서 중간에 자바 코드를 작성함을 알 수 있습니다.
회원 등록 폼에서 전송 버튼을 누르면 http://localhost:8080/jsp/members/save.jsp가 불리고 아래 페이지가 나옵니다.
회원 목록 JSP
회원의 목록을 출력하는 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 태그를 반복해서 회원 목록을 출력합니다.
http://localhost:8080/servlet-mvc/members에 접속하면 결과는 아래와 같습니다.
서블릿과 JSP의 한계
서블릿은 자바 코드에 HTML 코드를 작성하였더니 코드가 복잡해진다는 문제가 있었습니다.
문제를 해결하기 위해서 HTML을 중심으로 하고 중간에 자바 코드를 작성하는 JSP를 사용하였습니다.
JSP 코드는 어떠셨나요?
JSP를 사용해서 HTML 작업을 깔끔하게 하고, 중간중간 동적으로 변경이 필요한 부분만 자바 코드를 적용할 수 있었습니다. 그런데 이렇게 해도 해결되지 않는 몇 가지 고민이 남습니다.
회원을 저장하고, 회원 목록을 출력하는 코드를 보면 코드의 절반은 HTML이고, 코드의 절반은 자바 비즈니스 로직입니다.
JSP 코드에서 2개의 역할을 하는 것입니다.
이렇게 한 코드에서 여러 역할을 하면, 유지 보수가 힘듭니다.
따라서 개발자들은 비즈니스 로직과 화면을 출력하는 HTML을 나누는 게 좋겠다고 생각하였고, 그 결과 MVC 패턴이 등장하였습니다.
다음 게시글에서는 MVC 패턴을 적용해서 프로젝트를 리팩토링 해보겠습니다.
인프런 '스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술' 강의를 듣고 공부하며 정리한 자료입니다.
잘못된 부분은 피드백 주시면 감사하겠습니다.
글 읽어주셔서 감사합니다 :-)
[0] 스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술, 섹션 3. 서블릿, JSP, MVC 패턴 https://www.inflearn.com/course/스프링-mvc-1
[1] https://ko.wikipedia.org/wiki/%EC%9E%90%EB%B0%94%EC%84%9C%EB%B2%84_%ED%8E%98%EC%9D%B4%EC%A7%80
[2] https://gmlwjd9405.github.io/2018/11/03/jsp.html
'Spring > 스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술' 카테고리의 다른 글
| MVC 프레임워크 만들기 1 - 프론트 컨트롤러 (0) | 2022.01.22 |
|---|---|
| MVC 패턴을 적용해서 회원 관리 웹 만들기 (0) | 2022.01.21 |
| 서블릿으로 회원 관리 웹 만들기 (0) | 2022.01.20 |
| HttpServletResponse 사용하기 (0) | 2022.01.19 |
| HttpServletRequest로 HTTP 요청 데이터 조회하기 (0) | 2022.01.18 |
댓글