JSP 발전 과정 및 표현 언어 : EL (Expression Language)

JSP 발전 과정

초기 : HTML 태그를 중심으로 자바를 이용해서 화면 구현
JSP 구성 내용 : HTML + JSP 태그 + 자바 코드
화면에 대한 요구 사항이 복잡해지면서 자바 코드를 대체하는 액션 태그 등장
복잡한 자바 코드를 제거하는 방향으로 발전 (복잡한 자바 코드로 인해 화면 작업 어려움, 프론트엔드 개발자와 백엔드 개발자 분리 등의 이유)
현재 JSP 페이지는 JSP 태그의 스크립트 요소보다 표현 언어와 JSTL을 사용

EL (Expression Language)

표현 언어
자바 코드가 들어가 표현식을 좀 더 편리하게 사용하기 위해 JSP 2.0부터 도입된 데이터 출력 기능
표현식 또는 액션 태그 대신에 값을 표현
'<%= 값 %>'과 같은 코드를 '${값}'과 같이 나타냄
attribute 또는 parameter 등을 JSP 파일에서 출력할 용도로 사용\

// attribute
${attribute 이름 }

//parameter
${param.이름} 또는 ${paramValue[인덱스]}

EL 연산자

산술 연산자 : +, -, *, / %, (div, mod)
관계 연산자 : >, >=, <, <=, ==, != (gt, ge, lt, le, eq, ne)
논리 연산자 : &&, ||, !, (and, or, not)
조건 연산자 : 수식 ? 참일 때 값 : 거짓일 때 값
empty 연산자 : 값이 null 이거나 길이가 0이면 참 (true)

${empty 변수} // 변수가 null 이거나 0이면 참
${not empty 변수} // 변수가 null이 아니거나 0이 아니면 참

EL 예제 : el.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>EL 예제</title>
	</head>
	<body>
		\${100} : ${100 }<br>
		${3.14}<br>
		${"홍길동"}<br>
		${true }<br>
		${true&&true }<br>
		${10+1}<br>
		${100 mod 9}<br>
		<%-- ${"hello" + "world"}<br><!-- 주의 !! 문자열 연산 안 됨 (오류) --> --%>
	</body>
</html>

EL을 액션 태그로 사용

<jsp:getProperty name="member" property="id" />
${member.id}

예제 : el2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<jsp:useBean id="student" class="sec01.StudentBean" scope="page">
	<jsp:getProperty property="stdName" name="student" />
</jsp:useBean>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
	</head>
	<body>
		${student.stdName }
	</body>
</html>

EL 내장 객체

구분	내장 객체	설명
Scope	pageScope	page 객체 참조
	requestScope	requesst 객체 참조
	sesssionScope	session 객체 참조
	applicationScope	application 객체 참조
요청 파라미터	param	요청 파라미터 참조
요청 파라미터	paramValues	요청 파라미터 (배열) 참조
쿠키 값	Cookies	cookit 객체 참조
JSP 내용	pageContext	pageContext 객체 참조 (페이지 정보)
초기 파라미터	initParam	web.xml의 context 초기화 파라미터 참조

param 내장 객체

폼에서 입력 값을 받을 때 request.getParameter() 대신에 param 객체 사용 -> ${param.stdNo}

예제

studentForm2.jsp : 폼에서 값 입력하고 전달

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>자바 빈 액션 태그 예제</title>
	</head>
	<body>
			<h3>학생 정보 등록</h3>
		<form name="frmStudent" method="post" action="newStudentOk.jsp" >
		 <table>
		   <tr><td>학번</td><td><input type="text" name="stdNo"></td></tr>
	        <tr><td>성명</td><td><input type="text" name="stdName" ></td></tr>
	       <tr><td>전화번호</td><td><input type="text" name="stdPhone" ></td></tr>
	       <tr><td>주소</td><td><input type="text" name="stdAddress" ></td></tr>
	       <tr><td>학년</td>
	       		   <td><input type="radio" name="stdYear" value="1">1학년
	       		  			<input type="radio" name="stdYear" value="2">2학년
	       		  			<input type="radio" name="stdYear" value="3">3학년
	       		  			<input type="radio" name="stdYear" value="4">4학년</td></tr>
	       <tr><td colspan="2"> <input type="submit" value="등록">  
	    		<input type="reset" value="다시입력"></td></tr>
	    </table>
	  </form>
	</body>

