[JSP] 회원 관리 웹 애플리케이션

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

회원 저장
회원 목록 조회

회원 관리 웹 애플리케이션 코드 비교

Servlet: yeonyeon.tistory.com/100
MVC 패턴: yeonyeon.tistory.com/102

먼저 JSP 라이브러리 추가가 필요하다.

build.gradle에 다음을 추가하고 gradle project refresh를 한다.

implementation 'org.apache.tomcat.embed:tomcat-embed-jasper'
implementation 'javax.servlet:jstl'

webapp에 jsp/members 폴더를 만들어 jsp 파일들을 넣을 것이다.

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>

name, age를 입력해 button을 누르면, form 태그를 이용해 /jsp/members/save.jsp로 데이터 전송

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" %>
<%
	 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>

<%@ page import="" %>를 이용해 import
<% %> java 코드 입력
<%= %> java 코드 출력

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();
%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</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>

for문을 이용해 동적으로 데이터 출력

JSP는 Servlet에 비해 많이 편리해졌다.

동적으로 실행하는 부분을 제외하고는 Java와 Html이 분리되어있다.

하지만 여전히 Java코드와 html코드를 섞여있다는 느낌이 강하다.

JSP 역할이 너무 크고 현재의 예시는 굉장히 간단한 편이지만...

실무에서는 이렇게 간단한 수준에서 그칠 수 없어 코드가 몇천 몇만줄이 되기도 해서 유지보수가 굉장히 힘들다.

이를 개선하기 위한 것이 MVC패턴으로 Java코드와 html 코드를 완전히 분리하기 시작한다.

(다음 글에서 계속)

본 게시글은 김영한 님의 '스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술' 강의를 구매 후 정리하기 위한 포스팅입니다.

내용을 임의로 추가, 수정, 삭제한 부분이 많으며 정확한 이해를 위해서 강의를 구매하시는 것을 추천 드립니다.

inf.run/B756

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

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

www.inflearn.com

'Develop > Java' 카테고리의 다른 글

[MVC] 프론트 컨트롤러 패턴 (2)	2021.05.10
[MVC패턴] 회원 관리 웹 애플리케이션 (0)	2021.05.10
[Servlet] 회원 관리 웹 애플리케이션 (0)	2021.05.06
[Servlet] HttpServletResponse (0)	2021.04.30
[Servlet] HTTP 요청 데이터 - GET, POST, Text, JSON (0)	2021.04.30