JSP 에서 액션(action)이란?
- XML 기술을 이용해서 기존의 JSP 문법을 확장해준 매커니즘으로 JSP 규격서에 정의되어 있는 기술이다.
이것은 XML 태그 형태를 띄기 때문에 액션태그(action tag)라고도 부르며, 간단히 액션(action)이라고 한다.
왜냐하면 이런 태그가 어떤 동작(action)을 수행하는 역할을 하기 때문이다.
[ 액션(action)의 종류 ]1) 표준액션(Standard action)
- JSP 페이지에서 막바로 사용이 가능함.
- <jsp:include> 와 <jsp:forward> 같은 표준액션을 이용하면
자바에서 했던 include()메소드, forward()메소드와 똑 같은 기능을 구현할수 있다.
- <jsp:useBean> 와 <jsp:setProperty> 등의 표준액션을 이용하면
자바코드 작성없이도 자바빈(JavaBean, 자바빈 규격서에 따라 만든 자바클래스)을 만들어 사용할 수 있다.
- 모든 태그의 이름 앞에 jsp 라는 접두어가 붙음.
예) <jsp:include page="abc.jsp" />
2) 커스텀액션(Custom action)
- 별도의 라이브러리를 설치해야만 사용가능함.
라이브러리는 인터넷에서 다운로드 받을수도 있고(JSTL),
사용자가 직접 만들어 사용할수도 있음.
- 모든 태그의 이름 앞에 jsp 이외의 다른 이름의 접두어가 붙음.
예) <c:set var="cnt" value="0" />
[ 액션(action)과 HTML 태그의 차이점 ]
- 액션태그(action tag)의 모습은 HTML 태그와 많이 닮았지만,
HTML 태그처럼 클라이언트의 웹브라우저로 직접 전달되는 것이 아닌,
웹컨테이너(톰캣서버)쪽에서 실행되고, 그 결과만 클라이언트의 웹브라우저에서 출력된다는 것이다.
JSP 표준액션중에서 forward 방식을 사용하여
입력한 2개의 수 사이를 누적한 값 알아오기 화면을 구현할 것이다.
1번째, 2번째 파일은 동일하며,
3번째 파일에서 계산된 결과값은 다음과 같이 일반 표현식, EL 의 2가지 방식을 사용하여 나타낼 것이다.
아래는 form 태그 작성 및 유효성 검사후 form 태그를 전송하는 역할 [ 1번째 파일 ]
<script type="text/javascript">
// Function Declaration
function goSubmit() {
// 정규표현식으로 유효성 검사
const regExp = /^[0-9]{1,5}$/; // 정규표현식은 / / 안에 ^(시작) 과 &(끝)을 입력한 후, 그 안에 조건을 입력한다. 이것은 [0-9]까지의 숫자가 글자길이가 {1,5} 1글자에서 5글자 입력할 수 있다.
const frm = document.myFrm; // 문서중 form 태그의 name명이 myFrm 인 것
const num1 = frm.firstNum.value.trim(); // 변수 frm 의 name명이 firstNum 인 것의 값(공백제거함)
const num2 = frm.secondNum.value.trim(); // 변수 frm 의 name명이 secondNum 인 것의 값(공백제거함)
if( !(regExp.test(num1) && regExp.test(num2)) ) { // (regExp.test(num1) && regExp.test(num2) 이 false 라면,
alert("숫자로만 입력하세요!!"); // 즉, num1 과 num2은 둘다 숫자로만 입력되어야 한다. test() 는 정규표현식을 검사하는 것이다.
frm.firstNum.value = ""; // 첫번째값을 비운다.
frm.secondNum.value = ""; // 두번째값을 비운다.
frm.firstNum.focus(); // 첫번째값에 마우스커서(포커스)를 둔다.
return; // 종료
}
else { // (regExp.test(num1) && regExp.test(num2) 이 true 라면,
if(Number(num1) > Number(num2)) { // parseInt(num1) 로 해주어도 된다. 웹은 기본적으로 string 타입이기 때문에 숫자타입으로 변환해준다.
alert("첫번째 입력한 숫자가 두번째 입력한 숫자 보다 적어야 합니다.!!"); // 즉, num1 과 num2은 둘다 숫자로만 입력되어야 한다. test() 는 정규표현식을 검사하는 것이다.
frm.firstNum.value = ""; // 첫번째값을 비운다.
frm.secondNum.value = ""; // 두번째값을 비운다.
frm.firstNum.focus(); // 첫번째값에 마우스커서(포커스)를 둔다.
return; // 종료
}
}
frm.action = "03_forward_calc_el_02.jsp"; // 03_forward_calc_el_02.jsp 파일로 전송하도록 action 처리해준다. 즉, 웹브라우저 상에서 URL 주소는 03_forward_calc_el_02.jsp 으로 보여진다.
// frm.method = "GET"; // method 를 명기하지 않으면 기본은 "GET" 이다. 대소문자 구분하지 않음.
frm.submit(); // form 태그를 전송한다.
}// end of function goSubmit(){}---------------------
</script>
</head>
<body>
<h2>입력한 2개의 수 사이를 누적한 값 알아오기</h2>
<form name="myFrm">
<p>
첫번째 수 : <input type="text" name="firstNum" size="5" maxlength="5" /><br/> <!-- size : 요소의 너비를 문자수로 나타냄. maxlength : 최대문자길이는 5글자까지임. -->
두번째 수 : <input type="text" name="secondNum" size="5" maxlength="5" /><br/>
<button type="button" onclick="goSubmit()">계산하기</button> <!-- 계산하기 버튼을 클릭하면 goSubmit()함수 호출한다. -->
</p>
</form>
</body>
</html>
아래는 클라이언트( 03_forward_calc_el_execute_01.jsp ) 가 보내온 데이터를 읽어들이는 역할 [ 2번째 파일 ]
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//클라이언트( 03_forward_calc_el_execute_01.jsp ) 가 보내온 데이터를 읽어들이는 역할
String str_firstNum = request.getParameter("firstNum"); // jsp 는 그냥 파라미터 객체(request)를 사용할 수 있다. 웹은 무조건 String 타입이다. 참고로 02_forward_calc_execute_01.jsp 파일에서 숫자로만 입력하도록 유효성검사를 해줌. str : string 이라는 의미로 임의로 지정함.
String str_secondNum = request.getParameter("secondNum"); // jsp 는 그냥 파라미터 객체(request)를 사용할 수 있다. 웹은 무조건 String 타입이다.
int firstNum = Integer.parseInt(str_firstNum); // 웹은 무조건 String 타입이므로 계산하기 위해 숫자타입으로 변환해준다. 참고로 02_forward_calc_execute_01.jsp 파일에서 숫자로만 입력하도록 유효성검사를 해줌.
int secondNum = Integer.parseInt(str_secondNum);
int sum = 0;
for(int i=firstNum; i<=secondNum; i++) { // num1 < num2 즉, firstNum < secondNum 의 조건을 02_forward_calc_execute_01.jsp 파일에서 유효성검사 처리해줌.
sum += i;
}
// 결과물은 sum 이다.
/*
!!!! 중요 꼭 암기 !!!!
== request 내장객체는 클라이언트( 03_forward_calc_el_execute_01.jsp ) 가
보내온 데이터를 읽어들이는 역할( request.getParameter("name명"); )도 있고
또한 어떤 결과물을 저장시키는 저장소 기능( request.setAttribute("키", 저장할객체); ) 도 있다.
*/
// request.setAttribute("firstNum", new Integer(firstNum));
// 원래는 위처럼 객체로 만들어서 저장을 해야 하지만 자바가 알아서 auto boxing(자동적으로 객체로 만들어주는 것) 해주기 때문에 아래처럼 쓸 수 있다.
request.setAttribute("firstNum", firstNum); // 아래의 전송된 03_forward_calc_el_view_03.jsp 파일에서 키값인 "firstNum" 만 꺼내올 수 있다.
request.setAttribute("secondNum", secondNum); // 아래의 전송된 03_forward_calc_el_view_03.jsp 파일에서 키값인 "secondNum" 만 꺼내올 수 있다.
// request.setAttribute("sum", new Integer(sum));
// 원래는 위처럼 객체로 만들어서 저장을 해야 하지만 자바가 알아서 auto boxing(자동적으로 객체로 만들어주는 것) 해주기 때문에 아래처럼 쓸 수 있다.
// 따라서 아래처럼 원시형 타입인 (int) sum 으로만 저장해주어도 된다.
request.setAttribute("sum", sum); // 아래의 전송된 03_forward_calc_el_view_03.jsp 파일에서 키값인 "sum" 만 꺼내올 수 있다.
%>
<jsp:forward page="03_forward_calc_el_view_03.jsp" />
<%-- 저장한 것을 03_forward_calc_el_view_03.jsp 파일로 보낸다.
단, 웹브라우저 상에서 URL 주소는 "03_forward_calc_el_02.jsp" 으로 보여지지만, 실제파일(저장소)은 "03_forward_calc_el_view_03.jsp" 에 있다. --%>
<%--
웹브라우저 상에서 URL 주소는 그대로 http://localhost:9090/JSPServletBegin/chap03_StandardAction/03_forward_calc_el_02.jsp 인데
웹브라우저 상에 보여지는 내용물은 http://localhost:9090/JSPServletBegin/chap03_StandardAction/03_forward_calc_el_view_03.jsp 의 내용이 보여진다.
--%>
이제 3번째 파일에서 각 표현식(expression) 방식과 EL 방식으로 다르게 사용해볼 것이다.
참고로 방식만 다를뿐 결과물은 동일하기 때문에 실행화면도 동일하게 구현된다.
1. 표현식(expression) 방식 사용
표현식(expression) 은 <%= %> 를 사용하는 방식을 말한다.
표현식 안에서도 두가지 방식이 있다.
① 1번 방식 - 저장소(setAttribute)에서 있는 값을 불러온다.
기본적으로 리턴타입이 Objcet 이기 때문에 (Integer) 은 int타입으로의 강제형변환되어
저장할객체에 원시형 타입(예: firstNum/ secondNum/ sum)으로 저장해주었다.
[ 스크립틀릿(scriptlet) ]
int firstNum = (Integer) request.getAttribute("firstNum");
// "firstNum" 으로만 결과물을 꺼내올 수 있다.
// auto Unboxing (Integer => int)
int secondNum = (Integer) request.getAttribute("secondNum");
// "secondNum" 으로만 결과물을 꺼내올 수 있다.
// auto Unboxing (Integer => int)
int sum = (Integer) request.getAttribute("sum");
// "sum" 으로만 결과물을 꺼내올 수 있다.
// auto Unboxing (Integer => int)
[ html ]
<h3>계산된 결과값 -1</h3>
<%= firstNum%>부터 <%= secondNum%>까지의 누적의 합은?<br/>
결과값 : <span style="color: red"><%= sum%></span>
② 2번 방식 - form 태그에 있는 값을 불러온다. (form 태그의 name 값)
2번째 파일(클라이언트가 보내온 데이터를 읽어들이는 역할) 에서
해당파일로 forward(전달) 를 해주었기 때문에, 여기서도 getParameter 를 통해 값을 불러올 수 있다.
즉, 1번째 파일에서 클라이언트가 보내온 데이터를 2번째 파일과 같이 3번째 파일에서도 똑같이 읽어올 수 있다.
[ 스크립틀릿(scriptlet) ]
String str_firstNum = request.getParameter("firstNum");
String str_secondNum = request.getParameter("secondNum");
[ html ]
<h3>계산된 결과값 -2</h3>
<%= str_firstNum%>부터 <%= str_secondNum%>까지의 누적의 합은?<br/>
결과값 : <span style="color: blue"><%= sum%></span>
실제파일이 저장되는 저장소 역할 [ 3번째 파일 ]
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
// 저장소(setAttribute)에서 있는 값을 불러온다.
int firstNum = (Integer) request.getAttribute("firstNum"); // "firstNum" 으로만 결과물을 꺼내올 수 있다. // 리턴타입이 Objcet 이기 때문에 (Integer) 은 int타입으로의 강제형변환되어 저장할객체에 원시형 타입(firstNum)으로 저장해주었다.
// auto Unboxing (Integer => int)
int secondNum = (Integer) request.getAttribute("secondNum"); // "secondNum" 으로만 결과물을 꺼내올 수 있다. // 리턴타입이 Objcet 이기 때문에 (Integer) 은 int타입으로의 강제형변환되어 저장할객체에 원시형 타입(secondNum)으로 저장해주었다.
// auto Unboxing (Integer => int)
int sum = (Integer) request.getAttribute("sum"); // "sum" 으로만 결과물을 꺼내올 수 있다. // 리턴타입이 Objcet 이기 때문에 (Integer) 은 int타입으로의 강제형변환되어 저장할객체에 원시형 타입(sum)으로 저장해주었다.
// auto Unboxing (Integer => int)
////////////////////////////////////////////////////////////
// form 태그에 있는 값을 불러온다. (form 태그의 name 값)
String str_firstNum = request.getParameter("firstNum"); // "02_forward_calc_02.jsp" 파일에서 해당파일로 forward(전달) 를 해주었기 때문에, 여기서도 getParameter 를 통해 값을 불러올 수 있다.
String str_secondNum = request.getParameter("secondNum"); // 즉, 클라이언트( 02_forward_calc_execute_01.jsp ) 가 보내온 데이터를 똑같이 읽어올 수 있다.
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>계산된 결과값을 보여주는 곳</title>
</head>
<body>
<h3>계산된 결과값 -1</h3>
<%= firstNum%>부터 <%= secondNum%>까지의 누적의 합은?<br/>
결과값 : <span style="color: red"><%= sum%></span>
<hr style="margin: 10px 0;">
<h3>계산된 결과값 -2</h3>
<%= str_firstNum%>부터 <%= str_secondNum%>까지의 누적의 합은?<br/>
결과값 : <span style="color: blue"><%= sum%></span>
</body>
</html>2. EL사용 방식 사용
EL 은 ${ } 를 사용하는 방식을 말한다.
일반 표현식을 사용하는 것보다 좀 더 간단하다.
${requestScope.firstNum} 은 Full Name 으로 적어준 오리지널 버전이다.
equestScope.firstNum 는 request영역에 저장되어진 키값(예: firstNum) 이라는 뜻이다.
<h3>계산된 결과값(EL을 사용한것) -1</h3>
${requestScope.firstNum}부터 ${requestScope.secondNum}까지의 누적의 합은?<br>
결과값 : <span style="color: red">${requestScope.sum}</span>
${firstNum} 는 함축한 버전이다.
만약 firstNum 을 키값으로 쓰는 영역이 중복없이 하나밖에 없을 경우 함축한 버전으로 사용하면 된다.
위와 같이 request영역에 저장되어진 키값(예: firstNum) 이라는 뜻이다.
<h3>계산된 결과값(EL을 사용한것) -2</h3>
${firstNum}부터 ${secondNum}까지의 누적의 합은?<br>
결과값 : <span style="color: blue">${sum}</span>
실제파일이 저장되는 저장소 역할 [ 3번째 파일 ]
<%@ 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>계산된 결과값(EL을 사용한것) -1</h3>
${requestScope.firstNum}부터 ${requestScope.secondNum}까지의 누적의 합은?<br> <%-- ${requestScope.firstNum} ==> 오리지널 버전이다. 즉, request영역에 저장되어진 키값(예: firstNum) --%>
결과값 : <span style="color: red">${requestScope.sum}</span> <%-- ${ }을 EL 이라고 한다. --%>
<hr style="margin: 10px 0;">
<h3>계산된 결과값(EL을 사용한것) -2</h3>
${firstNum}부터 ${secondNum}까지의 누적의 합은?<br> <%-- ${firstNum} ==> 위에보다 함축한 버전이다. 만약 firstNum 을 키값으로 쓰는 영역이 하나밖에 없을 경우 함축한 버전으로 사용하면 된다. 즉, request영역에 저장되어진 키값(예: firstNum) --%>
결과값 : <span style="color: blue">${sum}</span>
</body>
</html>
'Langauge > JSP, Servlet' 카테고리의 다른 글
| [JSP, Servlet] fmt 태그 (0) | 2022.09.01 |
|---|---|
| [JSP, Servlet] JSP 표준액션 - useBean (0) | 2022.09.01 |
| [JSP, Servlet] <%@ include file="" %> 와 <jsp:include> 차이 (0) | 2022.08.30 |
| [JSP] 지시어 include (0) | 2022.08.29 |
| [JSP] Java 에서 날짜 및 현재시각 알아오기 (0) | 2022.08.29 |
