본문 바로가기
JSP 웹프로그래밍

JSP #5 : JSP 지시어, 템플릿 데이터, 스크립트 요소 (230104)2

by haheehee 2023. 1. 4.

++ JSP ++

- HTML 페이지에 자바 코드 직접 사용

- 서블릿 컨테이너에 의해 관리되는 내장객체의  생명주기로, 페이지 간의 속성을 관리

- 커스텀 태그 기술을 사용해 코드를 태그화(action, JSTL...)

- EL(Expression Language)로 데이터 표현

 

- 구성요소

  • 지시어(Standard Directives)
  • 액션(Standard Action)
  • 템플릿 데이터(Template Data)
  • 스크립트 요소(Script Element)
  • 커스텀 태그(Custom Tag)와 EL(Expression Language)

- HTML 파일에 자바 기술을 거의 무한대로 사용 가능

- 비교적 쉬운 프로그래밍

- 커스텀 태그 라이브러리 등 확장 태그 구조를 사용 가능

- 서블릿으로 변환되어 실행 -> 서블릿 기술의 장점을 모두 가짐

- MVC 패턴, 스프링 프레임워크 등의 구조를 적용 가능 ->  개발 생산성이 향상, 성능 보장

- 모든 개발이 서버에서 -> 효율 향상

 

- 하지만, 화면 구성요소를 변경하면 JSP->자바->클래스->서블릿 실행 과정을 거친다 :  매번 확인해야해서 시간이 소요됨

- 개발자와 디자이너 간 역할 분담에 제약

- JSP 파일의 화면 디자인 확인에도 반드시 서블릿 컨테이너의 실행이 필요

 


지시어(Directives)

- JSP 파일의 속성을 기술하는 요소

- JSP 컨테이너에 해당 페이지를 어떻게 처리해야 하는지를 전달하는 내용

- 지시어 : page, include, taglib

- 지시어의 기본 형식

<%@ 지시어속성="값" %>

page 지시어

- 현재 JSP 페이지를 컨테이너에서 처리(서블릿으로 변환)하는 데 필요한 각종 속성 기술

- 소스코드 맨 앞에 위치

- 이클립스에서 JSP 파일을 생성할 때 자동으로 생성

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

** space바 잘못들어가면 오류난다!

** import문 빼고 다른 속성들은 한번만 들어가야한다. (중복으로 들어가면 오류)

  • language: 현재 페이지의 스크립트 언어를 지정하는 속성
  • contentType: 현재 페이지의 파일 형식을 지정하는 속성 - 클라이언트 요청에 응답할 때 전달하는 HTTP 헤더 정보
  • pageEncoding: JSP 파일을 컨테이너가 처리할 때 인코딩을 지정하는 속성 - 한글 처리 : UTF-8’로 지정
  • import: JSP 파일 내에서 자바 코드(스크립트릿)를 직접 사용하는 경우 일반 자바 코드와 같이 클래스에 대한 패키지 import가 필요
  • errorPage: 현재 JSP 요청 처리 중에 에러가 발생하는 경우 서버 에러를 클라이언트에 전달하지 않고 별도의 페이지에서 처리하기 위한 속성 - JSP에서 에러 페이지 설정을 넣는 것보다는 서버 설정을 사용하는 것을 권장

include 지시어

- 다른 파일을 포함하기 위한 지시어

- 사용된 위치에 특정 파일(html, jsp)을 불러온다.

- 컨테이너에서는 포함된 파일을 하나로 처리

- 자바 소스를 생성한 뒤 서블릿으로 컴파일

- include에 사용된 파일의 내용을 모두 포함한 하나의 서블릿 코드로 생성되어 컴파일

- 포함되는 파일의 경우 해당 파일을 직접 요청해서 실행하는 것이 아니라면 개별 구성요소를 갖출 필요가 없다

- (page 지시어, HTML 기본 태그 구성요소 등)

- include 지시어는 원하는 위치에 자유롭게 사용가능

<%@ include file="파일위치"%>

** 각각 만들어 놓고, 파일위치만 바꾸면 됨!! (연결만 하면 된다!!-> 매번 바꾸지 않아도 된다.)


taglib 지시어

- JSP의 태그 확장 메커니즘인 커스텀 태그를 사용하기 위한 지시어

- taglib 지시어의 구문과 사용 형식

