ejyoo's 개발 노트

[JSP] memberList를 JSTL과 EL로 리팩토링 본문

BackEnd/JAVA Spring

[JSP] memberList를 JSTL과 EL로 리팩토링

ejyoovV 2021. 5. 13. 19:45

보기전에...

본 글은 회원 관리에 필요한 CRUD를 

JSP Servlet, Service, DAO, Ibatis, VO를 모두 구현해 놓은 상태에서 시작한다.

 

구현이 다 완료된 회원 관리 CRUD 코드를

JSTL과 EL 표기법으로 코드 리팩토링 하는 과정이 담겨있다.

 

 

MemberList 코드

<%@page import="java.net.URLDecoder"%>
<%@page import="ejyoo.vo.MemberDTO"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%
	List<MemberDTO> memberList = (List<MemberDTO>) request.getAttribute("memberList");
	int memberListSize = memberList.size();
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>회원 관리 시스템</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://use.fontawesome.com/releases/v5.15.1/js/all.js" crossorigin="anonymous"></script>
<!-- css -->
<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/css/util.css" />

<!-- script -->
<script src="<%= request.getContextPath() %>/js/jquery-3.6.0.js"></script>
<script src="<%= request.getContextPath() %>/js/memberSystemUtil.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark d-flex justify-content-between">
	<a class="navbar-brand" href="memberList">EJYOO</a>
</nav>

<div class="container">
	<div class="col-md-12">
		<h1> &nbsp; </h1>
		<h2>회원 관리</h2>
		<table class="table">
			<thead class="thead-dark">
				<tr>
					<th>#</th>
					<th>아이디</th>
					<th>비밀번호</th>
					<th>전화번호</th>
					<th>이메일</th>
					<th>관리</th>
				</tr>
			</thead>
			<tbody>
			<%	
			if(memberListSize == 0){
			%>
				<tr>
					<td colspan='6'>목록을 불러올 수 없습니다.</td>
				</tr>
			<%
			} else {
				for(MemberDTO memberDto  : memberList){
			%>
				<tr>
					<td><%= memberDto.getUserNo() %></td>
					<td><%= memberDto.getUserId() %></td>
					<td><%= memberDto.getUserPw() %></td>
					<td><%= memberDto.getUserPhone() %></td>
					<td><%= memberDto.getUserEmail() %></td>
					<td>
						<a type='button' class="btn btn-outline-dark btn-sm" href='updateMember?userNo=<%= memberDto.getUserNo() %>'>수정</a>
						<a type='button' class="btn btn-outline-dark btn-sm" onclick="confirmMessage('deleteMember?userNo=<%= memberDto.getUserNo() %>')">삭제</a>
	<%-- 					<a type='button' href='deleteMember?userNo=<%= memberDto.getUserNo() %>'>삭제</a> --%>
					</td>
				</tr>
			<%
				}
			}
			%>
				<tr>
					<td colspan='6' class="textRight">
						<a type='button' class="btn btn-outline-dark btn-sm" href='insertMember' >회원등록</a>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
</body>
</html>

 

변경해야 할 코드들

EL표기법으로 변경

예상 표기법 : ${memberList} (scope는 내장객체 우선순위대로 조회될것임)

JSTL의 IF문으로 변경

예상표기법 : 변경과정 참고

JSTL의 forEach와 EL 표기법 혼합하여 사용

 

변경 과정

  • 라이브 러리 추가

  • 라이브러리에 prefix 에 "c" 추가

c는 core의 의미임, 

이것으로 인하여 if와 forEach 사용 가능

 

 

  • 코드 제거

사유 : 서비스에서 처리한 결과를 Servlet에서는 Request 객체에 담아 forward 하기 때문에 이미 내장객체에 담겨져있음.

즉 EL은 map 형태로 담긴 내장객체에서 Key 값을 추출하여 조회 가능

 

 

  • JSTL IF로 변경

 

empty : null인지 아닌지 체크

memberList는 request 내장객체에 담겨져있으므로

EL 문 사용시 내장객체 우선순위에 의거하여 차례대로 조회

<c:if test="${empty memberList}">
  <tr>
  <td colspan='6'>목록을 불러올 수 없습니다.</td>
  </tr>
</c:if>

 

  • JSTL forEach 로 변경

<c:forEach items="${memberList}" var="memberDto">
  <tr>
  <td>${memberDto.userNo}</td>
  <td>${memberDto.userId}</td>
  <td>${memberDto.userPw}</td>
  <td>${memberDto.userPhone}</td>
  <td>${memberDto.userEmail}</td>
  <td>
  <a type='button' class="btn btn-outline-dark btn-sm" href='updateMember?userNo=${memberDto.userNo}'>수정</a>
  <a type='button' class="btn btn-outline-dark btn-sm" onclick="confirmMessage('deleteMember?userNo=${memberDto.userNo}')">삭제</a>
  </td>
  </tr>
</c:forEach>
저작자표시 비영리

'BackEnd > JAVA Spring' 카테고리의 다른 글

handlebars API, library  (0) 2021.05.26
[JAVA] 비동기 처리 시 웹 처리용 JSON으로 변환할 때 사용하는 JAR 설치 방법(2.10.0)  (0) 2021.05.25
maven JSTL 라이브러리 설치하기  (0) 2021.05.13
JSP 자동완성 또는 추천 목록에서 특정 클래스가 보이지 않을 때.  (0) 2021.05.13
EL표기법과 Java List index 접근하여 출력(결과: 불가능함)  (0) 2021.05.13
'BackEnd/JAVA Spring' Related Articles more