[23/06/14] JSP (1)

yeju·2023년 6월 14일
jsp
0

JSP

목록 보기
1/7
post-thumbnail

📌 JSP란?

웹(HTML)에서 자바 코드를 사용할 수 있게 주는 기술

📝 JSP 페이지 처리 과정

jsp 파일 안에서는 HTML과 자바 코드가 함께 사용되고, 서버가 HTML과 자바 코드를 분류해 컴파일하는 과정을 거쳐 웹 페이지에 최종 실행된 내용이 출력된다.

1. 변환 단계 : 톰캣 컨테이너가 jsp 파일을 자바 파일로 변환 (자바 부분 실행을 위해)
2. 컴파일 단계 : 변환된 자바 파일을 클래스 파일로 컴파일
3. 실행 단계 : 클래스 파일을 실행한 결과를 브라우저로 전송해 출력

변환된 자바 파일을 확인해 보면, JSP에서 작성한 HTML 태그가 자바 코드로 자동 변환되어 write() 메서드로 출력되는 것을 확인 가능함

📝 JSP 생명주기

번역 - 컴파일 - 로딩 및 초기화 - 실행 - 소멸

jsp 파일의 자바 코드에서 객체가 생성되고 소멸하는 과정
서버 관리 시 중요하게 생각해야 함

📌 1. 스크립트 태그

JSP 페이지에서 자바 언어를 사용하는 태그
선언문 태그 : <%! ... %>
스크립틀릿 태그 : <% ... %>
표현문 태그 : <%= ... %>

jsp 파일의 스크립트 태그 안에 자바 코드를 작성 후 서버에서 실행하면,
서버에서 스크립트 태그 안에 있는 내용을 html 태그와 분류하고 자동으로 자바 클래스를 생성
선언문 <%! %> 안의 내용은 자바 클래스의 자식으로, 스크립틀릿 <% %> 안의 내용은 클래스 안의 메서드 _jspService() 의 자식으로 분류 후 컴파일 과정을 거침

📝 선언문 : <%! ... %>

해당 JSP 페이지 안에서 사용할 변수와 함수 선언 시 사용

📝 스크립틀릿 : <% ... %>

자바 코드로 실행할 내용을 작성할 때 사용

<!-- html에 str 출력하기 -->
<% out.print(str); %>

📝 표현문 : <%= ... %>

웹 페이지에 내용을 출력(print)할 때 사용
<% out.print(내용); %> 과 <%= 내용 %> 은 동일한 작업을 수행함 (표현문은 세미콜론 X)

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
        <!-- 선언문 태그: 변수 선언 -->
        <%! int data = 50; %>
        
        <p>안녕하세요</p>
        
        <!-- 스크립틀릿 태그: 실행할 내용 -->
        <%
                out.println("Value of the variable is : "+data+"<br>");
                data++;
        %>
        
        <!-- 표현문 태그: 내용 출력 -->
        <%= data %>
</body>
</html>
[실행 결과]
안녕하세요

Value of the variable is : 50
51

📌 2. 디렉티브 태그

해당 JSP 페이지에 대한 정보, 다른 문서 포함 여부 등을 설정하는 태그
page 태그 : <%@ page ... %>
include 태그 : <%@ include ... %>
taglib : <%@ taglib ... %>

📝 page : <%@ page ... %>

JSP 페이지의 정보를 설정하는 태그, 문서 최상단에 사용하는 것이 좋음
page 태그의 속성으로 해당 JSP 페이지의 옵션을 설정할 수 있음

page 태그의 주요 속성

language : 사용할 프로그래밍 언어 설정 (기본값: java)
contentType : jsp가 생성할 문서의 유형 설정 (기본값: text/html)
pageEncoding : 서버에서 해당 jsp 페이지를 처리할 때 문자 인코딩 설정
import : jsp가 사용할 자바 클래스 설정

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR" import="java.util.Date"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
	<!-- Date 클래스를 사용하기 위해 page 디렉티브 태그에 import 속성 입력 -->
	<p>
		Today is <%= new Date() %>
	</p>
</body>
</html>
[실행 결과]
Today is Wed Jun 14 17:51:41 KST 2023

📝 include : <%@ include ... %>

