JSTL이란 , 코어 태그 라이브러리

JSTL 이란 ?

 

JSTL(JSP Standard Tag Library)는 JSP(JAVA Server Pages)에서 자주 사용되는 기능을 제공하는 태그 라이브러리.

널리 사용되는 커스텀 태그를 표준으로 만든 라이브러리 이다 , 

간결하고 이해하기 쉬운 코드라는 것이 장점이다.

JSTL 을 사용하면 , JAVA 코드 방식을 최소화 하여 HTML 과 태그 위주로 템플릿을 구성 할 수있어 ,

비즈니스 로직과 분리가 용이해진다.

---

JSTL 의 주요기능

✅ 코어(Core) 태그 → 제일 많이 사용 , 반복문 조건문 등 기본적인 로직을 다루는 태그

✅ Formatting 태그 → 날짜 , 숫자 문자열의 포매팅을 지원

✅ sql 태그 → JSTL을 통해 데이터베이스 쿼리를 작성할 수 있는 태그 , 간단한 조회작업에 사용

✅ xml 태그 → xml 데이터 다루는 태그

✅ Funtion 태그 → 문자열 조작과 괸련된 태그(EL 함)

 

코어 태그 라이브러리 사용해보기

https://tomcat.apache.org/taglibs/standard/

http://tomcat.apache.org/download-taglibs.cgi

1️⃣위의 사이트에서 jstl-1.2.jar 파일 다운

2️⃣jstl-1.2.jar , standard jar 파일을 WEB-INF/lib에 넣기.

 

3️⃣jsp 파일 상단에 taglib 등록

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

4️⃣ <c 를 자동완성하면 다양한 태그들의 구성을 볼 수 있다.

---

코어 태그 라이브러리 종류 자세히 보기

---

1️⃣. c:out (value 속성 필수)

<c:out value="Hello JSTL !!!" />

---

2️⃣.c:set (value , var) : 변수정의

• var : 변수명
• value : 값

//정의
<c:set value="홍길동" var="name"/>
<c:set value="22" var="age"/>

//출력
<c:out value="${name}"/>
<c:out value="${age}"/>

 

➡️ 변수 공유에 대해

✔️EL로 변수 표현 ( JSTL - JAVA 변수 공유 O )

<p>${name}</p>
<p>${age}</p>
<p>${age * 100}</p>

✔️ Java 코드 사용 ( JSTL - JAVA 변수 공유 X )

<%= name %> // 컴파일 오류

JSTL 의 목적은 자바혼용을 최대한 막고자 자바를 지양하기 때문.

---

3️⃣. c:remove (변수삭제)

<c:remove var="add"/>
\${empty add} = ${empty add} 

-> 삭제시 null 확인.

// 정의하지 않은 변수확인
<c:remove var="en"/>
\${empty en} = ${empty en}

-> 오류 발생하지 않음.

---

4️⃣. c:if ( test 속성내에 조건문을 EL형식으로.)

<%
    // 예시로 request에 "user"라는 속성을 설정
    request.setAttribute("user", "admin");
%>

<c:if test="${user == 'admin'}">
    <p>관리자 계정으로 로그인하셨습니다.</p>
</c:if>

<c:if test="${user != 'admin'}">
    <p>일반 사용자 계정으로 로그인하셨습니다.</p>
</c:if>

<c:if test="${not empty user}">
    <p>사용자 정보가 존재합니다.</p>
</c:if>

<c:if test="${age >= 20}">
    <p>성인입니다.</p>
</c:if>

---

5️⃣ c : choose ( test 속성내에 조건문을 EL형식으로.)

➡️if 태그와 choose 태그의 비교
✔️if c:if
▪️ test 속성에 EL Tag를 사용하여 조건지정.
▪️else 구문 태그가 없음으로 if 로 처리해야함.
✔️choose
▪️if 문에 else 구문 태그가 없음을 보완하여 나옴.
▪️JAVA 의 switch ~ case 구문과 같다.
✔️특징
▪️test 속성에 EL tag를 사용하여 조건 지정.
▪️EL 관계식을 활용함. ▪️모든 type 에 대해서 "==" 이 사용 가능함.

 

➡️자바 코드와 , c:if , c:choose 비교

