Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- scanner
- extraParams
- extjs
- lazy loading
- error
- 명시적외래키
- intellij
- ORM
- Store
- EFCore
- c#
- dbContext
- 코드프로그래머스
- c#코딩의기술실전편
- React
- JavaScript
- 대전본식영상
- .net
- vscode
- minimalAPI
- 에스가든스냅
- 스냅잘찍음
- ViewModel
- Request
- 라도무스dvd
- LINQ
- mac
- JSON
- 상속
- Config
Archives
- Today
- Total
ejyoo's 개발 노트
[JSP] memberList를 JSTL과 EL로 리팩토링 본문
보기전에...
본 글은 회원 관리에 필요한 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> </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 |