현재 JSP 페이지의 특정 영역에 외부 파일의 내용을 삽입하는 태그
.html, .jsp, .txt 파일 포함 가능, file="파일명" 속성을 사용해 파일 지정

파일명 : 230614_include01.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR" import="java.util.Calendar"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>include</title>
</head>
<body>
	<!-- 아래 파일의 내용을 현재 jsp 페이지에 포함 -->
	<%@ include file="230614_include01_header.jsp" %>
	<p>
		Today is <%= Calendar.getInstance().getTime() %>
	</p>
	<p>include01.jsp 현재 페이지 영역입니다.</p>
</body>
</html>
파일명 : 230614_include01_header.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR" import="java.util.Calendar"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>include</title>
</head>
<body>
	<h4>include01_header.jsp 헤더 영역입니다.</h4>
</body>
</html>
[실행 결과]
include01_header.jsp 헤더 영역입니다.
Today is Wed Jun 14 17:55:06 KST 2023
include01.jsp 현재 페이지 영역입니다.

📝 taglib : <%@ taglib ... %>

태그 라이브러리를 설정하는 태그

📌 3. 액션 태그

JSP 페이지 내에서 어떤 동작을 하도록 명령하는 태그
형식 : <jsp: ... /> (닫는 태그 필요!)
ex) 페이지 사이의 이동, 페이지의 실행 결과를 다른 페이지에 전달, 자바빈즈 사용 등

📝 forward : <jsp:forward ... />

현재 JSP 페이지에서 다른 페이지로 이동할 때 사용하는 태그
자바 코드 처리 중 forward 액션 태그를 만나면 바로 해당 페이지로 이동해 내용을 처리하고,
결과(이동한 페이지)를 웹 화면에 출력
page="파일명" 속성을 사용해 파일 지정
서블릿의 RequestDispatcher 포워드 기능 대신 사용 가능

📝 include : <jsp:include ... />

현재 JSP 페이지의 특정 영역에 외부 파일의 내용을 삽입하는 태그
page="파일명" 속성을 사용해 파일 지정
<%@ include ... %> 태그와 달리 파라미터를 가지고 다른 페이지에 전달할 수 있어서 더 동적인 페이지를 만들 수 있음
디렉티브 include 태그는 포함하는 jsp 페이지를 하나로 합친 후 한 개의 자바 파일로 만들어 컴파일되지만, 액션 include 태그는 포함하는 jsp 페이지가 각각의 자바 파일로 생성되어 컴파일됨

📝 param : <jsp:param ... />

현재 JSP 페이지에서 다른 페이지로 정보를 전달하는 태그
<jsp:forward> <jsp:include> 액션 태그의 내부에 사용하고
name="변수명" value="변수값" 속성으로 변수에 값을 담아 이동할 페이지에 전달할 수 있음
전달한 파라미터(변수) 는 Request 객체 에 저장되고 참조변수 request 를 통해 필요한 값에 접근 가능

파일명 : 230614_param01.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Action Tag</title>
</head>
<body>
	<h3>param 액션 태그</h3>
	<jsp:forward page="230614_param01_data.jsp">
		<jsp:param name="id" value="admin" />
		<jsp:param name="name" value='<%= java.net.URLEncoder.encode("관리자") %>' />
        <!-- id에 "admin", name에 "관리자" 라는 값을 담아 이동 -->
    	<!-- encode()는 한글이 깨지는 것을 방지하기 위한
        URLEncoder 클래스의 메서드 -->
	</jsp:forward>
	<p>Java Server Page</p>
</body>
</html>
파일명 : 230614_param01_data.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Action Tag</title>
</head>
<body>
	<!-- 다른 페이지로부터 전달받은 파라미터에 접근할 때는
    Request 객체의 참조변수 request 사용 -->
    <!-- getParameter(name) : 변수명이 name인 파라미터의 값 가져오기 -->
	<p> 아이디 : <%= request.getParameter("id") %> </p>
	<% String name = request.getParameter("name"); %>
	<p> 이름 : <%= java.net.URLDecoder.decode(name) %></p>
</body>
</html>
url : http://localhost:8080/test/230614_param01.jsp (변하지 않음)

