커스텀 태그로 View 모듈화 하기

1.

JSP 에서, 

 

JS (자바스크립트) 언어는 모두,

webapp 폴더 - js 폴더 - main.js 

파일에 코드를 작성 했다.

 

 

/* b_main.jsp */

function check() {
	var ans = prompt('비밀번호를 입력하세요.');
	location.href = 'controller.jsp?action=mypage&mpw=' + ans;
}



/* d_board.jsp */

function delBoard() {
	var ans = confirm('정말 삭제할까요 ?');
	if(ans == true) {
		document.form.action.value = 'deleteBoard';
		document.form.submit();	
	}
}



/* f_mypage.jsp */

function remove() {
	var ans = confirm("정말로 탈퇴하시겠습니까 ?");
	if(ans == true) {
		document.form.action.value = 'deleteMember';
		document.form.submit();
	}
}

 

현재, js 파일에는 함수들이 작성 되어 있는 상태 이다.

 

<script src="js/main.js"></script>

 

이렇게 경로를 지정해줘서, 함수를 불러 올 수 있게 하면 된다.

 

2.

커스텀 태그 개념으로 코드를 작성한 모습이다.

 

 

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

 

상단에, JSTL 태그를 사용 하겠다는 태그 지시어를 작성 하고,

 

c:if test="${data.writer ne mid}">
	<form name="form" action="controller.jsp" method="post">
		<input type="hidden" name="action" value="updateBoard">
		글 번호: <input type="text" name="num" value="${data.num}" readonly> <br>
		글 제목: <input type="text" name="title" value='${data.title}' readonly> <br>
		글 내용: <input type="text" name="content" value='${data.content}' readonly> <br>
		작성자: <input type="text" name="writer" value='${data.writer}' readonly>
	</form>
</c:if>



<c:if test="${data.writer eq mid}">
	<form name="form" action="controller.jsp" method="post">
		<input type="hidden" name="action" value="updateBoard">
		글 번호: <input type="text" name="num" value="${data.num}" readonly> <br>
		글 제목: <input type="text" name="title" value='${data.title}'> <br>
		글 내용: <input type="text" name="content" value='${data.content}'> <br>
		작성자: <input type="text" name="writer" value='${data.writer}' readonly> <br>
		<input type="submit" value="게시글 변경"> <input type="button" value="게시글 삭제" onClick="delBoard()">
	</form>
</c:if>

 

3.

 

 

<%@ tag language="java" pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<c:if test="${not empty mid}">
	<a href='controller.jsp?action=insertBoardPage'><jsp:doBody /></a>
</c:if>

 

4.

 

 

<%@ tag language="java" pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<c:if test="${empty mid}">
	<a href="controller.jsp?action=signupPage">회원가입</a>
	<form action="controller.jsp" method="post">
		<input type="hidden" name="action" value="login">
		<input type="text" name="mid" placeholder="아이디 입력" required>
		<input type="password" name="mpw" placeholder="비밀번호 입력" required>
		<input type="submit" value="로그인">
	</form>	
</c:if>
<c:if test="${not empty mid}">
		<a href='controller.jsp?action=mypagePage'>${mid}님의 마이페이지</a>
		<a href='controller.jsp?action=logout'>로그아웃</a>
</c:if>

 

5.

 

 

<%@ tag language="java" pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%@ attribute name="border" %>

<h2><jsp:doBody /></h2>

<hr>

<table border="${border}">
	<tr>
		<th>글 번호</th><th>글 제목</th><th>작성자</th>
	</tr>
	<c:forEach var="v" items="${datas}">
	<tr>
		<td><a href="controller.jsp?action=board&num=${v.num}">${v.num}</a></td>
		<td>${v.title}</td>
		<td>${v.writer}</td>
	</tr>
	</c:forEach>
</table>

 

6.

 

 

커스텀 태그를 활용 하여, .tag 파일에 코드를 옮겨 놓고,

jsp 에서 .tag 파일을 불러오는 식의 코드를 작성 했기 때문에,

 

모듈화에 따른 가독성 증가 및 유지보수가 용이 해진 코드가 되었다.

 

 

자바로 따지면,

코드 다 쪼개서, 함수로 다 모듈화 하고,

해당 함수를 호출 하는것으로 생각 하면 된다.