💡 핵심 요약 (TL;DR)
JSTL과 EL : CORE 라이브러리(set), 페이지실행순서의 동작 원리를 이해하고 실제 프로젝트에 적용하기 위한 실무 가이드다.
* JS에서는 JSTL값을 사용할 수 있을까? YES!을 적용할 수 있다.
CORE 라이브러리
변수선언, 조건문, 반복문 처리 가능
페이지 이동처리 가능
페이지실행순서
JSP(JAVA) -> JSTL -> HTML -> Javascript -> JQuery
순서 차이? Javascript -> HTML -> JQuery
HTML -> Javascript -> JQuery 가 기본순서이고 구동방식에 따라 Javascript -> HTML -> JQuery 처럼 순서가 변경될수도있다. 기본순서를 외워두자.
JSTL에서는 JS값을 받아올 수 있을까? NOPE!
JS에서는 JSTL값을 사용할 수 있을까? YES!
set 태그
변수선언
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <h2 > JSTL 사용 변수 선언</h2 > <c:set var ="num3" value ="30" /> <c:set var ="num4" value ="40" /> <c:set var ="result" value ="${num3+num4}" /> <c:out value ="${result}" /> <br > //출력값 30 JSTL 사용 변수 선언 70 HTML: 30 + 40 = 70 JSTL: 30 + 40 = 70 JSTL: 30 + 40 = 70
변수를 가지고 페이지를 이동하기
기존방식 : request 영역에 저장된 값을 받아서 출력
변수값을 일일히 저장하지 않더라고 출력할 수 없을까?
JSTL사용해서 다른페이지 변수를 값을 받지않아도 바로 출력가능!
HOW? EL태그안에는 requestScope.name사용하면 됨!
requestScope : EL표현식에서 사용하는 내장객체
JSTL 사용해서 변수 선언시 특정 영역을 지정 가능
페이지를 두 개를 생성한다. set1.jsp와 set2.jsp
페이지 이동시 데이터를 request 영역에 저장된 값을 받는 것 대신 그냥 바로 출력하는 방법
페이지 이동시 jsp:forward 액션태그사용
스코프
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <% //기존방식 : request 영역에 저장된 값을 받아서 출력 String name = (String)request.getAttribute("name");//다운캐스팅 %> <h2 > set1.jsp 에서 전달된 name : <%=name %></h2 > <h1 > 여기는 set2.jsp</h1 > <h2 > 변수 가져와서 출력</h2 > <h3 > 이름 : ${name }</h3 > <h3 > 이름 : ${requestScope.name }</h3 > //출력값 여기는 set2.jsp 변수 가져와서 출력 이름 : 아이티윌 이름 : 아이티윌
객체를 가지고 페이지이동하기 set2.jsp페이지 생성
객체를 가지고 페이지 이동시 데이터를 표시한 페이지를 생성한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <%@ page language = "java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <!--2 -1. 태그라이브러리추가 --> <%@ taglib prefix = "c" uri="http://java.sun.com/jsp/jstl/core" %> <!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> <h2>객체정보 가져와서 출력</h2> <!-- 2. JSTL 사용 변수에 저장후 호출 2 -2. 태그라이브러리 출력방식 --> <c:set var = "itwill" value="${requestScope.ib }" /> <h3>이름 : ${itwill.name }</h3> <h3>나이 : ${itwill.age }</h3> <h3>연락처 : ${itwill.tel }</h3> </body> 객체정보 가져와서 출력 ID : 고양이 PW : cat 이름 : 고영희 나이 : 10 연락처 : 010 -1
ItwillBean.java 자바빈객체생성1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 public class ItwillBean { private String id; private String pw; private String name; private int age; private String tel; public String getId () { return id; } public void setId (String id) { this .id = id; } (생략) @Override public String toString () { return "ItwillBean [id=" + id + ", pw=" + pw + ", name=" + name + ", age=" + age + ", tel=" + tel + "]" ; } }
ItwillServlet.java 생성
ItwillServlet에 HttpServlet에 extends(상속)한다.
자바코드는 웹페이지에서 볼수없고 콘솔에서만 볼 수 있다.
이때 HttpServlet를 상속함으로써 웹페이지에서 java코드를 볼 수 있다.
웹페이지 처리를 위해 doGet() 오버라이딩 (alt + shift + s + v)
doGet(): 페이지 처리방식이 GET방식일 때 사용
doPost(): 페이지 처리방식이 POST방식일 때 사용
@WebServlet 어노테이션 추가
@WebServlet(“주소”): 클래스에 접근가능한 주소를 지정.
itwill 주소 입력시 – forward –> set2.jsp화면 출력하기
forward는 jsp액션태그이다. jsp:forward 태그를 java에서 사용하려면 어떻게 해야할까?
RequestDispatcher 객체사용!
RequestDispatcher는 포워딩 처리가능한 객체
request내장객체로부터 전달받아서 사용
정보를 저장해서 set2.jsp로 이동
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 package com.itwill.ex;import java.io.IOException;import javax.servlet.RequestDispatcher;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;@WebServlet("/itwill") public class ItwillServlet extends HttpServlet { @Override protected void doGet (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("doGet() 호출" ); request.setAttribute("name" , "아이티윌" ); ItwillBean ib = new ItwillBean (); ib.setId("고양이" ); ib.setPw("cat" ); ib.setAge(10 ); ib.setTel("010-1" ); ib.setName("고영희" ); request.setAttribute("ib" , ib); RequestDispatcher dis = request.getRequestDispatcher("/core/set2.jsp" ); dis.forward(request, response); } }
객체 여러개(리스트계열)를 가지고 페이지이동하기 set2.jsp페이지 생성1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <h2 > 벡터에 저장된 정보를 가져와서 출력</h2 > <h3 > ID : ${requestScope.vec[0].id }, ${requestScope.vec[1].id }</h3 > <h3 > PW : ${vec[0].pw }, ${vec[1].pw }</h3 > <c:set var ="v" value ="${requestScope.vec }" /> <h3 > 이름 : ${v[0].name }, ${v[1].name }</h3 > <h3 > 나이 : ${v[0].age }, ${v[1].age }</h3 > <c:set var ="v0" value ="${requestScope.vec[0] }" /> <h3 > 연락처 : ${v0.tel }</h3 > //출력값 벡터에 저장된 정보를 가져와서 출력 ID : 고양이, 강아지 PW : cat, dog 이름 : 고영희, 강하지 나이 : 10, 100 연락처 : 010-1
ItwillBean.java 자바빈객체생성위의 4-2와 동일하므로 코드생략
ItwillServlet.java 생성1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 @WebServlet("/itwill") public class ItwillServlet extends HttpServlet { @Override protected void doGet (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("doGet() 호출" ); ItwillBean ib = new ItwillBean (); ib.setId("고양이" ); ib.setPw("cat" ); ib.setAge(10 ); ib.setTel("010-1" ); ib.setName("고영희" ); ItwillBean ib2 = new ItwillBean (); ib2.setId("강아지" ); ib2.setPw("dog" ); ib2.setAge(100 ); ib2.setTel("011-111" ); ib2.setName("강하지" ); Vector vec = new Vector (); vec.add(ib); vec.add(ib2); request.setAttribute("vec" , vec); System.out.println("벡터저장완료" ); RequestDispatcher dis = request.getRequestDispatcher("/core/set2.jsp" ); System.out.println("/core/set2.jsp로 포워딩완료" ); dis.forward(request, response); }
특정영역에 저장된 값 삭제 : <c:remove />
<c:remove /> : 사용해서 값 삭제
set2.jsp페이지에서 처리
1 2 3 <c:remove var ="name" scope ="request" /> <h3 > 이름 : ${name }</h3 >
#JSTL EL