</html>

newStudentOk2.jsp : request.getParameter() 대신에 param 객체 사용

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>EL : param 내장 객체 사용</title>
	</head>
	<body>
		<%
		request.setCharacterEncoding("utf-8");
		%>
		
		<h3>학생 정보 출력 (EL param 객체 사용)</h3>
		학번 : ${param.stdNo }<br>
		성명 : ${param.stdName }<br>
		전화번호 : ${param.stdPhone }<br>
		주소 : ${param.stdAddress }<br>
		학년 : ${param.stdYear }<br>
	</body>
</html>

pageContext 내장 객체

컨텍스트 이름(프로젝트명) 가져오기
getContextPath() 메소드 이용해서 컨텍스트 이름 가져오기 했던 것을
pageContext 내장 객체 사용 해서 컨텍스트 이름 가져올 수 있음

<a href=”<%=request.getContextPath()%>/sec01/login.jsp”>로그인</a>

예제 : 로그인 페이지로 이동하는 4가지 방법 (권장)

(1) url 사용 : “http://localhost:8080/JSP01/sec01/login.jsp”
(2) <a>에서 ContextPath + ServletPath (URI) 사용 : ”/JSP01/sec01/login.jsp”
(3) getContextPath() 메소드 이용 : request.getContextPath()
(4) pageContext 내장 객체 사용 : ${pageContext.request.contextPath}
sec01/newStudentOk2.jsp에 추가

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>EL : param 내장 객체 사용</title>
	</head>
	<body>
		<%
		request.setCharacterEncoding("utf-8");
		%>
		
		<h3>학생 정보 출력 (EL param 객체 사용)</h3>
		학번 : ${param.stdNo }<br>
		성명 : ${param.stdName }<br>
		전화번호 : ${param.stdPhone }<br>
		주소 : ${param.stdAddress }<br>
		학년 : ${param.stdYear }<br>
		
		<h3>로그인 페이지로 이동하는 여러 가지 방법</h3>
		url 사용 : <a href="http://localhost:8080/JSP01/sec01/login.jsp">로그인</a><br>
		<a>에서 ContextPath + ServletPath (URI) 사용 : <a href="/JSP01/sec01/login.jsp">로그인</a><br>
		getContextPath() 메소드 이용 : <a href="<%=request.getContextPath() %>/sec01/login.jsp">로그인</a><br>
		pageContext 내장 객체 사용 : <a href="${pageContext.request.contextPath}/sec01/login.jsp">로그인</a><br>
		
	</body>
</html>

EL (표현 언어)로 바인딩 속성 출력하기

request, session, application 내장 객체에 속성을 바인딩한 후 다른 서블릿이나 JSP에 전달 가능
자바 코드 사용하지 않고 바인딩된 속성 이름으로 바로 값 출력
request.setAttribute(“id”, “hong”);

서블릿 : getAttribute(“id”) 를 통해 값 가져와서 사용

EL : ${id}

예제

el-forward.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>EL 바인딩 예제</title>
	</head>
	<body>
		<%
			// setAttribute("속성명", "속성값")   // 속성명 = 바인딩 되는 변수 이름
			request.setAttribute("id", "hong");
			request.setAttribute("pwd", "1234");
			request.setAttribute("name", "홍길동");
			request.setAttribute("email", "hong@test.com");
		%>
		<!-- 받는 페이지에서는 setAttribute의 첫번째 파라미터 값만 가지고도 값 가져올 수 있음 -->
		<jsp:forward page="el-forward-result.jsp" />
	</body>
</html>

el-forward-result.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>EL 바인딩 예제</title>
	</head>
	<body>
		<%
			request.setCharacterEncoding("utf-8");
		%>
		
		id : ${id }<br>
		pwd : ${pwd }<br>
		name : ${name }<br>
		email : ${email }<br>
	</body>
</html>

빈 객체 바인딩

StudentBean 사용
StudentBean student = new StudentBean(생성자로 값 초기화);
request.setAttribute(“student”, student); –> ${student.stdNo}

