Chap 11 JSP 정의와 구성 요소

11.1 JSP 등장 배경

390p

초기 웹 프로그램 - 서블릿을 이용해서 구현

서블릿의 응답 기능을 이용함. 자바 코드를 이용해 HTML 태그를 브라우저로 전송하는 방식

-> 인터넷 사용자가 폭증, 화면의 기능이나 구성이 복잡해짐... 사용자를 고려하는 화면 요구 사항이 점점 증가함

디자이너가 화면 구현을 담당하게 됨,

서블릿 기능 중 별도로 화면 기능을 디자이너가 작업하기 쉽게 하기위해 JSP가 등장함

 

- 서블릿으로 화면 구현 시 문제점

기존 서블릿 = 비즈니스 로직 기능 + 화면 기능

자바 코드를 기반으로 문자열을 사용해 html과 자바스크립트로 화면을 구현했음

-> 화면 기능이 복잡해지며 화면을 나타내는 코드도 복잡해지며 두 기능을 분리!

=>  JSP : HTML, CSS와 자바스크립트를 기반으로 JSP 요소들을 사용해 화면을 구현함

화면의 기능 구현이 수월해짐, 개발 후 화면의 유지 관리가 편리해짐

 

- JSP의 구성요소

JSP는 html과 자바스크립트를 기반으로 jsp에서 제공하는 여러 가지 구성 요소들을 사용해 화면을 구현하는 기술.

주로 웹 프로그램의 화면기능과 모델2 기반 MVC에서 뷰(View) 기능을 담당함

 

HTML 태그, CSS, 자바스크립트 코드

JSP 기본 태그

JSP 액션 태그

개발자가 직접 만들거나 프레임워크에서 제공하는 커스텀 태그

 

11.2 JSP의 3단계 작업 과정

394p

서블릿에서는 println() 등의 자바코드를 사용해 html 태그를 브라우저로 전송해주면 브라우저가 받아서 실시간으로 구현함

JSP는 여러 구성요소들이 있다보니 JSP 파일 자체를 브라우저로 전송하면 브라우저는 JSP 요소들을 인식하지 못함

=> JSP는 톰캣 컨테이너에 의해 브라우저로 전송되기 전에 실행 단계를 거쳐야함

 

- 톰캣 컨테이너에서 JSP 변환 과정

1. 변환 단계(Tranlation Step) : 컨테이너 - JSP 파일을 자바 파일로 변환함

2. 컴파일 단계(Compile Step) : 컨테이너 - 변환된 자바(java) 파일을 클래스(class) 파일로 컴파일함

3. 실행 단계(Interpret Step) : 컨테이너 - class 파일을 실행하여 그 결과(html, css, js 코드)를 브라우저로 전송해 출력함

 

브라우저에서 jsp 파일 요청 -> 톰캣 컨테이너 - 요청된 jsp 파일을 자바 파일(.java)로 변환 후 클래스 파일(.class)로 컴파일함, 이 클래스 파일을 실행하여 브라우저로 결과값을 전송하면 jsp가 브라우저 화면에 표시됨

즉, 브라우저로 전송되는 결과는 jtml, css, js로 변환된 파일임

 

- 이클립스에서 JSP 변환 과정 실습

1. 이클립스에서 새 프로젝트 pro11 만들고 WebContent 폴더 우클릭>New>JSP File 선택

* 반드시 Build Path-Libraries에 servlet-api.jar가 등록되어 있어야 함

2. 파일 이름으로 hello.jsp 입력, Finish

3. 간단한 html 태그와 텍스트 작성

4. 톰캣 컨테이너에 프로젝트 추가, 톰캣 실행, 브라우저에서 html 파일을 요청하듯 jsp 파일을 요청함

