본문 바로가기
JS & TS/Frontend

[JSP] EL문과 JSTL

by heekng 2021. 3. 23.
반응형

[JSP] EL문과 JSTL

기존의 JSP에서 자바코드를 작성할 때에는 스크립트태그를 이용했다.

2021.02.27 - [JSP/JSP정리] - [JSP] JSP문서 작성 및 코드 작성

 

[JSP] JSP문서 작성 및 코드 작성

[JSP] JSP문서 작성 및 코드 작성 이전 포스트를 보면 알 수 있듯이 서블릿으로 자바코드를 작성하면 서블릿 문서를 방문하고, 연산을 해야 하기 때문에 불편함이 있다. 2021/02/27 - [JSP/JSP정리] - [Serv

heekng.tistory.com

하지만 스크립트 태그를 이용하면 HTML코드 사이에 JAVA코드가 섞이게 되어 가독성이 떨어지게 된다.

이러한 불편함을 해소하기 위해 EL문과 JSTL을 이용한다.

EL문과 JSTL의 사용 이유

EL문과 JSTL을 사용하는 이유는 단순히 페이지의 가독성을 상승시키기 위해서이다.

자바 구문을 라이브러리 형태로 만들어 놓고, 필요할 때마다 태그로 꺼내쓰는 기술이다.

JSP페이지 내에서 자바코드와 HTML코드가 섞이게 되면 가독성이 떨어지고 코드 자체가 복잡해진다.

EL문과 JSTL을 사용하면 HTML과 태그로만 구성된 일관된 소스코드를 볼 수 있다는 장점이 있다.

주의할 점은 꼭 JSP문서에서 이용해야 한다는 것이다. HTML은 컴파일이 되지 않고, JSP는 컴파일이 가능하기 때문이다.

EL(Expression Language)

EL문은 값을 간결하고 간편하게 출력할 수 있게 해주는 기술이다.

기존 자바 코드 EL
<%=name %> ${name}
<%=member.getName() %> ${member.getName()}

위와 같이 기존 표현문( <%= %> )을 이용할 때보다 간단하고, 직관적인 값 출력이 가능하다.

EL문 Scope 순서

값을 찾을 때에는 작은 Scope에서 큰 Scope의 순서로 찾는데

page > request > session > application 의 순서로 우선순위가 정해진다.

 

원하는 스코프의 변수를 찾을 때 아래와 같이 사용한다.

${param.name} : 전달받은 파라미터 데이터 중 name을 찾는다.

${requestScope.name} : request 데이터에서만 name을 찾는다.

${sessionScope.name} : session 데이터에서만 name을 찾는다.

EL문 연산자

EL문에서 연산자는 기호 뿐만이 아닌 문자로도 사용 가능하다.

 

/, div : 나눈 몫

%, mod : 나눈 나머지

&&, and : 그리고

||, or : 또는

>, lt(less than) : 초과

<, gt(greater than) : 미만

>=, le(less or equal) : 이상

<=, ge(greater or equal) : 이하

==, eq(equal) : 같다

!=, ne(not equal) : 다르다

empty(값이 비어있으면 true, 값이 있으면 false) : 비어있는지

!, not : 아니다

JSTL(Jsp Standard Tag Library)

JSTL은 연산이나 조건문, 반복문 등을 태그로 편하게 처리할 수 있다.

JSP페이지 내에서 자바코드를 사용하지 않고도 로직을 구현할 수 있도로 효율적인 방법을 제공해준다.

기존 자바 코드 JSTL
<%
    for(초기식; 조건식; 증감식;)
%>		 <c:forEach var="" items="${}">
</c:forEach>
<c:forEach var="" begin="" end="">
</c:forEach>

라이브러리 다운로드

archive.apache.org/dist/jakarta/taglibs/standard/binaries/

 

Index of /dist/jakarta/taglibs/standard/binaries

 

archive.apache.org

위 사이트에서 원하는 JSTL버전을 선택하여 zip파일을 다운로드한다.

이후 압축을 해제하고, lib폴더 내의 jstl.jar과 standard.jar파일을 webContent-WEB-INF-lib에 추가한다.

JSP페이지에 태그 라이브러리 추가

JSTL을 이용하길 원하는 JSP문서에 태그 라이브러리를 추가한다.

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

JSTL core태그의 종류

<c:set> : 변수에 값 대입, <c:set var="" value="" scope=""/>와 같은 형태로 작성, 부분 생략 가능하다.

<c:out> : 값 출력, <c:out value="" />와 같은 형태로 작성한다.

<c:remove> : 값 삭제, <c:remove var="" scope=""/>와 같은 형태로 작성, 부분 생략 가능하다.

<c:if> : if문, <c:if test="">와 같은 형태로 작성한다.

<c:choose></c:choose> : switch문 시작

<c:when></c:when> : switch문의 case역할(break까지 해준다).

<c:otherwise></c:otherwise> : switch문의 default역할

<c:forEach> : 반복문, <c:forEach var="" begin="" end="" step="">형태로 작성 한다.

<c:out>과 ${}의 차이

1. EL문만 사용하게 되면, HTML이나 스크립트가 실행될 수 있기 때문에 보안상 <c:out>의 excapeXml옵션을 사용하기 위해 <c:out>을 사용한다.

escapeXml은 default가 true이며, 값에 HTML이나 스크립트가 작성되어도 실행 가능한 명령어가 아닌 문자열 값으로 인식하게 된다.

즉, 사용자의 입력을 바로 받아오거나 GET방식으로 이동된 페이지의 경우 값에 악의적?으로 작성한 HTML스크립트가 실제 코드로 인식됨을 막기 위해서 사용한다.

2. 엄격한 태그 규칙을 위해 사용되기도 하며, 모든 표현은 태그에 안에 작성하는 것을 원칙으로 한다.

사용 예제

1. 사용자에게 이름을 입력받고 확인버튼을 눌렀을 때

admin일 경우 "관리자", member일 경우 "일반 회원", 그 외에는 "비회원(전달받은 이름)"을 출력한다.

 

※다른 페이지 없이 현재 페이지 하나에서만 처리하고, 결과가 출력될 때에는 input태그와 submit버튼이 나오게 해서는 안된다.

※form태그의 속성은 action을 생략하면 현재 페이지로 이동이 된다.

※el과 jstl만 사용한다(자바스크립트 금지)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSTL테스트</title>
</head>
<body>
	<c:set var="getName" value="${param.name}"/>
	<c:choose>
		<c:when test="${empty getName}">
			<h2>이름 입력 후 확인버튼 클릭</h2>
			<form action="">
				<input type="text" name="name">
				<input type="submit" value="확인">
			</form>
		</c:when>
		<c:when test="${getName == 'admin'}">관리자</c:when>
		<c:when test="${getName == 'member'}">일반 회원</c:when>
		<c:otherwise>비회원(<c:out value="${getName}"/>)</c:otherwise>
	</c:choose>
</body>
</html>

 

2.1단부터 100단까지 중 사용자에게 입력받은 단수로 구구단 출력하기.

입력받은 값이 정수인지 아닌지 판단, 값을 입력했는지 안했는지 판단.

다른 페이지 이동 없이 현재 페이지에서만 기능 구현

자바스크립트 사용 가능(Number.isInteger(값) : boolean)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSTL테스트2</title>
</head>
<body>
<!--  
	1단부터 100단까지 중 사용자에게 입력받은 단수로 구구단 출력하기.
	입력받은 값이 정수인지 아닌지 판단, 값을 입력했는지 안했는지 판단.
	다른 페이지 이동 없이 현재 페이지에서만 기능 구현
	자바스크립트 사용 가능(Number.isInteger(값) : boolean
-->
	<form name="frm">
		단수: <input type="text" name="name" placeholder="정수 입력">
		<input type="button" value="확인" onclick="danCheck()">
	</form>
	
	<c:set var="dan" value="${param.name}"/>
	
	<c:if test="${!empty dan}">
		<c:choose>
			<c:when test="${dan>0 && dan<101}">
				<c:forEach var="i" begin="1" end="9" step="1">
					<c:out value="${dan} X ${i} = ${dan * i}"/><br>
				</c:forEach>
			</c:when>
			<c:otherwise>
				0보보다 크고 101보다 작은 수를 입력해주세요.
			</c:otherwise>
		</c:choose>
	</c:if>
</body>
<script>
	function danCheck(){
		var num = parseInt(document.frm.name.value);
		var check = num % 1 == 0;
		if(num == "" || !check || !Number.isInteger(num)){
			alert("정수만 입력해주세요.");
			return false;
		}
		document.frm.submit();
	}
</script>
</html>

 

 

반응형
저작자표시 비영리 변경금지

'JS & TS > Frontend' 카테고리의 다른 글

[JSP] Ajax (jquery)  (0) 2021.03.20
[JSP] JSON  (0) 2021.03.14
[JSP] Ajax  (0) 2021.03.11
[JSP] 내장 객체, 데이터 전송방식  (0) 2021.02.27
[JSP] 자바빈즈(자바 객체)  (0) 2021.02.27
[JSP] JSP문서 작성 및 코드 작성  (0) 2021.02.27

관련글

티스토리툴바