[JSTL] Formatting태그(1)

이전에 JSTL 중 Core 태그에 대해 작성하였습니다. 오늘은 그 외에 숫자/날짜 등을 위한 Format태그에 대해 작성해볼까 합니다.

 

2020/08/26 - [개발 창고/웹 개발] - [JSTL] Core태그

[JSTL] Core태그

 

일단 다시 JSTL의 분류에 대해 말씀드리면 다음과 같습니다.

 

  JSTL 분류

• Core 태그
• Formatting 태그
• SQL 태그
• XML 태그
• JSTL Function

  Formatting 태그

 

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

이렇게 해주면 사전어로 fmt(사전어는 작성자의 마음이지만, 업계 표준으로 fmt를 써주는 게 향후에 유지보수를 위해도 좋다고 할 수 있습니다. 평생 그 페이지만 관리할게 아니고 다른 사이트에서 소스 등을 복사해서 쓸 일이 많다면)를 사용해주면 formatting 태그를 사용 가능합니다. 주로 사용하는 태그로는 원화 표시등에 사용되는 formatNumber와 Date Type의 날짜를 원하는 문자열로 표기해주기 위한 formatDate가 있습니다.

 

 

  formatNumber

태그	옵션	필수	기본값	내용
<fmt:formatNumber>				숫자 값들을 지정된 표현식으로 출력
	value	Y	없음	출력할 숫자 정보
	type	N	Number	NUMBER 또는 CURRENCY, PERCENT
	pattern	N	없음	출력할 특별한 커스터마이드된 표현식
	currencyCode	N	현재 LOCALE 기준	통화 지역(LOCALE) 코드 (type이 currency인 경우)
	currencySymbol	N	현재 LOCALE 기준	통화 지역(LOCALE) 심볼 (type이 currency인 경우)
	groupingUsed	N	true	숫자를 그룹화 할지 여부 (true/false)
	maxIntegerDigits	N	없음	출력될 정수의 최대 자릿수
	minIntegerDigits	N	없음	출력될 정수의 최소 자릿수
	maxFractionDigits	N	없음	출력될 소수점 최대 자릿수
	minFractionDIgits	N	없음	출력될 소수점 최소 자릿수
	var	N	페이지에 출력	출력값이 저장될 변수 명
	scope	N	Page	저장된 출력값이 활용 가능한 범위

<c:set var="value" value = "123456.789123" />

<p>숫자형으로 표현: <fmt:formatNumber value="${value}" type = "number"/></p>
<!-- 숫자형으로 표현: 123,456.789 -->

<p>현재 설정된 지역의 통화로 표현: <fmt:formatNumber value="${value}" type = "currency"/></p>
<!-- 현재 설정된 지역의 통화로 표현: ￦123,457 -->

<p>최대 정수를 3자리까지: <fmt:formatNumber value="${value}" type="number" maxIntegerDigits="3"/></p>
<!-- 최대 정수를 3자리까지: 456.789 -->

<p>최대 소수점을 3자리까지: <fmt:formatNumber value="${value}" type="number" maxFractionDigits="3"/></p>
<!-- 최대 소수점을 3자리까지: 123,456.789 -->

<p>그룹핑(,)을 사용하지 않을경우: <fmt:formatNumber value="${value}" type="number" groupingUsed="false"/></p>
<!-- 출력: 123456.789 -->

<p>정수 3자리까지: <fmt:formatNumber value="${value}" type="percent" maxIntegerDigits="3"/></p>
<!-- 정수 3자리까지: 679% -->

<p>소수점 5자까지: <fmt:formatNumber value="${value}" type="percent" minFractionDigits="5"/></p>
<!-- 소수점 5자까지: 12,345,678.91230% -->

<p>지수형 표현: <fmt:formatNumber value="${value}" type="percent" pattern = "###.###E0"/></p>
<!-- 지수형 표현: 123.457E3 -->

<fmt:setLocale value="en_US"/> 
<p>미국통화료 표현: <fmt:formatNumber value="${value}" type="currency" currencySymbol="$"/></p>
<!-- 미국통화료 표현: $123,457 -->

 

Format Number에 대한 HTML에서의 결과

 

  parseNumber

태그	옵션	필수	기본값	내용
<fmt:parseNumber>				숫자 값들을 지정된 유형으로 형변환 (CAST)
	value	Y	없음	변환할 숫자 정보
	type	N	Number	NUMBER
	parseLocale	N	현재 LOCALE 기준	형변환에 사용활 지역(LOCALE)
	integerOnly	N	false	true: 소수점 불포함 / false: 소수점 포함
	pattern	N	없음	커스터마이징 된 형변환 시
	timeZone	N	현재 Time Zone	형변환 될 Time Zone 유형
	var	N	페이지에 출력	변환된 숫자를 저장할 변수 명
	scope	N	Page	저장된 변환된 값이 활용 가능한 범위

<c:set var="value" value="123456.789" />

<!-- i에 숫자형으로 변환된 value의 값을 저장 -->
<fmt:parseNumber value="${value}" var="i" type="number"/>
<p>변환 된 값을 출력: ${i}</p>
<!-- 변환 된 값을 출력: 123,456.789 -->

<!-- i에 소수점을 제외한 정수로 변환된 value의 값을 저장 -->
<fmt:parseNumber value="${value}" var="i" type="number" integerOnly="true"/>
<p>변환 된 값을 출력: ${i}</p>
<!-- 변환 된 값을 출력: ￦123,457 -->

 

Parse Number를 한 HTML에서의 결과

 

