웹개발 수업/Server
[Day +78 / Server]JSTL(2. fmt , 3. fn)
Chole Woo
2021. 10. 14. 20:12
211014 목
1. index
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EL/JSTL</title>
</head>
<body>
<h1>EL(Expression Language)</h1>
<p>
Expression Language(표현 언어)라고 하며
<%= value >, out.print(value)와 같이 JSP화면에 표현하고자 하는
코드를 /${ value }의 형식으로 표현하여 작성하는 것
EL, JSTL 학습 이유 :
서블릿에서는 비즈니스 로직 수행,
JSP에서는 클라이언트에게 응답할 때 응답에 대한 프레젠테이션 로직 사용.
즉, 둘다 형식적으로 자바에서 사용한다.
EL, JSTL을 사용해서 JSP화면을 간단하게 구현할 수 있음
</p>
<ul>
<li><a href="elTest">01_EL이란?</a></li>
<!-- ip:port/eljstl/elTest와 같음 -->
<li><a href ="views/01_EL/02_elParam.jsp">02_EL-param</a></li>
<li><a href = "views/01_EL/03_elOperation.jsp">03_EL_operation</a></li>
</ul>
<h1>JSP Action Tag</h1>
<p>
JSP Action Tag는 XML 기술을 이용하여 기존의 JSP 문법을 확장하는 매커니즘을 제공하는 태그로,
웹 브라우저에서 실행되는 것이 아니라, 웹 컨테이너에서 실행되고 결과만 브라우저로 보냄
</p>
<h3>1. 표준 액션(Standard Action)</h3>
<p>
JSP 페이지에서 바로 사용 가능하고 태그 앞에 jsp: 접두어가 붙음
</p>
<ul>
<li><a href = "views/02_standardAction/01_include.jsp">01_inculde</a></li>
<li><a href = "views/02_standardAction/02_forward.jsp">02_forward</a></li>
</ul>
<h2>2. 커스텀 액션(Custom Action)</h2>
<p>
별도의 라이브러리를 설치해야만 사용 가능하며 대표적으로 JSTL을 사용
커스텀 액션은 모든 태그의 이름 앞에 jsp: 외의 접두어가 붙음
</p>
<a href="views/03_jstl/jstl.jsp">JSTL</a>
</body>
</html>
*index.jsp의 역할
: jstl.jsp 화면과 연결해줌

2. jstl.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSTL</title>
</head>
<body>
<h1>JSTL(JSP Standard Tag Library)</h1>
<p>
JSP에서 사용하는 커스텀 태그로, 공통으로 사용하는 코드의 집합을 사용하기 쉽게 태그화하여
표준으로 제공하는 것을 말함. 라이브러리를 별도로 추가해서 사용해야 함.
</p>
<h3>JSTL 선언 방법</h3>
<p>
JSTL을 사용하고자 하고는 JSP 페이지 상단 page 지시자 아래에 taglib 지시자를 사용하여 선언<br>
<%@ taglib prefix="사용하고자 하는 접두사" uri="tld 파일 상의 url" %> <br><br>
1) prefix : 접두사. 다른 태그와 구별될 수 있는 name space를 제공함<br>
2) uri : 실제 웹 상의 주소가 아닌, 태그 라이브러리를 나타내는 식별자<br>
3) tld : 파일 상의 uri 값을 가리키며, 이 지시자를 통해 작성한 태그 이름과 매칭되는 자바 코드를 찾음<br>
*tld(tag library descriptor) 파일 : 커스텀 태그 정보를 갖고 있는 라이브러리 파일
</p>
<h4>1. JSTL core Library</h4>
변수와 url, 조건문, 반복문 등의 로직과 관련된 JSTL 문법을 제공<br>
<a href="01_core.jsp">core</a>
<h4>2. JSTL Formatting Library</h4>
날짜, 시간, 숫자 데이터의 출력 형식을 지정할 때 사용하는 태그<br>
<a href="02_fmt.jsp">formatting</a>
<h4>3. JSTL Function Library</h4>
문자열 처리에 관한 메소드들을 EL 형식에서 사용할 수 있도록 제공<br>
<a href="03_fn.jsp">function</a>
</body>
</html>
*jstl.jsp 화면의 역할
1) 01_core.jsp
2) 02_fmt.jsp
3) 03_fn.jsp
화면으로 연결