예제 - 1

el-forward2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="sec01.StudentBean" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>빈 객체 바인딩</title>
	</head>
	<body>
		<%
		StudentBean student = new StudentBean("2001003", "홍길동", "010-1234-1234", "서울", 4);
		request.setAttribute("student", student);
		%>
		<jsp:forward page="el-forward-result2.jsp" />
	</body>
</html>

el-forward-result2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>빈 객체 바인딩</title>
	</head>
	<body>
		<!-- param 대신 student 사용 -->
		학번 : ${student.stdNo }<br>
		성명 : ${student.stdName }<br>
		전화번호 : ${student.stdPhone }<br>
		주소 : ${student.stdAddress }<br>
		학년 : ${student.stdYear }<br>
	</body>
</html>

StudentBean 클래스에 매개변수 있는 생성자 추가

// 추가
public StudentBean(String stdNo, String stdName, String stdPhone, String stdAddress, int stdYear) {
      this.stdNo = stdNo;
      this.stdName = stdName;
      this.stdPhone = stdPhone;
      this.stdAddress = stdAddress;
      this.stdYear = stdYear;
   }

예제 - 2 : 빈 객체를 ArrayList에 담아서 바인딩

el-forward3.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="sec01.StudentBean" %>
<%@ page import="java.util.*" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
	</head>
	<body>
	<%
		StudentBean s1 = new StudentBean("2001003", "홍길동", "010-5555-5555", "서울", 4);
		StudentBean s2 = new StudentBean("2001005", "이몽룡", "010-1234-1234", "인천", 3);
		StudentBean s3 = new StudentBean("2001006", "성춘향", "010-1234-5656", "전북", 2);
		
		List studentList = new ArrayList();
		studentList.add(s1);
		studentList.add(s2);
		studentList.add(s3);
		
		request.setAttribute("stdList", studentList);
		 %>
		 <jsp:forward page="el-forward-result3.jsp" />
	</body>
</html>

el-forward-result3.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
	</head>
	<body>
		<!-- 바인딩 된 ArrayList에서 인덱스 사용하여 데이터 출력 -->
<%-- 		<table border="1">
			<tr><th>학번</th><th>성명</th><th>전화</th><th>주소</th><th>학년</th></tr>
			<tr><td>${stdList[0].stdNo }</td>
					<td>${stdList[0].stdName }</td>
					<td>${stdList[0].stdPhone }</td>
					<td>${stdList[0].stdAddress }</td>
					<td>${stdList[0].stdYear }</td></tr>
			<tr><td>${stdList[1].stdNo }</td>
					<td>${stdList[1].stdName }</td>
					<td>${stdList[1].stdPhone }</td>
					<td>${stdList[1].stdAddress }</td>
					<td>${stdList[1].stdYear }</td></tr>
			<tr><td>${stdList[2].stdNo }</td>
					<td>${stdList[2].stdName }</td>
					<td>${stdList[2].stdPhone }</td>
					<td>${stdList[2].stdAddress }</td>
					<td>${stdList[2].stdYear }</td></tr>
		</table> --%>
		
		<!-- JSTL 배운 후 for문 (forEach) 사용해서 후에 변경 -->
		<h3>c:forEach 사용</h3>
		<table border="1">
			<tr><th>학번</th><th>성명</th><th>전화</th><th>주소</th><th>학년</th></tr>
			<c:forEach var="data" items="${stdList }">
				<tr><td>${data.stdNo }</td>
						<td>${data.stdName }</td>
						<td>${data.stdPhone }</td>
						<td>${data.stdAddress }</td>
						<td>${data.stdYear }</td></tr>
			</c:forEach>
		</table>
	</body>
</html>

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

'Backend > JSP' 카테고리의 다른 글

JSTL (JSP Standard Tag Library) (0)	2021.12.31
scope : 스코프 우선순위 (0)	2021.12.31
액션 태그 (2)	2021.12.30
JSP 제어문 (0)	2021.12.30
JSP 내장 객체 (0)	2021.12.30

0lli2

JSP 발전 과정 및 표현 언어 : EL (Expression Language)