[실행 결과]
아이디 : admin
이름 : 관리자

📝 자바 빈즈

자바 빈즈란? 데이터를 처리하기 위해 정형화된 규칙을 가지고 만들어진 자바 클래스
JSP 페이지에서 자바 빈즈의 객체를 생성해 사용할 수 있다.
자바 빈즈 클래스는 프로젝트 폴더/src/main/java 내에 작성

📖 자바 빈즈 작성 규칙

1. 모든 멤버 변수의 접근 제어자는 private 이어야 함
2. 멤버 변수에 접근 가능한 getter/setter 메서드가 있어야 함
3. 기본 생성자가 있어야 함
4. 직렬화(한 객체에 순차적으로 접근)처리를 하려면 java.io.Serializable 인터페이스 구현이 필요함

📝 useBean : <jsp:useBean ... />

자바 빈즈(클래스)를 사용하기 위해 객체를 생성하는 태그
현재 영역(scope)에 해당 객체가 있는지 찾고 있으면 그 객체 사용, 없으면 새로 생성함

<jsp:useBean id="자바빈 이름" class="생성할 객체의 클래스명" scope="객체가 저장되는 범위" />

id : 자바빈즈 객체를 식별하기 위한 이름 (=자바의 참조변수)
class : 객체를 생성할 자바빈즈의 클래스명 (패키지명 포함)
scope : 자바빈즈 객체가 저장되는 영역 지정
즉, 객체 사용 후 소멸되기 전까지의 범위

  • page : 생성된 페이지 내에서만 사용 가능(기본값), 페이지가 바뀌면 객체를 공유하지 않음
  • request : 연결된 페이지까지 한 번 사용 가능 (두 페이지 모두 request로 설정 필요)
  • session : 브라우저 종료 / 일정 시간동안 유지됨
  • application : 서버가 종료되기 전까지 계속 유지됨

📄 예제 1. Date 클래스로 객체 생성해 날짜 출력하기

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>useBean</title>
</head>
<body>
	<!-- Date date = new Date(); -->
	<jsp:useBean id="date" class="java.util.Date"></jsp:useBean>
	<%= date %>
</body>
</html>
[실행 결과]
Thu Jun 14 20:03:57 KST 2023

📄 예제 2. 직접 만든 클래스로 객체 생성하기

package test;

public class cal {
	public int process(int n) {
		return n*n*n;
	}
}
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>useBean</title>
</head>
<body>
	<!-- test 패키지의 cal 클래스 객체 생성 -->
	<jsp:useBean id="bean" class="test.cal" />
	<%
		int n = 5;
		// cal 클래스의 process()메서드 호출
		int m = bean.process(n);
		out.print(n+"의 세제곱 : "+m);
	%>
</body>
</html>
[실행 결과]
5의 세제곱 : 125

📄 예제 3. 연결된 페이지에 객체 공유하기

package test;

public class Person {

	private int id = 1234;
	private String name = "정예주";
	
	public Person() {
	}
	
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	
}
파일명 : 230614_useBean03.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>useBean</title>
</head>
<body>
	<!-- 연결된 페이지까지 식별된 해당 객체가 공유됨 -->
	<jsp:useBean id="person" class="test.Person" scope="request" />
	<p>아이디 : <%= person.getId() %></p>
	<p>이름 : <%= person.getName() %></p>
</body>
</html>
파일명 : 230614_useBean04.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>useBean</title>
</head>
<body>
	<!-- 연결된 페이지까지 식별된 해당 객체가 공유됨 -->
	<jsp:useBean id="person" class="test.Person" scope="request" />
	<p>아이디 : <%= person.getId() %></p>
	<p>이름 : <%= person.getName() %></p>
	<%
		person.setId(4321);
		person.setName("홍길동");
	%>
	<jsp:include page="230614_useBean03.jsp" />	
</body>
</html>
[실행 결과]
아이디 : 1234
이름 : 정예주
아이디 : 4321
이름 : 홍길동

📝 set/get Property : <jsp:setProperty ... />, <jsp:getProperty ... />

생성한 자바 빈즈 객체의 속성을 설정하거나 속성값을 가져오는 액션 태그

