본문 바로가기
lang/java web

[Boostcourse] DB 연결 웹 - 6. JSTL & EL

by Wordbe 2019. 11. 21.
728x90

6. JSTL, EL

1. EL(Expression Language)

jsp에서 표현식을 이용해 값을 출력할 때 변수의 값이 null이면, 화면에 null이 출력됩니다.

그 전에 null인지 체크하는 코드가 있었으면 좋겠죠?

EL을 통해 이 변수를 좀 더 jsp에서 편하게 관리할 수 있습니다.

  • EL
  • isELIgnored

표현언어 (EL, Expression Language)

  • 값을 표현하는 데 사용되는 스크립트 언어, JSP의 기본 문법을 보완하는 역할
  • JSP의 스코프에 맞는 속성 사용
  • 집합 객체에 대한 접근 방법 제공 (collection)
  • 수치 연산, 관계 연산, 논리 연산자 제공
  • 자바 클래스 메소드 호출 기능 제공
  • 표현언어만의 기본 객체 제공

실제 디자이너, front-end 개발자, back-end 개발자 사이의 업무 분담을 정할 때, 이질감 없는 가독성 좋은 언어 표현을 통해 효율적인 일처리를 하도록 함

문법

${expr}

​ 여기서 expr은 표현언어가 정의한 문법에 따라 값을 표현하는 식

예제

<b>${sessionScope.member.id}</b>님 환영합니다.

표현언어의 기본객체

EL의 데이터 타입

  • Boolean - true, false
  • 정수타입 - +/- 0~9
  • 실수타입 - 0~9, 소수점(.)사용 가능, e로 지수형 표시가능(3.24e3)
  • 문자열타입 - ' 또는 " 로 둘러싼 문자열
  • 널타입 - null

객체 접근 규칙

${<expr1>.<expr2>}

EL의 수치 연산자

+, - , *, / 또는 div, % 또는 mod

  • ${"10" + 1} 은 자동으로 ${10 + 1}로 수행

  • ${"열" + 1} 은 에러

  • ${null + 1} 은 자동으로 ${0 + 1}로 수행

비교 연산자

== 또는 eq

!= 또는 ne

< 또는 lt

> 또는 gt

<= 또는 le

>= 또는 ge

문자열 비교: ${str == '값'}은 str.compareTo("값") == 0과 동일

논리 연산자

&& 또는 and

|| 또는 or

! 또는 not

empty 연산자, 비교선택 연산자

empty <값>

<값> null, 빈문자열(""), 길이가 0인 배열, 빈 Map, 빈 Collection이면 true 리턴

그 외에는 false 리턴

연산자 우선 순위

1번부터 큰 우선순위

  1. []

  2. ()

  3. - not ! empty

  4. * / div % mod

  5. + -

  6. < > <= >= lt gt le ge

  7. == != eq ne

  8. && and

  9. || or

  10. ? :

표현 언어 비활성화 : JSP에 명시하기

<%@ page isELIgnored = "true" %>

servlet 2.4 버전 부터 EL 자동 활성화 됩니다.


EL 실습

el01.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%
    pageContext.setAttribute("p1", "page scope value");
    request.setAttribute("r1", "request scope value");
    session.setAttribute("s1", "session scope value");
    application.setAttribute("a1", "application scope value");
%>


<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

pageContext.getAttribute("p1") : <%=pageContext.getAttribute("p1")%><br>
pageContext.getAttribute("p1") : ${pageScope.p1 }<br>
request.getAttribute("r1") : ${requestScope.r1 }<br>
session.getAttribute("s1") : ${sessionScope.s1 }<br>
application.getAttribute("a1") : ${applicationScope.a1 }<br>

pageContext.getAttribute("p1") : ${p1 }<br>
request.getAttribute("r1") : ${r1 }<br>
session.getAttribute("s1") : ${s1 }<br>
application.getAttribute("a1") : ${a1 }<br>


</body>
</html>

밑에 예시에서

변수명이 겹치면 scope이 작은 변수를 출력합니다.

되도록 앞에 scope을 명시하고 변수를 불러오는 것이 가독성을 위해 바람직합니다.

<%@ page isELIgnored="true" %>

EL 을 텍스트 그대로 반환합니다.

2. JSTL(JSP Standard Tag Library)

프론트 개발자가 JSP를 수정할 때, JSP 안에 java와 html코드가 섞여 있다면 어려움을 느끼게 됩니다.