( http://localhost:8090/pro11/hello.jsp )

 => 톰캣 컨테이너 - 요청받은 jsp 파일 > java 파일로 변환 > class 파일로 컴파일 > 실행해서 결과를 브라우저로 전송해 출력함

이클립스의 경우 workspace 아래(/org/apache/jsp)에 자바 파일, 클래스 파일 생성된 것 볼 수 있음

자바 파일을 vs code나 편집기로 열어보면 서블릿의 여러 기능으로 변환되어 jsp 파일의 html 태그를 브라우저로 전송해주는 것 알 수 있음. 서블릿처럼 일일이 html 태그 만들어서 println() 으로 전송할 필요 없이 JSP는 요청시 컨테이너에서 자동으로 html 태그와 자바스크립트를 브라우저로 전송해줌

 

11.3 JSP 페이지 구성 요소

398p

여러 jsp 구성 요소들의 기능에 대해 알아보자

- jsp 페이지에서 사용되는 여러 구성요소들 :

디렉티브 태그(Directive Tag)......11.4에서

스크립트 요소(Scripting Element) : 주석문, 스크립트릿(Scriptlet), 표현식, 선언식........12장에서

표현 언어(Expression Language)........14장에서

내장 객체(내장 변수)........12.7에서

액션 태그(Action Tag)........13장에서

커스텀 태그(Custom Tag)........14.4에서

 

이 중 디렉티브 태그와 스크립트 요소는 jsp가 처음 나왔을 때 많이 사용했던 기능이고 그 외 요소들은 jsp에서 추가한 기능들임   

 

11.4 디렉티브 태그

399p

디렉티브 태그는 주로 jsp 페이지에 대한 전반적인 설정 정보를 지정할 때 사용하는 태그임

-디렉티브 태그의 종류

페이지 디렉티브 태그(Page Directive Tag) : JSP 페이지의 전반적인 정보를 설정할 때 사용함

인클루드 디렉티브 태그(Include Directive Tag) : 공통으로 사용하는 JSP 페이지를 다른 JSP 페이지에 추가할 때 사용함

태그라이브 디렉티브 태그(Taglib Directive Tag) : 개발자나 프레임워크에서 제공하는 태그를 사용할 때 씀 (547p 14.6)

 

- 페이지 디렉티브 태그 정의와 사용법

▼디렉티브 태그에 설정하는 여러 가지 JSP 속성

속성	기본값	설명
info	없음	페이지를 설명해주는 문자열을 지정함
language	"java"	jsp 페이지에서 사용할 언어를 지정함
contentType	"text/html"	jsp 페이지 출력 양식을 지정함
import	없음	jsp 페이지에서 다른 패키지의 클래스를 임포트할 때 지정함
session	"true"	jsp 페이지에서 HttpSession 객체의 사용 여부를 지정함
buffer	"8kb"	jsp 페이지 출력 시 사용할 버퍼 크기를 지정함
autoFlush	"true"	jsp 페이지의 내용이 출력되기 전 버퍼가 다 채워질 경우 동작을 지정함
errorPage	"false"	jsp 페이지 처리 도중 예외가 발생할 경우 예외 처리 담당 jsp 페이지를 지정함
isErrorPage	"false"	현재 jsp 페이지가 예외 처리 담당 jsp 페이지인지를 지정함
pageEncoding	"ISO-8859-1"	jsp 페이지에서 사용하는 문자열 인코딩을 지정함
isELIgnored	"true"	jsp 2.0 버전에서 추가된 기능으로, EL 사용 유무를 지정함

페이지 디렉티브 형식은 <%@page   %> 안에 속성과 값을 나열하면 됨

예) <%@ page 속성1="값1"  속성2="값2" ... %>

 

이클립스에서 jsp 페이지를 만들면 자동으로 페이지 디렉티브 태그가 생성됨

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

 

* import 속성을 제외한 다른 속성은 한번만 선언해야 함

* 대소문자 구분 주의

 

import 속성은 자바 import문으로 변환되어 추가됨

info 속성은 getServletInfo() 메서드에서 return문으로 서블릿 정보 반환함

contentType 속성은 response.setContentType의 인자("text/html;charset=utf-8")로 변환됨 

 

- 인클루드 디렉티브 태그 정의와 사용법

제목이나 로고가 들어가는 화면 상단, 왼쪽의 메뉴 등은 페이지가 바뀌어도 일정하게 유지되는 경우가 많음

이런 공통 화면을 일일이 jsp 페이지마다 만드는 것은 불편

-> 공통으로 사용되는 JSP 페이지를 미리 만들어놓고 다른 jsp 페이지 요청시 인클루드 디렉티브 태그를 사용

 

인클루드 디렉티브 태그

: 여러 jsp 페이지에서 사용되는 공통 jsp 페이지를 만든 후 다른 jsp 페이지에서 공통 jsp 페이지를 포함시켜 사용하는 기능

재사용성이 높고 jsp 페이지의 유지관리가 쉽다는 장점.

 

-형식 

<%@ include file="공통기능.jsp"  %>

 

- 인클루드 디렉티브 태그 이용해 다른 jsp 파일의 이미지를 삽입하기

1. image 폴더를 생성함 (WebContent 폴더 우클릭>New>Folder> 'image' 입력 후 Finish)

2. 사용할 이미지를 복사한 후 image 폴더에 붙여넣음(duke.png)

3. 인클루드 디렉티브 태그를 이용해 두 개의 jsp 파일을 작성함

 

[ duke_image.jsp ] : 이미지를 화면에 표시하는 기능

...

<body>

  <img src="./image/duke.png" /> // image 폴더의 duke.png를 표시함

</body>

 

[ include.jsp ] : 인클루드 디렉티브 태그를 이용해 duke_image.jsp를 삽입하는 기능

...

<body>

  <h1>안녕하세요 쇼핑몰 중심 jsp 시작입니다</h1><br>

  <%@ inclue file="duke_image.jsp"  %><br>

  <h1>안녕하세요 쇼핑몰 중심 jsp 시작입니다</h1>

<body>

 

=> 브라우저에서 include.jsp 요청하면 duke_image.jsp가 중간에 포함되어 표시되는 것 확인

 

* 절대경로 : 루트디렉터리를 기준으로 경유한 경로를 모두 기입함

 예) C:\Users\username\Desktop\filename.txt

* 상대경로 : 루트디렉터리가 아닌, 특정 경로를 기준으로 경로를 표시

 예) . / 디렉터리 / 파일명 : 현재 디렉터리가 어디든 관계없이 해당 파일이 위치한 경로를 나타냄

 

include.jsp --(duke_image.jsp의 코드를 include.jsp에 포함시킴)--> include_jsp.java(duke_image.jsp의 자바코드를 포함함) ---(자바 코드를 서블릿 클래스로 변환)----> include_jsp.class(html 태그로 변환됨)

: 인클루드 디렉티브 태그를 이용해 jsp 태이지를 요청하면 요청하는 jsp 페이지에 대해 실행하는 자바파일은 단 1개만 생성됨(요청하는 jsp 파일에 합쳐져서(포함돼서) 자바파일로 변환됨)