3. 01_core.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="java.util.ArrayList, com.kh.model.vo.Person"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSRL core Library</title>
</head>
<body>
<h1>Test Core page</h1>
<h3>1. 변수</h3>
<pre>
*변수 선언(c:set)
-변수를 선언하고 초기 값을 대입하는 기능을 가진 태그
-변수 선언시 scope 지정할 수 있으며 생략했을 경우 기본 scope는 pageScope
-사용 방법
1) 변수 타입은 별도로 선언하지 않는다
2) 초기 값은 반드시 지정해야 한다
3) c:set 태그로 선언한 변수는 EL 안에서 사용 가능하지만 스크립틀릿 요소에서는 사용 불가
</pre>
<c:set var="num1" value="10"/>
<c:set var="num2" value="20" scope="request"/>
<c:set var="result" value="${ num1 + num2 }" scope="session"/>
num1 변수 값 ; ${ num1 } <br>
num2 변수 값 : ${ num2 } <br>
${ num1 } + ${ num2 } = ${ result } <br>
<!-- 출력확인만 er로 한것 -->
\${ pageScope.num1 } : ${ pageScope.num1 } <br>
\${ requestScope.num2 } : ${ requestScope.num2 } <br>
\${ sessionScope.result } : ${ sessionScope.result } <br>
\${ requestScope.result } : ${ requestScope.result } <br><br>
<!-- 10, 20, 30, 값 없음
why? 값 없는 이유 : requestScope는 존재하지 않으므로 공백-->
<h4>array</h4>
<c:set var="arr" scope="request">
red, blue, yellow, pink, green
</c:set>
<!-- 열고닫는 태그 가운에 넣는 것이 value라는 값임. 중간에 써주는 방식도 있음 -->
arr 배열 값 : ${ arr } <br><br>
<hr>
<pre>
*변수 삭제(c:remove)
지정한 변수를 모든 scope에서 검색해서 삭제함
또는 지정한 scope만 삭제하는 것도 가능
</pre>
<c:set var="result" value="9999" scope="request" />
삭제 전 \${ result } : ${ result } <br>
1) 특정 scope에서 삭제
<c:remove var="result" scope="request"/><br>
삭제 후 \${ result } : ${ result } <br>
2) 모든 scope에서 삭제<br>
<c:remove var="result" />
삭제 후 \${ result } : ${ result } <br>
<hr>
<pre>
*변수 출력(c:out)
데이터를 출력할 때 사용하는 태그
<, >, & 특수문자를 자동으로 이스케이프 시퀀스로 변환 가능
</pre>
<h4>c:out 테스트입니다</h4>
그대로 출력 : <c:out value="<b>태그로 출력하기</b>" escapeXml="true" /> <br>
<!-- 그냥 텍스트로 해석 escape true라서-->
태그로 해석되어 출력 : <c:out value="<b>태그로 출력하기</b>" escapeXml="false"/> <br>
<!-- 태그로 출력 false라서 -->
기본값 출력 : <c:out value="${ requestScope.result }" default="없음"/> <br>
<!-- value값이 없으면 default 출력되도록 -->
<hr>
<h3>2. 조건문 - (c:if test="조건식")</h3>
<pre>
-java의 if문과 비슷한 역할을 하는 태그
-조건식은 test라는 속성의 값으로 지정해야 하며 반드시 EL형식으로 기술해야 함
</pre>
<c:if test="${num1 > num2 }">
num1이 num2보다 큽니다.
</c:if>
<c:if test="${num1 < num2 }">
num1이 num2보다 작습니다.
</c:if>
<!-- 이 문장만 true이므로 화면에 출력된다 -->
<hr>
<h3>3. 조건문(c:choose, c:when, c:otherwise)</h3>
<pre>
-java의 if - else if - else문과 비슷한 역할을 하는 태그
-각 조건들은 c:choose문의 하위 요소로 c:when을 통해 작성(else 값으로는 c:otherwise)
</pre>
<c:set var="no" value="5" />
<c:choose>
<c:when test="${no eq 0}">
처음뵙겠습니다
</c:when>
<c:when test="${no eq 1}">
다시 뵙게되어 반갑습니다.
</c:when>
<c:otherwise>
안녕하세요.
</c:otherwise>
</c:choose>
<hr>
*반복문부터 수업했음
<h3>4. 반복문 - forEach (c:forEach var =" begin="" end="" step="" items="" varStatus="")</h3>
<pre>
<c:ForEach> 반복시 실행할 내용 &tl;/c:forEach>
-Java의 for문에 해당하는 기능 제공
-forEach문에서는 여러가지 속성이 사용됨(But, 한꺼번에 다 써야 하는 것은 아님)
var : 현재 반복 횟수에 해당하는 변수의 이름
begin : 반복이 시작할 요소 번호
end : 반복이 끝나는 요소 번호
step : 반복 시 증가할 수
items : 반복할 객체명
varStatus : 현재 반복에 해당하는 객체의 요소 정보
</pre>
<h4>기본 사용법</h4>
<c:forEach var="i" begin="1" end="10">
반복 확인 : ${ i } <br>
</c:forEach>
<!-- 답
반복 확인 : 1
반복 확인 : 2
반복 확인 : 3
반복 확인 : 4
반복 확인 : 5
반복 확인 : 6
반복 확인 : 7
반복 확인 : 8
반복 확인 : 9
반복 확인 : 10 -->
<br>
<c:forEach var="i" begin="1" end="6">
<h${i}>h${i}<h${i}>
</c:forEach>
<!-- 답 : 글자 점점 작아짐, 태그에서도 사용가능
h1
h2
h3
h4
h5
h6 -->
<br>
<c:forEach var="i" begin="1" end="10" step="3">
반복 확인 : ${ i }
</c:forEach>
<!-- 답
반복 확인 : 1 반복 확인 : 4 반복 확인 : 7 반복 확인 : 10 -->
<br>
<c:forEach var="color" items="${arr}">
<font color="${color}">배열 확인 : ${color }</font>
</c:forEach>
<!-- 답
배열 확인 : red 배열 확인 : blue 배열 확인 : yellow 배열 확인 : pink 배열 확인 : green -->
<br>
<%
ArrayList<Person> list = new ArrayList<>();
list.add(new Person("홍길동", 30, '남'));
list.add(new Person("금성무", 25, '남'));
list.add(new Person("구웅", 31, '남'));
pageContext.setAttribute("list", list);
%>
<table border="1">
<tr>
<th>번호</th>
<th>순번</th>
<th>이름</th>
<th>나이</th>
<th>성별</th>
</tr>
<c:forEach var="p" items="${list}" varStatus="status">
<!-- var = 변수, items="불러올 배열" varStatus="속성" -->
<tr>
<td>${status.index}</td>
<td>${status.count}</td>
<td>${p.name}</td>
<td>${p.age}</td>
<td>${p.gender}</td>
</tr>
</c:forEach>
</table>
<hr>
<h3>5. forTokens</h3>
<pre>
-문자열에 포함된 구분자를 통해 토큰을 분리해서 반복 처리
-Java의 String.split() 또는 StringTokenizer와 비슷한 기능
-item 속성에는 토큰을 포함하는 문자열을 지정하고, delims 속성에는 토큰을 분리하는데 사용할 구획 문자를 기술
</pre>
<c:set var="device">
컴퓨터, 핸드폰.TV/에어컨, 냉장고.세탁기
</c:set>
<ul>
<c:forTokens var="d" items="${device}" delims=",./">
<li>${ d }</li>
</c:forTokens>
</ul>
<!-- 답
컴퓨터
핸드폰
TV
에어컨
냉장고
세탁기 -->
<ul>
<c:forTokens var="color" items="yellow pink aqua green red silver olive lime" delims=" ">
<li style="background:${color}">${ color }</li>
</c:forTokens>
</ul>
<hr>
<h3>6. url</h3>
<pre>
<c:url>
<param name="" value="" />
</c:url>
-url 경로는 생성하고, 해당 url의 param 속성을 선언하여 쿼리스트링을 정의할 수 있는 태그
-해당 태그를 통해 url의 경로와 관련된 쿼리스트링 값을 미리 설정하여 이를 제어할 수 있음
*쿼리 스트링
: ip:port/context path/memberJoin?name=value&name=value&....
이런식으로 속성들을 넘길 수 있는데 이것을 쿼리 스트링이라고 한다
</pre>
<c:url var="url" value="testPage.jsp">
<c:param name="pName" value="LG그램"/>
<c:param name="pCount" value="30"/>
<c:param name="option" value="ssd256G"/>
<c:param name="option" value="ram16G"/>
</c:url>
<a href="${ url }">클릭하세요</a>
<!-- 클릭하면 페이지로 이동되는데 url에 쿼리스트링이 만들어진다 -->
</body>
</html>
4. 03_fn.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Formatting Library</title>
</head>
<body>
<h1>Test Form Library</h1>
<h3>1. formatNumber</h3>
<pre>
숫자의 데이터 포맷 지정
-표현하고자 하는 숫자의 형식을 통화 기호, % 등 원하는 쓰임에 맞게 지정하는 태그
</pre>
<h4>groupingUsed : 숫자 단위의 구분자 표시 여부 지정</h4>
숫자 그대로 출력 : <fmt:formatNumber value="123456789" groupingUsed="false"/><br>
세자리마다 구분하여 출력 : <fmt:formatNumber value="123456789" groupingUsed="true"/><br>
<h4>pattern : 화면에 표시할 데이터 스타일 지정. 소수점 아래 자릿수 지정. #, 0 기호 이용. 초과 값 반올림 처리.</h4>
#을 이용하여 지정 : <fmt:formatNumber value="1.23" pattern="#.###"/><br>
<!-- 1.23 -->
0을 이용하여 지정 : <fmt:formatNumber value="1.23" pattern="0.000"/><br>
<!-- 1.230 -->
<h4>maxIntegerDigits, minIntegerDigits : 표시하고자 하는 수의 단위 표현</h4>
maxIntegerDigits : <fmt:formatNumber value="12345.678" maxIntegerDigits="4"/><br>
<!-- 답 : 2,345.678
1이 잘리고 최대로 표현할 수 있는 수 2345만 남음 -->
minIntegerDigits : <fmt:formatNumber value="12.34" minIntegerDigits="4"/><br>
<!-- 답 : 0,012.34 -->
<h4>maxFractionDigits, minFractionDigits : 표시하고자 하는 소수 자리의 단위 표현</h4>
maxFractionDigits : <fmt:formatNumber value="12300.126"
pattern="000.00" maxFractionDigits="2"/><br>
minFractionDigits : <fmt:formatNumber value="12300.1"
pattern="###.###" minFractionDigits="3"/><br>
<!-- 답
maxFractionDigits : 12300.13(반올림 됨)
minFractionDigits : 12300.100 -->
<h4>type: number(일반 숫자), percent(백분율), currency(통화)</h4>
percent : <fmt:formatNumber value="0.75" type="percent"/><br>
currency : <fmt:formatNumber value="50000" type="currency"/><br>
currencySymbol : <fmt:formatNumber value="50000" type="currency" currencySymbol="$"/>
<hr>
<h3>2. formatDate</h3>
<pre>
날짜와 시간에 데이터 포맷 형식 지정
value 속성에는 java.util.Date 객체를 사용
</pre>
<fmt:formatDate value="<%= new java.util.Date() %>"/>
<!-- 답 : 2021. 10. 14
아무것도 적용하지 않았을 경우-->
<c:set var="current" value="<%= new java.util.Date() %>"/>
<ul>
<li>오늘 날짜 : <fmt:formatDate value="${ current }" type="date"/></li>
<li>현재 시간 : <fmt:formatDate value="${ current }" type="time"/></li>
<li>둘 다 : <fmt:formatDate value="${ current }" type="both"/></li>
<li>[full] : <fmt:formatDate value="${ current }" type="both"
dateStyle="full" timeStyle="full"/></li>
<li>[long] : <fmt:formatDate value="${ current }" type="both"
dateStyle="long" timeStyle="long"/></li>
<li>[medium] : <fmt:formatDate value="${ current }" type="both"
dateStyle="medium" timeStyle="medium"/></li>
<li>[short] : <fmt:formatDate value="${ current }" type="both"
dateStyle="short" timeStyle="short"/></li>
<li>내 맘대로 할거야 패턴 : <fmt:formatDate value="${current }" type="both"
pattern="yyyy-MM-dd(E) HH:mm:ss(a)"/></li>
</ul>
<!-- 답
오늘 날짜 : 2021. 10. 14
현재 시간 : 오후 5:01:23
둘 다 : 2021. 10. 14 오후 5:01:23
[full] : 2021년 10월 14일 목요일 오후 5시 03분 27초 KST
[long] : 2021년 10월 14일 (목) 오후 5시 03분 27초
[medium] : 2021. 10. 14 오후 5:03:27
[short] : 21. 10. 14 오후 5:03
*미디움이 기본임
내 맘대로 할거야 패턴 : 2021-10-14(목) 17:05:50(오후)
-->
<hr>
<h3>3. setLocale/timeZone</h3>
<pre>
지역 설정을 통해 통화 기호나 시간 대역을 다르게 설정 가능
</pre>
<h4>대한민국</h4>
금액 : <fmt:formatNumber value="10000000" type="currency"/><br>
일시 : <fmt:formatDate value="${current }" type="both" dateStyle="full" timeStyle="full"/>
<!-- 답
금액 : ₩10,000,000
일시 : 2021년 10월 14일 목요일 오후 5시 09분 11초 KST -->
<h4>미국/뉴욕</h4>
<fmt:setLocale value="en_us" />
금액 : <fmt:formatNumber value="10000000" type="currency" /><br>
<fmt:timeZone value="America/New_York">
일시 : <fmt:formatDate value="${ current }" type="both" dateStyle="full" timeStyle="full"/><br>
</fmt:timeZone>
<h4>영국/런던</h4>
<fmt:setLocale value="en_us" />
금액 : <fmt:formatNumber value="10000000" type="currency" /><br>
<fmt:timeZone value="Europe/London">
일시 : <fmt:formatDate value="${ current }" type="both" dateStyle="full" timeStyle="full"/><br>
</fmt:timeZone>
</body>
</html>