[JSP/Servlet] JSP 필요성과 특징, 구성요소 (2023.05.15)

Study/Back-End

[JSP/Servlet] JSP 필요성과 특징, 구성요소 (2023.05.15)

Shinjio 2023. 5. 15. 17:15

🎈 JSP(JavaServer Pages) 개요

📖 JSP란?

HTML 코드에 JAVA 코드를 넣어 동적 웹페이지를 생성하는 웹어플리케이션 도구

Java 언어를 기반으로 하는 Server Side 스크립트 언어

언어의 종류

컴파일 언어
- ex. Java
- 번역의 느낌
- 코드를 한번에 해석해서 나중에는 실행만
- 해석은 오래걸리지만 실행은 빠르다

인터프리터 언어(Python)통역 - 한 줄씩 해석하고 실행하나의 프로그램을 만드는 데 사용스크립트 언어(JavaScript, JSP)인터프리터 언어에 속함한 줄씩 해석하고 실행만들어진 프로그램을 제어할 때 사용

📖 JSP가 필요한 이유

⚙ Servlet의 특징

한 클래스 내에 Business Logic과 Presentation Logic이 같이 작성됨

(Business Logic : 데이터 받아서 가공 및 처리 수행)

📖 JSP vs Servlet

웹프로그램을 만들때에는 Servlet과 JSP를 섞어서 사용

로직 구현 > Servlet

화면 구성 > JSP

나눠서 사용하는 경우가 더 많다.

📖 JSP의 특징

- .jsp의 확장자를 가짐

- 동적으로 작동하여 응답은 HTML을 이용함

- jsp >> 서블릿(.java) >> 클래스(.class) >> html로 변환되어 실행됨

HTML에 자바 코드가 있으므로 무조건 컴파일 되어야 함
jsp 파일 자체가 클라이언트에게 응답되는게 아님. 컴파일 된 후 클라이언트에게 응답
jsp 컴파일될 수 있도록 자바로 변환이 되어야 하는데 이 역할을 WAS 내 Web Container (프로그램을 실행시켜주는 역할) 가 알아서 진행해줌
우리는 jsp를 쓰지만 web container 안에서 자동으로 자바 파일로 변환 (.java) > 컴파일해서 .class 파일로 변환 > 실행하면 정적 리소스인 html로 변환 > 이 정적 html을 응답해주는 구조

🎈 JSP 작성하기

jsp 파일은 webapp 폴더 내에 작성

📖 JSP 구성요소

<%@ : 지시자

JSP에 대한 설정 정보 또는 JSP 페이지에 다른 문서를 포함시킬 때 사용

footer 등 만들어진 하나의 문서를 가져다가 쓰고 싶을 때 (메서드와 유사하게)

<%! : 선언문

JSP 페이지 내부에 자바 메서드, 변수를 선언하기 위해 사용

변수 선언, 메서드 선언

<% : 스크립트릿

JSP 페이지 내부에 자바(Java) 소스코드를 삽입하기 위해 사용

java Class 내에 작성되는 코드 그대로 작성

(가장 많이 사용)

변수 사용. 값 요청. 응답 등

쓰는 위치는 중요하지 않음

<%= : 표현식

출력결과(HTML 요소 내)에 값을 넣기 위해 사용

HTML 요소 내에 출력 결과를 넣기 위해 사용.

표현식 안에 있는 값들은 사용자 눈에 보임. HTML 문서 내에서 출력이 된다는 말

⚙ JSP 태그 사용 실습

<!-- 지시자(Directive) : JSP 설정 정보 및 다른 문서에(를) 포함 등 -->
<!-- 지시자의 종류 : page, include, taglib(tag library >> ex. JSTL) -->
<!-- contentType : 응답데이터의 형식과 인코딩 방식을 브라우저(클라이언트)에게 알려주기 위함 -->
<!-- pageEncoding : JSP 페이지에 대한 인코딩 지정 -->
<%@page import="java.util.Random"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<!-- charset : html 문서에 대한 인코딩 지정 -->
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 스크립틀릿(Scriptlet : JSP 페이지 내부에 자바 소스 코드 삽입) -->
<!-- 스크립틀릿 내에 작성한 코드는 모두 service() 메서드 안에 작성됨 -->
<% 
	// JSP 구성 요소 내에서는 자바 주석 작성
	// 스크립틀릿 안에서는 무조건 ; 작성해야 함
	System.out.print("Hello"); //이클립스 콘솔창에 출력
	int num = 10;
	int num2 = 20;
	
	Random rd = new Random();
	int ran = rd.nextInt(10);
	// out 객체를 선언한 적 없지만 jsp코드가 자바 코드로 변환되면서 WebContainer가 자동으로 out 객체(내장객체)를 생성함
	out.print(ran + "<br>");
	// out.println - 코드만 개행(화면상 개행X) >> 화면상 개행하려면 <br>
%>
<!--  표현식(Expression : 화면(웹브라우저상)에 출력하기 위해 사용, ; 작성 X -->
<%=ran %><br>
<%="String" %><br>
<%="풀"+"스택" %><br>
<!-- 선언문(Declaration) : 자바 메서드, 변수를 선언하기 위해 사용 -->
<!-- 선언문 안에 작성한 코드의 위치는 클래스 이름 바로 밑, 전역 -->
<%! int num3 = 100; %>
<%! 
	public void print(){
		System.out.println("print!");
	}	
%>
</body>
</html>

실습 2.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<table border=1>
		<tr>
			<%
			for(int i = 1; i <= 10; i++){
				out.print("<td>" + i + "</td>");
			}
			%>
		</tr>
	</table>
	
	<table border=1>
		<tr>
			<%for(int i = 1; i <= 10; i++){%>
				<td><%=i %></td>
			<%}%>
		</tr>
	</table>
	
</body>
</html>

실습 3.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="Ex02Output.jsp" method="post">
		<input type="text" name="data">
		<input type="submit">
	</form>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<%
	request.setCharacterEncoding("UTF-8");
	String data = request.getParameter("data");
	out.print(data);
	%>
	<%=data %>
</body>
</html>

실습 4.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="Ex03Output.jsp" method="post">
		<input type="number" name="num1">
		<br>
		<input type="number" name="num2">
		<br>
		<select name="ope">
			<option>+</option>
			<option>-</option>
			<option>*</option>
			<option>/</option>
		</select>
		<input type="submit" value="계산">
	</form>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<%
		request.setCharacterEncoding("UTF-8");
		int num1 = Integer.parseInt(request.getParameter("num1"));
		int num2 = Integer.parseInt(request.getParameter("num2"));
		String ope = request.getParameter("ope");
		
		int result;
		if(ope.equals("+")){
			result = num1 + num2;
		}else if(ope.equals("-")){
			result = num1 - num2;
		}else if(ope.equals("*")){
			result = num1 * num2;
		}else{
			result = num1 / num2;
		}
		//출력방법 1)
		out.print(num1 + ope + num2 + "=" + result);
	%>
	<!-- 출력방법 2) -->
	<%= num1 %>
	<%= ope %>
	<%= num2 %>
	=
	<%= result %>
	
	<!-- 출력방법 3) -->
	<%= num1+ope+num2+"="+result %>
	
</body>
</html>

JSP도 url mapping 가능