[JSP] JSP 구성 요소: JSP 지시자, 스크립트 요소, 액션 태그

Programming/JSP

[JSP] JSP 구성 요소: JSP 지시자, 스크립트 요소, 액션 태그

Isaac S. Lee 2023. 10. 17. 15:54

🍁Servlet과 JSP의 특징

Servlet

Servlet은 자바를 베이스로 한다.

*.java

장점: 자바를 그대로 사용할 수 있다.

단점: 문자열 처리를 해야 하므로 클라이언트 코드를 작성하기 불편하다.

JSP

JSP는 HTML 페이지를 베이스로 한다.

*.jsp

장점: HTML을 기반으로 하기 때문에 클라이언트 코드를 작성하기 쉽고, 추가 자바 코드를 작성할 수 있다.

단점: 자바 코드를 작성하기 불편하다.

이게 자바 파일이라고?

<%@ page import="java.util.Calendar" %>
<%@ 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>
   <h1>Hello!</h1>
   
   <%=Calendar.getInstance() %>

</body>
</html>

JSP를 사용하는 이유는 Servlet보다 개발 편의성이 높기 때문이다.

JSP는 HTML 기반 문서이기 때문에 webapp 문서에 파일을 생성하여 사용한다.

아무리 봐도 HTML 문서이지만, 이건 java 파일이다!

🍁JSP 구성 요소

JSP 지시자 (JSP Directive)

<%@ %>
page 지시자
include 지시자
taglib 지시자

스크립트 요소 (Scripting Elements)

<% %>
스크립틀릿 (Scriptlet)
표현식 (Expression)
선언부

액션 태그 (Action Tags)

<jsp:XXX> <c:XXX>
기본 액션 태그
확장 액션 태그
사용자 정의 액션 태그

🍂JSP 지시자 (JSP Directive)

page 지시자

<%@page import="java.util.Calendar"%>
<%@page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

page 지시자는 JSP의 실행환경(JSP 컨테이너 == 톰캣)에게 현재 페이지의 정보를 알려주는 역할을 한다.

page 지시자는 JSP 페이지의 항상 첫 번째 라인에 위치해 있지만 항상 첫 번째 라인에 위치하지 않아도 되며, 1개 이상 작성하는 게 가능하다.

language="java"
contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"
import="java.util.Calendar"

language는 현재 JSP 페이지에서 사용할 서버 프로그래밍 언어를 지정한다.

contentType은 JSP 페이지 내용물에 대해 기술한 것으로, 브라우저에게 전달할 HTML 페이지와 연관이 있다.

text/html(MINE Type)은 text 타입의 html 문서라는 것을 알려주는 것이다. 이 정보는 톰캣이 확인한 다음에 클라이언트(브라우저)에 보여준다. 그리고 charset은 HTML 문서의 인코딩으로, 마찬가지로 브라우저에게 전달한다.

pageEncoding은 JSP의 인코딩이다.

import="java.util.Calendar"는 자바의 import 구분과 동일하다.

include 지시자

"ex02.jsp"
<%@include file="URL" %>

include 지시자는 지정된 URL의 페이지(JSP, HTML, Text 등)를 현재 JSP 페이지의 일부로 사용하는 조각 페이지 기능이다.

조각 페이지 사용

<%@ 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>
	<h1>include</h1>
	
	<p>문자열</p>
	<p>문자열</p>
	<p>문자열</p>
	<p>문자열</p>
	<p>문자열</p>
	<p>문자열</p>
	<p>문자열</p>
	<p>문자열</p>
	<p>문자열</p>
	
	<%@ include file="inc/copyright.jsp" %>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<hr>
<div>
	&copy;Copyright 2023 test.com ALL rights reserved.
</div>

중복되면 안 되는 <html> 태그가 중복되어 사용되었다.

이러한 문제를 해결하기 위해 조각 페이지에는 재사용되지 않는 내용만 남기고 작성해야 한다.

taglib 지시자

(추후 추가 예정)

🍂스크립트 요소 (Scripting Elements)

스크립틀릿과 익스프레션은 순수 JSP를 사용할 때 가장 많이 사용하는 표현이다.

스크립틀릿 (Scriptlet)

<% %>

<% 자바 영역 %>

스크립틀릿은 HTML 페이지 영역(JSP)에서 Java를 사용할 수 있는 영역을 제공한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	//자바 영역
	int a = 10;
	int b = 20;
	int c = a + b;
	String name = "Isaac";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
</body>
</html>