formatNumber와 parseNumber은 비슷하게 작동합니다. 다만, parseNumber는 어떤 형태로 형변환이 되는지를 알려준다는 차이가 있습니다.

<c:set var="value" value="123456.789"/>

<p>변환 된 값을 출력: ${value + value}</p>

<!-- x + y는 오류가 발생 -->
<c:catch var="exception">
<fmt:formatNumber value="${value}" var="x" type="number"/>
<fmt:formatNumber value="${value}" var="y" type="number"/>
<p>변환 된 값을 출력: ${x + y}</p>
</c:catch>
<c:if test="${not empty exception }">
<p>Exception : ${exception}</p>
</c:if>
<!-- x + y는 오류가 발생 -->

<!-- x + y가 가능 -->
<fmt:parseNumber value="${value}" var="x" type="number"/>
<fmt:parseNumber value="${value}" var="y" type="number"/>
<p>변환 된 값을 출력: ${x + y}</p>
<!-- 변환 된 값을 출력: 246913.578 -->

만약 위와 같이 x와 y값을 합산하는 JSTL을 작성한 경우 parseNumber는 형변환된 숫자형을 갖기 때문에 정상 출력되지만 formatNumber의 경우 numer가 아니기 때문에 오류가 발생합니다. 때문에 결과는 다음과 같이 호출됩니다. (catch를 씌워 두었기 때문에 페이지 자체에 오류가 발생하진 않지만 만약 catch를 씌우지 않으면 페이지 전체에 오류가 발생합니다.)

 

formatNumber와 parseNumber에 따른 결과

 

  formatDate

태그	옵션	필수	기본값	내용
<fmt:formatDate>				Date 나 Time에 대한 format을 제공
	value	Y	없음	변환할 숫자 정보
	type	N	date	DATE, TIME, BOTH
	dateStyle	N	DEFAULT	FULL, LONG, MEDIUM, SHORT, DEFAULT
	timeStyle	N	DEFAULT	FULL, LONG, MEDIUM, SHORT, DEFAULT
	parseLocale	N	현재 LOCALE	date 변환시 LOCALE
	pattern	N	없음	커스터마이징 된 format 패턴
	timeZone	N	현재 Time Zone	date 변환시 Time Zone
	var	N	페이지에 출력	변환된 일자 정보를 저장할 변수 명
	scope	N	Page	저장된 변환된 값이 활용 가능한 범위

<!-- now에 date type의 현재 날짜 정보를 입력 -->
<c:set var="now" value="<%=new java.util.Date()%>"/>

<!-- 날짜 출력 -->
<p><fmt:formatDate value="${now}" type="date"/></p>
<!-- 2020. 8. 27 -->

<!-- 시간 출력 -->
<p><fmt:formatDate value="${now}" type="time"/></p>
<!-- 오후 3:02:42 -->

<!-- 날짜 + 시간 출력 -->
<p><fmt:formatDate value="${now}" type="both"/></p>
<!-- 2020. 8. 27 오후 3:02:42 -->

<!-- 날짜 + 시간 full 출력 -->
<p><fmt:formatDate value="${now}" type="both" dateStyle="full" timeStyle="full"/></p>
<!-- 2020년 8월 27일 목요일 오후 3시 02분 42초 KST -->

<!-- Pattern (년-월-일 시:분:초) 출력 -->
<p><fmt:formatDate value="${now}" pattern="yyyy-MM-dd HH:mm:ss"/></p>
<!-- 2020-08-27 15:02:42 -->

 

formatDate에 따른 결과 HTML

 

Code	내용	예시
G	시대 지정자	AD
y	년	2020
M	월	8월 & 08
d	해당 월의 일	27
h	시간 (오전/오후 12시간 기준)	3
H	시간 (24시간 기준)	15
m	분	2
s	초	42
S	밀리세컨즈(ms)	970
E	요일	목
D	년도 기준 일자	240
F	해당 월의 주차중 일	4 (해당월의 4번째 목요일)
w	년도 기준 주차	35
W	월 기준 주차	5
a	오전/오후 지시자	오후
k	시간 (24시간 기준)	15
K	시간 (12시간 기준)	3
z	Time Zone	KST
'		문자열 제거를 위한 지시자
"		단일 표시자

 

  parseDate

태그	옵션	필수	기본값	내용
<fmt:parseDate>				Date 나 Time으로 형변환
	value	Y	없음	변환할 숫자 정보
	type	N	date	DATE, TIME, BOTH
	dateStyle	N	DEFAULT	FULL, LONG, MEDIUM, SHORT, DEFAULT
	timeStyle	N	DEFAULT	FULL, LONG, MEDIUM, SHORT, DEFAULT
	parseLocale	N	현재 LOCALE	date 변환시 LOCALE
	pattern	N	없음	커스터마이징 된 format 패턴
	timeZone	N	현재 Time Zone	date 변환시 Time Zone
	var	N	페이지에 출력	변환된 일자 정보를 저장할 변수 명
	scope	N	Page	저장된 변환된 값이 활용 가능한 범위

<!-- now에 date type의 현재 날짜 정보를 입력 -->
<c:set var="now" value="2020-08-10"/>

<!-- 날짜 형변환 -->
<fmt:parseDate var="parsedDate" value="${now}" pattern="yyyy-MM-dd"/>

<!-- 변환된 값 출력 -->
<p><c:out value="${parsedDate}"/></p>

<!-- Formatting 된 날로 표현 -->
<p><fmt:formatDate value="${parsedDate}" type="both"/></p>

parse된 날짜 HTML 결과