jsp에서 getParameter() 메서드로 값을 가져와 DTO의 getter/setter 메서드를 호출해 DTO 객체에 값을 저장하거나 가져오는 작업을 get/setProperty 액션 태그로 대체할 수 있음

<jsp:setProperty name="자바빈 이름" property="속성명" value="속성값" />
<jsp:getProperty name="자바빈 이름" property="속성명" />

<jsp:setProperty name="m" property="*" />

setProperty 태그의 property를 *로 지정하면, 자바빈 객체의 속성명(멤버변수명)과 넘어온 파라미터의 이름을 비교해 이름이 같은 것을 모두 set함

📄 set/getProperty 태그로 객체의 값 가져오기

1. 정보를 입력받을 페이지 작성

파일명: memberForm.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 가입창</title>
</head>
<body>
	<form action="member7.jsp" method="post">
		<h1 style="text-align:center">회원 가입창</h1>
		<table align="center">
			<tr>
				<td width="200">
					<p align="right">아이디</p>
				</td>
				<td width="400">
					<input type="text" name="id" required>
				</td>
			</tr>
			<tr>
				<td width="200">
					<p align="right">비밀번호</p>
				</td>
				<td width="400">
					<input type="password" name="pwd" required>
				</td>
			</tr>
			<tr>
				<td width="200">
					<p align="right">이름</p>
				</td>
				<td width="400">
					<input type="text" name="name" required>
				</td>
			</tr>
			<tr>
				<td width="200">
					<p align="right">이메일</p>
				</td>
				<td width="400">
					<input type="text" name="email" required>
				</td>
			</tr>
			<tr>
				<td width="200">&nbsp;</td>
				<td width="400">
					<input type="submit" value="가입하기">
					<input type="reset" value="다시입력">
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

2. 정보를 저장할 자바빈 클래스 작성

package sec01.ex01;

public class MemberBean {
	private String id;
	private String pwd;
	private String name;
	private String email;
	
	public MemberBean() {
	}

	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getPwd() {
		return pwd;
	}
	public void setPwd(String pwd) {
		this.pwd = pwd;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
}

3. 정보를 출력할 jsp 페이지 작성

<%@ page language="java" contentType="text/html; charset=UTF-8"
	import="sec01.ex01.*"
    pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding("utf-8");
%>
<!-- useBean 액션 태그로 객체 만들기 -->
<jsp:useBean id="m" class="sec01.ex01.MemberBean" scope="page" />
  
<!-- param 속성 안에 들어가는 값 : request.getParameter("파라미터")와 동일 -->
<!-- param은 생략 가능하며, 생략하면 자바빈의 속성 이름과 넘어온 파라미터 키 이름이 같으면 자동으로 set함 -->
<jsp:setProperty name="m" property="id" param="id" />
<jsp:setProperty name="m" property="pwd" />
<jsp:setProperty name="m" property="name" />
<jsp:setProperty name="m" property="email" />
<!-- <jsp:setProperty name="m" property="*" />
자바빈 속성과 넘어온 파라미터를 찾아 이름이 같으면 모두 set함 -->

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 목록창</title>
</head>
<body>
	<table align="center" width="100%">
		<tr align="center" bgcolor="#99ccff">
			<td width="7%">아이디</td>
			<td width="7%">비밀번호</td>
			<td width="5%">이름</td>
			<td width="11%">이메일</td>
		</tr>
		<!-- getProperty 태그로 객체의 값 가져오기 -->
		<tr align="center">
			<td>
				<jsp:getProperty name="m" property="id" />
			</td>
			<td>
				<jsp:getProperty name="m" property="pwd" />
			</td>
			<td>
				<jsp:getProperty name="m" property="name" />
			</td>
			<td>
				<jsp:getProperty name="m" property="email" />
			</td>
		</tr>
		
		<tr height="1" bgcolor="#99ccff">
			<td colspan="5"></td>
		</tr>
	</table>
	<a href="memberForm.html">회원 추가하기</a>
</body>
</html>

💻 실행 결과
자바빈 객체에 입력한 값을 set하고 출력(get) 가능함

profile
yeju
🌱
다음 포스트

[JSP] 회원가입 프로세스

0개의 댓글