[ 프로젝트 ] JSTL 의 기본 개념 및 사용 방법

 

---

 

JSTL ( JavaServer Pages Standard Tag Libary )

 

•  정식 명칭은 자바서버 페이지 표준 태그 라이브러리이다.

•  Java EE 기반의 웹 애플리케이션 개발 플랫폼을 위한 컴포넌트 모음이다.

•  JSP 개발을 단순화하기 위한 태그 Library 이다.

•  JSP 페이지 내에서 자바 코드를 사용하지 않고 로직을 내장하는 효율적인 방법이다.

 

※ 스크립틀릿

예전에는 스크립틀릿을 많이 사용했지만 HTML 코드 내에 Java 코드가 섞임으로써 가독성이 떨어진다.

이러한 이유로 현재는 JSTL이 많이 쓰인다.

( = JSTL을 사용하면 개발자는 HTML과 태그로 이루어진 일관된 소스를 볼 수 있다. )

 

 

※  EL

-  우리가 일반적으로 알고 있는 JSTL 은 JSTL + EL의 조합이다.

-  EL은 표현 언어( Expression Language )라고 한다.

 

-  EL언어 예

•  스크립틀릿

<%= name%>

•  EL

${name}

 

-  EL의 연산자 종류/표현법

연산부호	EL 연산자
+	+
*	*
/	div
\&\&	and
||	or
==	eq
!=	ne
<	ge
>	lt
<=	ge
>=	le

 

 

▶  JSTL의 장점

-  JSP를 단순화하는 많은 태그를 제공함으로써 빠른 개발이 가능토록 한다.

-  다양한 페이지에서 JSTL 태그를 사용 가능하다. ( = 코드 재사용성이 높다. )

 

 

▶  JSTL의 사용법

-  JSTL은 라이브러리이기 때문에 사용하기 전에 core를 header에 추가해야 한다.

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

 

-  JSTL Tag

태그 이름	기능	접두어	참조 구문
Core tags	변수 지원, 흐름 제어, URL 처리	c	<% @taglib uri="http://java.sun.com/jstl/core" prefix="c" %>
Formattting tags	지역, 메세지 형식, 숫자 및 날짜 형식	fmt	<% @taglib uri="http://java.sun.com/jstl/fmt" prefix="fmt" %>
SQL tags	Oracle, Mysql 같은 DBMS 상호작용 위한 태그	sql	<% @taglib uri="http://java.sun.com/jstl/sql" prefix="sql" %>
JSTL function	컬렉션 처리, String 처리	fn	<% @taglib uri="http://java.sun.com/jstl/functions" prefix="fn" %>
XML  tags	XML 코어, 흐름제어, XML 변환	x	<% @taglib uri="http://java.sun.com/jstl/xml" prefix="x" %>

 

 

▶  Core Tags

태그명	설명
<c:set>	변수명에 값을 할당한다.
<c:out>	수식의 결과 값을 출력한다.
<c:if>	조건식에 해당하는 블럭과 사용될 scope 설정( 조건에 따라 내부코드 실행 )
<c:choose>	Switch문과 비슷, 여러 조건 처리시 사용
<c:when>	<c:choose>의 하위태그, 조건에 따라 코드 실행
<c:otherwise>	<c:choose>의 하위태그, 조건 만족 안할시 코드 실행
<c:forEach>	기본 반복 태그, 고정된 횟수 or 초과 수집동안 중첩된 본문 내용 반복
<c:param>	포함하는 import 태그의 URL에 매개 변수 추가
<c:remove>	설정한 변수를 제거한다.
<c:catch>	예외처리

 

 

 

▶  실제 적용 예시

 

•  게시판 List 화면 출력을 위한 JSTL 사용

•  목록을 가진 List를 출력하기 위해 반복문인 <c:forEach>
   var=변수명 , items=List객체명 , varStatus=반복 상태를 알 수 있는 변수를 사용

•  EL을 사용하여 리턴 값 표현

<c:forEach var="board" items="${boardLists}" varStatus="status">
   <article>
	<div>
	   <a href="/community/view.do?cpage=${board.cpage}&pseq=${board.pseq}&type=${board.type}">${board.title}</a>
	</div>
	   <ul class="list-inline">
		<li class="list-inline-item">by <a href="" data-toggle="modal" data-target="#userprofile" onclick="userProfile('${board.nick}')">${board.nick}</a></li>
		<li class="list-inline-item">${board.wdate}</li>
	   </ul>
     </article>
  </c:forEach>

 

 

•  글쓰기 버튼 part에 JSTL 사용

•  <c:choose> , <c:when> , <C:otherwise>를 사용하여 조건문 형태로 사용한다.

•  session 객체의 nick 값이 비어있는(= 로그인 X ) 상태에선 글쓰기 버튼을 누르면
   로그인을 하라는 알람 창이 뜬다.

•  로그인된 상태라면, 글쓰기 버튼을 누르면 글쓰기 창이 띄워지게 된다.

<!--  버튼 Part -->
<c:choose>
	<c:when test="${empty sessionScope.nick}">
		<input type="button" value="글쓰기" class="btn btn-transparent" style="float: right;" onclick="javascript:alert('로그인을 하셔야합니다.')" >
	</c:when>
	<c:otherwise>
		<input type="button" value="글쓰기" class="btn btn-transparent" style="float: right;" onclick="location.href='/community/write.do'" >
	</c:otherwise>
</c:choose>

 

 

•  게시글 상세보기 페이지 수정 / 삭제 버튼 JSTL 사용

•  <c:if> 내 test속성이 참값이면 실행된다.

•  Session 객체의 nick 값과 리턴 nick 값이 같으면 즉 자신이 쓴 글 상세보기 페이지 안에서는
   수정/삭제 버튼이 생긴다

<div style="float: right;">
	<c:if test="${board.nick eq sessionScope.nick }">
		<input type="button" value="수정" class="btn btn-transparent" onclick="location.href='/community/modify.do?pseq=${board.pseq}&type=${board.type}'" />
		<input type="button" value="삭제" id="dbtn" class="btn btn-transparent" onclick="location.href='/community/delete.do?pseq=${board.pseq}&type=${board.type}'" />
	</c:if>
</div>