<%@ taglib ( uri="태그라이브러리경로"혹은tardir="태그파일경로" ) prefix="태그접두어" %>
  • uri: 태그 라이브러리 위치로 태그를 정의하고 있는 .tld 파일 경로
  • tagdir: 태그 파일로 태그를 구현한 경우 태그 파일 경로
  • prefix: 해당 태그를 구분해서 사용하기 위한 접두어

taglib 사용예시

 


++ 템플릿 데이터 ++

- JSP의 화면 구성요소를 의미

- 시작 부분의 page 지시어를 제외하면 JSP 파일의 전반적인 구조는 HTML의 문서 구조

- 일반적인 HTML 파일처럼 CSS, 자바스크립트도 사용 가능

- 기본적으로 HTML5를 사용하며 문서 구조 중심으로 간략하게 작성

- 데이터 표현은 JSTL과 EL을 사용

- 화면 디자인을 위해 자체적인 CSS 정의, Bootstrap과 같은 라이브러리를 사용

- REST API 호출을 위해 Axios 같은 자바스크립트 라이브러리 사용 가능

- 주의 : React, Vue와 같은 자바스크립트 요소는 프런트엔드 개발 기술로 JSP와 함께 사용하지 않음

 

++ 스크립트 요소 ++

- JSP는 HTML과 자바 코드를 섞어 사용 가능. 이때의 자바 코드가 스크립트

  • 선언태그 : <%! %>
  • 표현태그:<%= %>
  • 스크립트릿 태그<% %>

<%! %>

- 선언(Declaration) 태그

- JSP가 서블릿 코드로 변환될 때 _ jspService( ) 메서드 안에 들어가게 되므로

   JSP에서는 일반 자바 코드와 달리 멤버 변수나 메서드 선언은 기본적으로 불가능

- 권장하지 않음

 

<%= %>

- 표현(Expression) 태그

- 웹 브라우저를 통해 클라이언트에 전달될 자바 표현식

- out.println( )의 인자로 적합한 모든 자바 코드가 가능

- 사칙연산, 메서드 호출, 변숫값 출력 등에 사용

- EL로 대체 가능

 

<% %>

- 스크립트릿(Scriptlet) 태그

- 모든 자바 코드의 사용 가능

- 하지만, _ jspService( ) 메서드 내에 포함되는 것을 고려해야한다.

- 서블릿 코드로 변환될 때 모든 HTML은 out.write( ) 형태로 변환된다.

- HTML과 스크립트릿을 중간에 섞어 사용가능

- MVC 패턴 적용과 JSTL + EL로 대체 가능

 


JSP 파일 생성

 

Dynamic Web Project로 폴더 생성하면 되고, 

그 안에 src-main-webapp에 JSP파일을 생성하면 된다.

<%@ 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>

</body>
</html>

JSP파일을 생성하면, 이렇게 자동으로 코드가 나온다.


주석

<%@ 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>
	<h3>
		1. JSP 주석
		<!-- HTML 주석 : 화면에서는 안보이고, 소스 보기에서는 보인다. -->
		<%-- JSP 주석 : 화면과 소스 보기에서 보이지 않는다. --%>
	</h3>
</body>
</html>

마우스 오른쪽- 페이지 소스 보기

<%-- --%>로 생성한 주석은 안보인다.


선언과 참조

스크립트릿 : 일반 변수 선언 가능 (멤버변수와 함수 선언 불가능)

	<%!
		String[] members = {"김자바", "김제이", "김에스", "김피"};
		int num1 = 10;
		
		int calc(int num2) {
			return num1 + num2;
		}
	%>
	<h3>
		2. clac(10) 메서드 결과 : 
		<%= calc(10)%>
	</h3>
	<hr>

JSP파일 <body>태그 안의 코드

 


include 지시어

hello.jsp를 webapp폴더에 넣고 진행했다.

<h3>
	3. include : hello.jsp
</h3>
<%@ include file="hello.jsp" %>


스크립트릿

<body>
    <h3>
		4. 스크립트(배열 데이터 출력) 
	</h3>
	<ul>
		<%
			for (String name : members) {
		%>
			<li><%=name%></li>
		<%
			}
		%>
	</ul>
	<hr>
</body>

 

 

 

 

 

 

 

(출처 : 짧고 굵게 배우는 JSP 웹 프로그래밍과 스프링 프레임워크(황희정))

댓글