Web/JSP

[JSP] 커스텀태그

웹코린이 2023. 7. 4. 17:43
728x90

 

 

커스텀태그

특별한 목적을 위해 직접 만든 HTML 또는 XML 태그를 의미함
웹 페이지의 동작이나 모양을 제어하는 데 사용되며, 프로그래머가 원하는 기능을 쉽게 추가하고 재사용할 수 있게 해줌

 

 

 

커스텀 태그의 특징

  1. 재사용성
    • 웹 페이지에서 자주 사용되는 특정 기능을 쉽게 재사용할 수 있음
  2. 모듈화
    • 코드를 더 작은 논리적 단위로 분할하여 유지보수를 더 쉽게 만들어줌
    • 즉, 특정 기능이 변경되어야 할 때, 해당 기능을 담당하는 커스텀 태그만 수정하면 되며 다른 부분에 영향을 미치지 않음
  3. 가독성과 유지보수성
    • 의미 있는 태그 이름을 사용하여 코드의 가독성을 향상시키며, 비슷한 기능을 가진 여러 태그를 논리적으로 그룹화하여 코드를 더 쉽게 관리할 수 있음

 

 

 

커스텀태그 사용 방법

 

> 태그 파일의 위치는 src/main/webapp/WEB-INF/tags 디렉토리에 위치한다 (이 디렉토리에 위치한 파일 중 .tag 확장자 또는 .tagx 확장자를 가지는 파일만 태그파일로 인식됨)

 

 

 

 

> jsp 파일에서 태그 라이브러리로 태그 파일 위치와 태그 파일 참조를 명시한다 tagdir 속성을 사용하여 태그 파일이 위치한 디렉토리의 경로를 입력한다

<%@ taglib tagdir="/WEB-INF/tags" prefix="ryu" %>

 

 

 

> 생성된 태그 파일의 이름은 커스텀 태그의 이름이 되어 아래와 같이 작성할 수 있다 (위의 이미지를 예시로 사용)

<ryu:nav />
<ryu:footer />

 

 

 

 

 

커스텀 태그를 활용한 실습

 

main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="model.BoardVO,java.util.ArrayList" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="ryu" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>메인 페이지</title>
</head>
<body>
 
<script type="text/javascript">
	function check(){
		var ans=prompt('비밀번호를 입력하세요.');
		location.href='controller.jsp?action=mypage&mpw='+ans;
	}
</script>
	<ryu:nav />
	<hr>
	<table border="1">
		<tr>
			<th>글 번호</th><th>글 제목</th><th>작성자</th>
		</tr> <!-- xxx.getAttribute() / request.getParameter() -->
		<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>
	<br>
	<c:if test="${ not empty mid }">
		<a href='controller.jsp?action=insertBoardPage'>게시글 작성</a>
	</c:if>
 
</body>
</html>

 

board.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="model.BoardVO" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="ryu" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상세 페이지</title>
</head>
<body>
 
<script type="text/javascript">
	function delBoard(){
		var ans=confirm('정말 삭제할까요?');
		if(ans==true){
			document.form.action.value='deleteBoard';
			document.form.submit();	
		}
	}
</script>
	
	<ryu:board_content/>
	
	<br>
 
	<a href="controller.jsp?action=main">메인으로 돌아가기</a>
 
</body>
</html>

메인 페이지(main.jsp) 에서는 nav 태그를 통해 사용자의 로그인 여부를 확인할 수 있도록 작성하였고 글 목록을 출력하여 글 번호 / 글 제목 / 작성자 가 표시되도록 설정하였고, 사용자가 글 번호를 클릭하게 되면 컨트롤러를 통해 상세 페이지(board.jsp)로 이동하도록 작성하였다

 

 상세 페이지에서는 글을 삭제할 수 있도록 js를 통해 작성하였고 커스텀 태그(board_content)를 통해 글 내용이 보이도록 작성하였다

 

 

 

 

 

728x90