## 64. JSP를 이용하여 MVC 모델1 구조로 변경하기
- MVC 모델1 특징 이해
- JSP 구동 원리 이해 및 사용법
- EL 사용법
- JSTL 사용법
JSTL 라이브러리 추가하기
build.gradle (app-server)
=>
ㄴ 코끼리 아이콘 선택
=>
ㄴ 또는 프로젝트 우클릭 > Reload Gradle Project 선택
=>
ㄴ Project 선택
=>
ㄴ 외부 라이브러리 등록됨을 확인
=>
ㄴ App 실행
=>
login.jsp
ㄴ 해당 코드 모두 jstl 로 변경해주기
=>
login.jsp
ㄴ 해당 태그 라이브러리 선언해주기
=>
login.jsp
ㄴ request.setAttribute("refresh", "2;url=/auth/form.jsp"); 대신 위와 같은 jstl 코드 사용하기
=>
login.jsp
ㄴ <jsp:useBean> 태그는 JSP 페이지에서 JavaBean 객체를 생성하고 설정하는 데 사용
=>
login.jsp
ㄴ <c:set> 태그를 사용하여 JavaBean 객체의 속성을 설정
ㄴ JavaBean 객체(m)에 대한 phone과 password 속성을 설정
=>
login.jsp
ㄴ <c:if> 태그: Core JSTL 라이브러리에서 제공하는 조건문을 처리하는 태그
=>
login.jsp
ㄴ 해당 자바 코드는 이제 jstl 로 변경되었으므로 제거
=>
login.jsp
ㄴ Member loginUser = memberDao.findByPhoneAndPassword(m); 대신 sessionScope 에 loginUser 라는 이름으로 memberDao.findByPhoneAndPassword(m) 값을 담도록 함
=>
login.jsp
ㄴ 로그인한 사용자의 정보를 세션에 저장하고 이 정보를 다른 부분에서 사용할 수 있도록 함
=>
login.jsp
ㄴ response.sendRedirect("/"); 대신 위와 같은 jstl 코드 추가
=>
login.jsp
ㄴ 해당 코드 제거
=>
login.jsp
ㄴ 해당 코드를 jstl 태그로 변경
=>
login.jsp
ㄴ 변경한 jstl 코드
=>
login.jsp
ㄴ 해당 코드 제거
ㄴ App 실행
=>
ㄴ 에러 발생
=>
login.jsp
ㄴ name 대신 var 를 이용하도록 함
=>
login.jsp
<%@ page
language="java"
pageEncoding="UTF-8"
contentType="text/html;charset=UTF-8"
trimDirectiveWhitespaces="true"
errorPage="/error.jsp"%>
<%@ page import="bitcamp.report.dao.MemberDao"%>
<%@ page import="bitcamp.report.vo.Member"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="refresh" value="2;url=/auth/form.jsp" scope="request"/>
<jsp:useBean id="m" class="bitcamp.report.vo.Member" scope="page"/>
<c:set target="${pageScope.m}" property="phone" value="${param.phone}"/>
<c:set target="${pageScope.m}" property="password" value="${param.password}"/>
<c:if test="${not empty param.savePhone}">
<%
Cookie cookie = new Cookie("phone", m.getPhone());
response.addCookie(cookie);
%>
</c:if>
<c:if test="${empty param.savePhone}">
<%
Cookie cookie = new Cookie("phone", "no");
cookie.setMaxAge(0);
response.addCookie(cookie);
%>
</c:if>
<jsp:useBean id="memberDao" type="bitcamp.report.dao.MemberDao" scope="application"/>
<c:set var="loginUser" value="${memberDao.findByPhoneAndPassword(m)}" scope="session"/>
<jsp:useBean id="loginUser" type="bitcamp.report.vo.Member" scope="session"/>
<c:redirect url="/"/>=>
ㄴ 로그인이 정상적으로 실행됨을 확인
Member.java (common)
ㄴ 우클릭 > Generate 선택 > toString() 선택 (단축키 : command + N)
=>
ㄴ [OK] 선택
=>
Member.java (common)
ㄴ 해당 코드가 추가됨
=>
ㄴ 전화번호 저장 체크박스 선택
=>
ㄴ 로그아웃 후에 로그인 선택 시 전화번호가 저장되어있음을 확인
header.jsp
ㄴ jstl 태그 라이브러리 설정을 추가
=>
header.jsp
ㄴ <c:choose> 태그 이용하여 다중 조건문 만들기
ㄴ EL 태그 이용하기
=>
header.jsp
=>
header.jsp
=>
header.jsp
ㄴ EL 태그 대신 <c:when> 태그와 <c:otherwise> 이용하여 다중 조건문 처리
=>
header.jsp
ㄴ jsp 태그 제거
=>
header.jsp
ㄴ jstl 태그로 변경하기
=>
header.jsp
ㄴ .photo 추가
=>
=>
ㄴ 사진이 존재하지 않는 회원의 로그인 확인
=>
ㄴ 사진이 존재하는 회원의 로그인
logout.jsp
ㄴ jstl 태그 설정 추가
=>
logout.jsp
ㄴ response.sendRedirect("/"); 대신 jstl 태그로 변경
=>
=>
ㄴ 로그아웃 정상적으로 실행됨을 확인
=>
login.jsp
ㄴ 해당 코드 제거
ㄴ import 코드 정리
board/list.jsp
ㄴ jstl 태그 설정 추가
=>
board/list.jsp
ㄴ 페이지를 로드한 후 2초 후에 list.jsp 페이지로 이동하고, URL에 category 파라미터를 포함하도록 함
=>
board/list.jsp
ㄴ 해당 코드 제거
=>
board/list.jsp
ㄴ requestScop.refresh 값 출력해보기
=>
ㄴ 값이 정상적으로 넘어감을 확인
=>
board/list.jsp
=>
board/list.jsp
ㄴ 해당 코드 제거
=>
board/list.jsp
ㄴ <c:forEach> 태그 사용하기
ㄴ board 라는 이름으로 list 를 pageContext 에 저장
=>
board/list.jsp
ㄴ 해당 코드 제거
=>
board/list.jsp
ㄴ list 내용이 출력되지 않는 현상 발생
=>
board/list.jsp
ㄴ 해당 코드 제거
=>
board/list.jsp
ㄴ param. 추가해주기
=>
ㄴ 리스트가 정상적으로 출력됨을 확인
=>
board/list.jsp
ㄴ 해당 코드 제거
=>
board/list.jsp
ㄴ fmt 태그 라이브러리 추가 (포맷 설정)
=>
board/list.jsp
ㄴ simpleDateFormatter 대신 <fmt:formatDate> 태그 이용하기
=>
board/list.jsp
ㄴ 이제 SimpleDateFormat 을 사용하지 않으므로 해당 코드 제거
=>
board/list.jsp
ㄴ 해당 코드 제거
ㄴ import 코드 정리
=>
board/list.jsp
ㄴ errorPage 설정 추가
board/detail.jsp
ㄴ 태그 라이브러리 추가
=>
board/detail.jsp
ㄴ 해당 코드 추가
=>
board/detail.jsp
ㄴ 해당 코드 제거
=>
board/detail.jsp
ㄴ 해당 코드 추가
=>
=>
board/detail.jsp
ㄴ EL 태그를 jstl 로 변경해주기
=>
board/detail.jsp
ㄴ <c:if> 태그 이용하기
=>
board/detail.jsp
ㄴ <c:forEach> 태그 이용하기
=>
board/detail.jsp
ㄴ 해당 코드 제거
=>
board/detail.jsp
ㄴ import 코드 정리
=>
board/detail.jsp
ㄴ 해당 코드 제거
=>
board/detail.jsp
ㄴ 해당 코드 제거
=>
board/detail.jsp
ㄴ 조회수를 jstl 을 이용하여 처리하도록 변경
=>
board/detail.jsp
ㄴ 해당 코드 제거
=>
board/detail.jsp
ㄴ 해당 코드 제거
=>
board/detail.jsp
ㄴ 해당 코드는 jstl 로 변경할 수 없으므로 그대로 두기
=>
ㄴ 게시물 상세보기 정상적으로 출력됨
=>
ㄴ 게시글 내용 변경 > [변경] 선택
=>
ㄴ 로그인 되어있지 않은 경우 로그인 창으로 이동됨
=>
ㄴ 게시글 수정이 정상적으로 실행됨을 확인
ㄴ App.java 우클릭 > More Run/Debug > Modify Run Configuratioin... 선택
=>
ㄴ Working directory 경로 변경해주기
=>
App.java
ㄴ app-server 추가해주기
=>
App.java
ㄴ app-server 추가해주기
=>
ㄴ index2.html 삭제
=>
ㄴ 정상적으로 실행됨을 확인
=>
member 도 board 와 동일한 방법으로 수정해주기
=>
member/list.jsp
<%@ page
language="java"
pageEncoding="UTF-8"
contentType="text/html;charset=UTF-8"%> <%-- directive element --%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>회원</title>
</head>
<body>
<jsp:include page="../header.jsp"/>
<h1>회원 목록</h1>
<div style='margin:5px;'>
<a href='/member/form.jsp'>새 회원</a>
</div>
<table border='1'>
<tr><th>번호</th> <th>이름</th> <th>전화번호</th></tr>
</thead>
<tbody>
<jsp:useBean id="memberDao" type="bitcamp.report.dao.MemberDao" scope="application"/>
<c:set var="list" value="${memberDao.findAll()}" scope="page"/>
<c:forEach items="${list}" var="member">
<tr>
<td>${member.no}</td>
<td>
<img src='http://urnfabxxeceu19010753.cdn.ntruss.com/member/${member.photo}?type=f&w=30&h=40&faceopt=true&ttype=jpg'>
<a href='/member/detail.jsp?no=<%=m.getNo()%>'>${member.name}</a></td>
<td>${member.phone}</td></tr>
</c:forEach>
</tbody>
</table>
<a href='/'>메인</a>
<jsp:include page="../footer.jsp"/>
</body>
</html>
member/detail.jsp
<%@ page
language="java"
pageEncoding="UTF-8"
contentType="text/html;charset=UTF-8"
trimDirectiveWhitespaces="true"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<jsp:useBean id="memberDao" type="bitcamp.report.dao.MemberDao" scope="application"/>
<c:set var="member" value="${memberDao.findBy(param.no)}"/>
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>회원</title>
</head>
<body>
<jsp:include page="../header.jsp"/>
<h1>회원</h1>
<c:if test="${empty member}">
<p>해당 번호의 회원이 없습니다!</p>
</c:if>
<c:if test="${not empty member}">
<form action='/member/update.jsp' method='post' enctype='multipart/form-data'>
<table border='1'>
<tr>
<th style='width:120px;'>사진</th>
<td style='width:300px;'>
<c:if test="${empty member.photo}">
<img style='height:80px' src='/images/avatar.png'>
</c:if>
<c:if test="${not empty member.photo}">
<a href='https://kr.object.ncloudstorage.com/bitcamp-nc7-bucket-25/member/${member.photo}'>
<img src='http://urnfabxxeceu19010753.cdn.ntruss.com/member/${member.photo}?type=f&w=60&h=80&faceopt=true&ttype=jpg'>
</a>
</c:if>
<input type='file' name='photo'></td></tr>
<tr>
<th style='width:120px;'>번호</th>
<td style='width:300px;'><input type='text' name='no' value='${member.no}' readonly></td></tr>
<tr>
<th>이름</th>
<td><input type='text' name='name' value='${member.name}'></td></tr>
<tr>
<th>전화번호</th>
<td><input type='tel' name='phone' value='${member.phone'></td></tr>
<tr>
<th>암호</th>
<td><input type='password' name='password'></td></tr>
<tr>
<th>직책</th>
<td><select name='position'>
<option value='0' ${String.valueOf(member.getPosition()) == '0' ? "selected" : ""}>관리자</option>
<option value='1' ${String.valueOf(member.getPosition()) == '1' ? "selected" : ""}>일반직원</option></select></td></tr>
</table>
<div>
<button>변경</button>
<button type='reset'>초기화</button>
<a href='/member/delete.jsp?no=${member.no}'>삭제</a>
<a href='/member/list.jsp'>목록</a>
</div>
</form>
</c:if>
<jsp:include page="../footer.jsp"/>
</body>
</html>
member/detail.jsp
