728x90
커스텀태그
특별한 목적을 위해 직접 만든 HTML 또는 XML 태그를 의미함
웹 페이지의 동작이나 모양을 제어하는 데 사용되며, 프로그래머가 원하는 기능을 쉽게 추가하고 재사용할 수 있게 해줌
커스텀 태그의 특징
- 재사용성
- 웹 페이지에서 자주 사용되는 특정 기능을 쉽게 재사용할 수 있음
- 모듈화
- 코드를 더 작은 논리적 단위로 분할하여 유지보수를 더 쉽게 만들어줌
- 즉, 특정 기능이 변경되어야 할 때, 해당 기능을 담당하는 커스텀 태그만 수정하면 되며 다른 부분에 영향을 미치지 않음
- 가독성과 유지보수성
- 의미 있는 태그 이름을 사용하여 코드의 가독성을 향상시키며, 비슷한 기능을 가진 여러 태그를 논리적으로 그룹화하여 코드를 더 쉽게 관리할 수 있음
커스텀태그 사용 방법
> 태그 파일의 위치는 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
'Web > JSP' 카테고리의 다른 글
| [JSP] Filter (0) | 2023.07.04 |
|---|---|
| [JSP] POJO 와 NOT POJO (0) | 2023.07.04 |
| [JSP] EL 표현식 (0) | 2023.07.03 |
| [JSP] JSTL (0) | 2023.07.03 |
| [JSP] 웹 페이지 MVC 분리 (0) | 2023.07.03 |