1) JAVA 코드 사용한다면 ?
</pre>
<% String color = request.getParameter("color");
if(color.equals("1")){%>
	<span style="color:red;">Red 선택</span>
<%}else if(color.equals("2")){%>
<span style="color:green;">Green 선택</span>
<%}else if(color.equals("3")){%>
<span style="color:blue;">Blue 선택</span>
<%}else if(color.equals("4")){%>
<span style="color:yellow;">yellow 선택</span>
<%}else {%>
<span style="color:purple;">color 선택 오류</span>
<%}%>
<pre>
2) c : if Tag
</pre>
<c:if test="${param.color==1}"><span style="color:red;">Red 선택</span></c:if>
<c:if test="${param.color==2}"><span style="color:green;">Green 선택</span></c:if>
<c:if test="${param.color==3}"><span style="color:blue;">Blue 선택</span></c:if>
<c:if test="${param.color==4}"><span style="color:yellow;">yellow 선택</span></c:if>
<c:if test="${param.color==5 || empty param.color}"><span style="color:purple;">color 선택 오류</span></c:if>
<pre>
3) c: choose Tag
</pre>
<c:choose>
<c:when test="${param.color==1}"><span style="color:red;">Red 선택</span></c:when>
<c:when test="${param.color==2}"><span style="color:green;">Green 선택</span></c:when>
<c:when test="${param.color==3}"><span style="color:blue;">Blue 선택</span></c:when>
<c:when test="${param.color==4}"><span style="color:yellow;">yellow 선택</span></c:when>
<c:otherwise><span style="color:purple;">color 선택 오류</span></c:otherwise>
</c:choose>

---

6️⃣c:forEach (var , items) 반복문

// 자바구문
for (String s:students) {
  out.print(s); 
  }
  
//c:forEach 구문 , 
// var 에 사용할 변수
// items 에 EL 형식의 배열 변수
<c:forEach var="s" items="${students}">
${s} , &nbsp;
</c:forEach>

자바 구문과 비슷하다.

✔️ varStatus 속성의 활용

→ 인덱스 , 카운트 , 처음이냐 마지막이냐 를 알 수 있음.

	<%
	String[] menu = { "미트볼야채볶음", "삼치김치조림", "돈까스", "간장찜닭", "고추잡채" };
	pageContext.setAttribute("menuList", menu);
	%>


	<table border="1" style="text-align: center; width: 100%;">
		<tr>
			<th>menu</th>
			<th style="color:red;">index</th>
			<th style="color:blue;">count</th>
			<th style="color:red;">first</th>
			<th style="color:blue;">last</th>
		</tr>
		<c:forEach var="menu" items="${menuList}" varStatus="vs">
			<tr>
			<td>${menu}</td>
			<td style="color:red;">${vs.index}</td>
			<td style="color:blue;">${vs.count}</td>
			<td style="color:red;">${vs.first}</td>
			<td style="color:blue;">${vs.last}</td>
			</tr>
		</c:forEach>
	</table>

✔️ 구문 반복 for 문 사용

구간반복: StartIndex(begin), LastIndex(end), 증감값(step) 적용하기

 //자바식 표현
 for (int i=1; i<=10; i++){
 }

//c:forEach 태그 사용
<c:forEach var="i" begin="1" end="10" step="1" varStatus="vs">
${i} ${vs.last ? "" : ", "}
</c:forEach>

✔️ 중첩 for 문 사용

<span class="red"> test 1 : for + for</span>
<table border="1" style="text-align: center; width: 100%;">
<c:forEach var="i" begin="1" end="30" step="5" varStatus="vs">
<tr>
<c:forEach var="j" begin="${i}" end="${i+4}" step="1" varStatus="vas">
<td>${j}</td>
</c:forEach>
</tr>
</c:forEach>
</table>

<hr>
<span class="red"> test 2 : for + if</span>
<table border="1" style="text-align: center; width: 100%;">
<tr>
<c:forEach var="i" begin="1" end="30" step="1">
<td>${i}</td> <c:if test="${i%5==0}"></tr><tr></c:if>
</c:forEach>
</tr>
</table>

---

7️⃣c: forTokens : 배열의 구분자 정리

변수 : var ,배열 : items, 구분자 : delims

구분자는 단일 구분자로 1개를 명시하거나 , 복수구분자로 다중으로 구분가능한데 , 공백도 사용하면 공백이 구분자로 활용된다.

➡️ test 1.1) 단일 구분자 <br>
<c:forTokens var="city" items="성남,용인,서울# 부산,Paris , NewYork" delims=",">
${city} ,
</c:forTokens><br>
➡️ test 1.2) 복수 구분자 <br>
<c:forTokens var="city" items="성남 ! 용인,서울# 부산 Paris , NewYork" delims=", #!">
${city} ,
</c:forTokens><br>

---

8️⃣ c : import 페이지 삽입 

변수 공유는 불가하다 !

➡️ jstl:import -> 웹Page포함, 변수공유 불가능
<c:import url="ex02_ifForm.jsp"></c:import>

---

9️⃣ c : redirect 페이지 이동

url이 변화한다 !

➡️ jstl:redirect -> 웹Page이동 . response.sendRedirect(); 와 동일
<c:redirect url="/jsp01/ex01_HelloJSP.jsp" ></c:redirect>

---

🔟 c: url 경로의 변수

웹 애플리케이션의 컨텍스트 경로를 자동으로 추가. 경로 문제 없이 url 생성

 

✔️ 페이지 이동처리

<c:url value="/product/list" var="productListUrl" />
<a href="${productListUrl}">상품 목록 보기</a>

 

✔️이미지처리

<c:url var="aaa" value="../images/aaa.gif"/>
<img alt="urltest" src="${aaa}">

현재위치에서 상대경로를 통해 찾아옴.