이 문제를 해결하기 위해 JSTL이 등장합니다.

JSTL을 이용하면 태그형식으로 조건문, 반복문 등을 사용할 수 있습니다.

또한, EL과 연동하여 사용도 가능합니다.

JSTL

​ JSP 페이지에서 조건문 처리, 반복문 처리 등을 html tag 형태로 작성할 수 있게 도와줍니다.

JSTL 사용

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

JSTL이 제공하는 태그의 종류

코어 태그

코어 태그: 변수 지원 태그 - set, remove

실습

다운로드 한 라이브러리를 WEB-INF > lib 폴더에 넣습니다.

eclipse tip : 파일을 추가할 때, 파일 탐색기가 아닌, eclispe 프로그램에서 붙여넣기 해야 경로가 알아서 설정되어 잘 작동할 수 있습니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<c:set var="value1" scope="request" value="jin"/>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

성 : ${value1} <br>

<c:remove var="value1" scope="request"/>

성 : ${value1 }
</body>
</html>

코어태그 : 변수지원 태그 - 프로퍼티, 맵의 처리

<c:set target="${some}" property="propertyName" value="anyValue" />

some 객체가 자바빈일 경우: some.setPropertyName(anyValue);

some 객체가 맵(map)일 경우: some.put(propertyName, anyValue);

  • target - <c:set>으로 지정한 변수 객체
  • property - 프로퍼티 이름
  • value - 새로 지정할 프로퍼티 값

코어 태그 : 흐름제어 태그 - if

else는 없음.

<c:if test="조건">
...
</c:if>

코어 태그 : 흐름제어 태그 - choose

if ~ else 문법과 비슷.

<c:choose>
    <c:when test="조건1">
    ...
    </c:when>
    <c:when test="조건2">
    ...
    </c:when>
    <c:otherwise>
    ...
    </c:otherwise>
</c:choose>

코어 태그 : 흐름제어 태그 - forEach

​ 배열 및 Collection에 저장된 요소로 차례대로 처리할 수 있습니다.

<c:forEach var="변수" items="아이템" [begin="시작번호"] [end="끝번호"]>
...
    ${변수}
...
</c:forEach>
  • var - EL에서 사용될 변수명

  • items - 배열, List, Enumeration, Map 등의 Collection

    ​ Map인 경우 변수에 저장되는 객체는 Map.Entity입니다. 따라서 변수를 사용할 때 ${변수.key}, ${변수.value}를 사용하여 키, 값을 접근합니다.

  • begin - items에 지정한 목록에서 값을 읽어올 인덱스의 시작값

  • end - items에 지정한 목록에서 인덱스 끝값

코어 태그: 흐름제어 태그 - import

​ 지정한 URL에 연결하여 결과를 지정한 변수에 저장합니다.

<c:import url="URL" charEncoding="캐릭터인코딩" var="변수명" scope="범위">
    <c:param name="파라미터이름" value="파라미터값" />
</c:import>

실습 (한꺼번에)

<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%-- <%
    request.setAttribute("n", 10);
%> --%>

<c:set var="n" scope="request" value="10"></c:set>
<c:set var="score" scope="request" value="83"></c:set>
<% 
    List<String> list = new ArrayList<>();
    list.add("hello");
    list.add("world");
    list.add("!!!");

    request.setAttribute("list", list);
%>
<c:import url="http://localhost:8080/firstweb/jsp/jspValue.jsp" var="urlValue" scope="request" />
<c:import url="https://www.google.com/" var="googleValue" scope="request" />

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<c:if test="${n == 0 }">
    n과 0은 같습니다.
</c:if>
<c:if test="${n == 10 }">
    n과 10은 같습니다.
</c:if>

<c:choose>
    <c:when test="${score >= 90 }">
        A학점 입니다.
    </c:when>
    <c:when test="${score >= 80 }">
        B학점 입니다.
    </c:when>
    <c:otherwise>
        F학점 입니다.
    </c:otherwise>
</c:choose>
<br>

<c:forEach items="${list }" var="item" begin="1">
    ${item }<br>
</c:forEach>

URL에서 읽어들인 값: ${urlValue }
Google에서 읽어들인 값:<br> ${googleValue }

</body>
</html>

Reference

https://www.edwith.org/boostcourse-web/lecture/16714/

728x90

댓글