본문 바로가기

웹개발/프론트관련

[JSP] 나만의 커스텀 태그 만들어 효율적인 작업을 하자

많은 분들이 사용하고 계시는 JSTL처럼 JSP 상단에 선언하여 사용할 수 있는 자신만의 taglib 만드는 방법을 소개하려 합니다.

파일 구조


빨간색 박스로 쳐져 있는 파일들이 필요합니다.


우선, 함수를 만들 자바 클래스부터 생성을 해줍니다.

저는 geun 폴더 아래에 TableMakeTag.java로 생성했습니다.

(이름은 자신이 알아보기 쉬운 이름으로 만들어주시면 됩니다.)

TableMakeTag.java 파일을 생성하면 아래와 같은 화면이 나옵니다.

  TableMakeTag.java

 



Tag를 만들기 위해서는 doTag()라는 함수를 사용해야 합니다.

그러기 위해 SimpleTagSupport 상속받아야 합니다.

Maven 에서 SimpleTagSupport를 사용하기위해 pom.xml 에 아래 내용을 추가합니다.


다음에 아래 사진처럼 extends SimpleTagSupport  적어주면 상속을 받게 됩니다.


준비가 완료 되었으니,

row, col, width, height 의 값들을 입력받아 테이블을 만들어 주는 태그를 구현해 보겠습니다.


입력을 받을 수 있게 도와주는 DynamicAttributes 인터페이스도 상속받도록 하겠습니다.




저기 빨간 밑줄이 나오는 이유는 인터페이스의 함수들이 선언이 되지 않았기 때문입니다.


선언 되지 않은 doTag(), setDynamicAttribute()를 오버라이드 하겠습니다.



OK를 누르면 아래와 같은 화면이 나옵니다.



setDynamicAttribute() 입력받을 것을 Map에 저장 하고
doTag()  만들고 싶은 함수를 구현합니다.

저는 아래처럼 구현했습니다.


함수에 대한 자세한 설명은 생략하도록 하겠습니다.


 geun.tld


다음 절차로 tld 파일을 생성해야 합니다.


WEB-INF 아래에 tlds라는 폴더를 만들고 xml 파일을 생성해 파일 형식을 tld로 바꿔주시면 됩니다.


만든 후 아래와 같이 적어주면 됩니다.


1) <name>tableMake<name> 

<c:if>처럼 if 자리에 넣을 이름을 적는 자리입니다.


2) <tag-class>
사이에는 처음에 만든 클래스의 위치를 넣어주면 됩니다.

3) <dynamic-attributes>true</dynamic-attributes>를 적어주셔야
동적으로 입력을 받을 수 있습니다.

좀 더 깊이 있는 내용들은 구글에 검색 하시는게 좋을 것 같습니다.


  web.xml


다음으로 web.xml에 사용 할 tld 파일을 등록 해줍니다.


web.xml에 아래 내용을 추가해주시면 됩니다.


1) <taglib-url> 사이에는 
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
위 예시 처럼 url에 사용할 주소를 적어주시면 됩니다.

2) <tablib-location> 사이에는 tld의 위치를 적습니다.


 main.jsp

 



<script> 위에 


<%@taglib prefix="geun" uri="/taglibs/geun.tld" %>처럼 선언해주시면 됩니다.

1) prefix는 원하는 변수 명을 사용하면 되고

2) url은 web.xml에서 <taglib-url> 사이에 적은 주소를 적으면 됩니다.

그 후 아래쪽에 
3) <geun:tableMake row="4" col="3" width="500" height="200"/>
이런 식으로 적어주면 됩니다.

이제 모든 과정이 끝났습니다.

그럼 결과를 확인해야겠죠?!

톰캣을 시작합니다.

그럼 아래와 같은 결과가 나옵니다.


공통으로 설계되어 있는 부분들의 값을 넘길 때 커스텀 태그를 만들어서 사용 한다면 번거로움을 덜지 않을까 싶습니다.


(ex: Config 값, 서버 정보 , 코드값 등)