스크립틀릿으로 여러 가지 업무 코드를 작성하고, 화면을 출력해야 하는 것들은 익스프레션을 사용한다.

출력이 아닌 나머지 코드는 HTML 코드 위에 작성한다.

표현식 (Expression)

<%= %>

표현식은 자바의 값(데이터)을 HTML 문서에 출력하는 역할을 한다.

예로 들면 system.out.print 같은 역할을 하는 셈이며, 익스프레션을 통해 적절한 위치에 출력을 할 수 있다.

<table border="1" width="300">
	<tr>
		<th>a</th>
		<td><%= a %></td>
	</tr>
	<tr>
		<th>b</th>
		<td><%= b %></td>
	</tr>
	<tr>
		<th>c</th>
		<td><%= c %></td>
	</tr>
	<tr>
		<th>d</th>
		<td><%= name %></td>
	</tr>
</table>

코드를 확인해 보면 익스프레션으로 올바른 값으로 대체되어 출력되는 것을 볼 수 있다.

구구단

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	int dan = 5;
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>구구단</h1>
	
	<%
		for (int i=1; i<=9; i++) {
	%>
			<div><%= dan %> x <%= i %> = <%= dan * i %></div>
	<%
		}
	%>
</body>
</html>

for문의 내용은 {}로 연결되어 있어야 하지만, 스크립틀릿 안에 데이터를 넣어야 할 때 for문을 끊어서 사용하는 것처럼 구현할 수 있다.

자바와 HTML이 뒤엉켜 있는 이러한 코드를 🍝 스파게티 코드라고 한다. 이런 상황을 안 만드는 게 좋지만, 스파게티 코드는 웹에서는 굉장히 흔한 일이다.

동적으로 태그 생성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String name = "Isaac";
	int age = 25;
	String txt = "<input type='text'>";
	String color = "cornflowerblue";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	div {
		color: <%= color %>;
	}
</style>
</head>
<body>
	<h1>스크립틀릿과 표현식</h1>
	<div>이름: <%= name %></div>
	<div>나이: <%= age %></div>
	<div><%= txt %></div>
	<div><input type="text" value="<%= color %>"></div>
	<input type="button" value="버튼" id="btn1">

	<script>
		document.getElementById('btn1').onclick = function() {
			alert('<%= color %>');
		};
	</script>
</body>
</html>

자바의 변수에 태그를 만드는 문자열을 만들고, HTML에서 호출하여 동적으로 태그를 생성할 수 있다.

브라우저는 정적으로 만든 태그와 동적으로 만든 태그를 구별할 수 없다.

결론적으로 클라이언트 코드와 관련된 모든 부분에 대해 자바 변수는 위치에 상관없이 어디든지 사용할 수 있다.

선언부

<%! %>

선언부는 멤버 변수와 멤버 메서드를 선언하는 영역이다.

public을 붙였을 때 에러가 나는 것을 보아 이때 선언하는 것들은 지역 변수이다. 즉, 이는 어떤 메소드 영역의 지역 변수이다.

자바스크립트는 함수 안에 함수를 넣을 수 있었는데, 자바는 메소드 안에 메소드를 넣을 수 없다. test() 메소드를 만들 수 없는 이유도 이미 이 영역 자체가 어떤 영역의 구현부이기 때문이다.

이럴 때 사용할 수 있는 게 선언부이다.

<%!
	int b = 20; //지역 변수(X), 클래스 멤버 변수(O)
	
	public int sum(int a, int b) {
		return a + b;
	}
%>

<div><%= sum(10, 20)%></div>

이렇게 선언부를 사용할 수도 있지만, 가용성이 낮으므로 현실적으로는 적합하지 않은 방법이다.

일반 클래스 사용

package com.test.jsp;

public class MyMath {
	
	public int sum(int a, int b) {
		return a + b;
	}
	
}

<%@page import="com.test.jsp.MyMath"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%!
	int b = 20;
	
	public int sum(int a, int b) {
		return a + b;
	}
	
	MyMath m = new MyMath();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div><%= sum(10, 20)%></div>
	<div><%= m.sum(10, 20)%></div>
</body>
</html>

선언부 대신에 일반 클래스를 사용해서 이용하면 다른 jsp 파일에서도 해당 메소드를 사용할 수 있다.

🍂액션 태그 (Action Tags)

기본 액션 태그

(추후 추가 예정)

확장 액션 태그

(추후 추가 예정)

사용자 정의 액션 태그

(추후 추가 예정)

저작자표시 비영리 변경금지 (새창열림)