[JSP] 1 - JSP 페이지 구성 요소(Directive, Script)

[jsp01 day25]

 

1. 세팅

1) 준비물 : JDK11, 톰캣 9, 이클립스, DBMS, 구글 크롬

-jdk 환경변수 꼭 설정

 

2) 톰캣 다운 / 설치

https://tomcat.apache.org/download-90.cgi

tomcat 9 > core > zip 다운받기

작업폴더로 옮기고 그곳에서 압출해제

 

3) 이클립스 ( 자바수업내용과 겹치지 않게 새로 압축해제해서 사용)

jsp 작업 폴더 안에 새로 압축해제

#1. 실행 : workspace 폴더 경로 잡아서 런치

#2. 모드 Java EE (실행하면 default 세팅이라 건들필요 x

#3 인코딩 세팅 : UTF- 8

window > preference > 검색 : encoding 

> 검색된 모든메뉴 UTF-8로 변경

 

* 인코딩 : encoding,charset 문자 체계

UTF-8 : 유니코드

IOS-8859-1

KSC5607

MS949(default) / CP949 : MS사

EUC-KR : ANSI를 한국에서 확장한 버전

ANSI : ASCII. 아스키코드 (1바이트)

 

4) 이크립스에 톰캣 세팅

하단에 Servers 탭 > 파란색 링크 혹은 비곤에 마우스 우클릭 > new> server >

>Apache 폴더 > 톱캣 9.0 선택 > browse눌러서 톱캣 압축해제한곳 경로선택 >

> bin 폴더 보일때까지만 들어가기 

 

* servers 탭안에 Tomcat... 생기고, 왼쪽 Project Explorer에 Servers 폴더 생기면 됨.

 

5) 이클립스에 웹 프로젝트 생성

File > New > Dynamic Web Project

>Project Name : 프로젝트명 작성 Next! > Next!

> 체크박스 체크하고 Finish!

 

6) 웹프로젝트의 구조

웹 서버가 준비된 상태에서 아래와 같은 폴더 구조를 갖춰야한다.

 

[폴더명] : 프로젝트명(Context path, 루트 컨텍스트)

-[ WEB - INF ]

- [ lib] : 외부 라이브러리 배치

- [ classes] : 자바 컴파일된 클래스 파일 (이클립스에선 안보임)

- web.xml : 웹 전반적인 설정 파일

-[ META - INF] : 자바 패키징 기술인 jar의 일부, 설정관련

- jsp/html/css/이미지...

 

2. 웹과 jsp

1) 인터넷과 웹

인터넷 : 컴퓨터가 서로 연결되어 TCP/IP라는 통신 프로토콜을 이용하여

정보를 주고받는 전세계의 컴퓨터 네트워크

 

웹 : 인터넷의 서비스 중 하나로, 인터넷에 연결된 컴퓨터들을 통해 정보 공유하는 공간.

world wide web 줄인말

 

2) 웹 동작원리

클라이언트/ 서버 방식으로 동작

클라이언트 : 사용자 (요청자), 웹 브라우저

웹 서버 : 서비스 제공자 

 

동작 방식 : 

클라이언트 ---- 웹 페이지 요청(request)----> 웹 서버

(브라우저)<------결과물로 응답(reponse)-----(ex. tomcat)

 

3) 정적웹페이지 / 동적 웹페이지

정적 웹페이지 : static : 저장된 텍스트 파일 그대로 보는것

html 같은 웹 언어로 작성

사용자가 web 브라우저에 url 입력요청

-> 이미 준비된 문서 그대로 보내줌

초기 웹페이지, 변화 적응 x, 추가/수정/삭제 수동으로

 

 

동적 웹페이지 : dynamic : 저장된 내용을 가공처리해서 보는것

PHP, ASP, JSP 같은 웹 언어로 작성

사용자가 web브라우저에 URL입력 요청

-> 분석,처리 -> 가공된 HTML 파일 생성 보내줌

현재 우리가 보는 페이지 대부분, 데이터 저장 DB

 

 

4) 웹 주소

URL : http://서버ip:port/File경로~~(uri)

 

내가 제공하는 웹사이트를 내가 요청하겠다.

http://  192.168.1.85:8080/ 파일경로

http:// 127.0.0.1:8080/ 파일경로  

http://localhost:8080 ( 우리가 사용할 버전)

 

IP : IP Address 네트워크상 PC 고유 주소

 

port : IP 주소로는 컴퓨터 구분을 할 수 있지만, 어떤 서비스 프로그램을 실행할지 알 수 없어서,

클라이언트가 연결할때 다른 서버 프로그램과 구분할 수 있도록 port 번호를 사용함.

내 pc에서 현재 사용중인 port 번호 확인

: cmd > netstat -a

톰캣 기본세팅 포트 번호 : 8080

 

도메인 cmd > nslookup naver.com

https://naver.com/main/read.nhn?a=10

DNS : Domain Name Service

-> DNS에 IP주소 요청 -> 응답받은 ip주소로 웹서버에 서비스 요청

-> 서버가 요청 주소 분석/처리해 요청한 내용을 응답 -> 브라우저

 

5) 웹 프로그래밍과 JSP

웹 프로그래밍 : 웹 서버가 웹 브라우저에 응답으로 전송할 데이터를 

생성해주는 프로그램을 작성하는 것

웹 프로그래밍 언어 : 클라이언트 측 실행 언어와 서버측 실행언어로 구분 

JSP(JavaServer Pages) : 자바를 기반으로 하는 서버측 웹 프로그래밍 언어.

HTML코드에 자바를 삽입 할 수 있도록 개발된 기술

(이전에는 Servlet이라는 기술로 사용하였으나 어렵고 불편)

실제로 웹 어플리케이션 서버에서 서비스 될때는 서블릿으로 변환됨

 

-JSP는 서블릿 기술의 확장

-JSP는 유지 관리 용이

-빠른 개발 가능

 

6) 웹 서버, 웹 컨테이너, 웹 어플리케이션 서버

#1. 웹 서버

HTTP 프로토콜을 이용하여 클라이언트 요청을 받아

HTML이나 오브젝트를 전송.

웹 서버만 구축된 서버는 웹페이지, 이미지등 "정적페이지"생성

아파치, IIS등 서버

 

#2. 웹 컨테이너 

JSP와 서블릿을 실행할 수 있는 프로그램으로

서블릿 컨테이너라고도 함.

웹 서버에서 JSP를 요청하면 컨테이너가 JSP파일을

서블릿으로 변환하여 컴파일을 수행, 서블릿 수행 결과를 웹 서버에 다시 전달.

 

 

#3. 웹 어플리케이션 서버 (Web Application Server : WAS)

웹 서버와 웹 컨테이너를 결합한 서버

JSP 컨테이너가 탑재된 WAS는 JSP페이지를 컴파일하여 "동적페이지" 생성함.

톰캣, BEA의 웹 로직 등..

 

3. JSP 페이지 구성 요소

디렉티브 (Directive)

스크립트 

표현언어 (EL Expression Language

내장객체 (Implicit Object)

정적인 데이터 (일반 텍스트)

표준 액션 태그 (Action tag)

커스텀 태그 (Custom tag)와 표준 태그 라이브러리(JSTL)

 

 

4.  디렉티브 태그

page : JSP 페이지에 대한 정보 설정

include : JSP 페이지의 특정 영역에 다른 문서를 포함

taglib : JSP 페이지에서 사용할 태그 라이브러리 설정

 

<%@ 디렉티브태그명 속성명 = "값" 속성명 = "값" ...%>

 

1) page

JSP 페이지 설정 정보 지정

문서 타입, 출력버퍼 크기, 에러페이지등 지정

페이지 최 상단에 선언 권장

 

[ 속성들 ]

language

contentType

pageEncoding : UTF-8 

import : 자바 임포트랑 같은 %>안에 넣어주면됨

session : true (default이므로 생략가능)/fault 로그인처리할때 

buffer : 버퍼사이즈 (8kb가 default)

autoFlush : true 디폴트  / 버퍼가 꽉차면 화면으로 알아서 뿌려줌, 

false로 하면 화면꽉찰때 에러남

isThreadSafe : true 여러사람이 와도 되는가?

info : 페이지 설명글 메모할것 (쓸일 거의없음)

errorPage : 에러페이지 errorpage = "error.jsp" (error라는 페이지를 띄움)

isErrorPage : false 디폴트 / 이 페이지가 에러전용 페이지냐 ?

isELignored : false 디폴트 / 

defrerredSyntaxAllowedAsLiteral  : false 디폴트 

 

2) include 태그

외부 파일의 내용을 포함 : 복붙 개념. 붙혀와서 서블릿으로 한번에 번역. 

헤더,푸터등 공통된 부분을 별도의 jsp파일로 만들어 모듈화 할때 유용한 태그

-> 코드 유지보스, 재사용 가능성 향상

<%@ include 속성 = "값"...%>

file="파일경로"

같은 폴더안에 있으면 파일명만, 그렇지 않으면 전체 URL 설정

주의!!! 현재파일과 include 하는 파일의 인코딩 설정이 동일해야함!!

 

3) taglib 태그

표현언어, JSTL, 사용자정의 태그등 외부 태그 라이브러리를 설정하는 태그

 

<%@ taglib prefix="태그식별자" uri="태그라이브러리경로" %>

 

 

 

<%@ 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> <!-- 4. 디렉티브 설명 -->
	<h1> test01</h1>
	서버 : <%= application.getServerInfo() %> <br />
	서벌릿 : <%= application.getMajorVersion() %>.<%= application.getMinorVersion()	%> <br/>
	JSP : <%=JspFactory.getDefaultFactory() .getEngineInfo(). getSpecificationVersion() %>	

</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
    <%@ include file="test03.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test02</title>
</head>
<body> <!-- 4. 디렉티브 설명 -->

		<h2>==================================================	</h2>
		<h1>	Test02 page</h1>
		<h2>==================================================	</h2>
		 <%@ include file="test03.jsp" %>
		 <%@ include file="test03.jsp" %>
</body>

</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test03</title>
</head>
<body> <!-- 4. 디렉티브 설명 -->
<h2>**********************************	</h2>
<h1>Test03 page</h1>
<h2>**********************************	</h2>
</body>
</html>

 

 

5. 스크립트

: HTML 코드에 자바코드를 넣어 프로그램이 수행하는 기능 구현

서블릿 클래스로 변환할때, JSP 컨테이너가 자바 코드가 삽입되어 있는

스크립트 태그로 처리하고 나머지는 HTML코드나 일반 텍스트로 간주함.

 

선언부 : <%!   %> : 클래스 영역 : 사용 거의 안함

스크립트릿 : <% %> : 메서드 영역 : 가장 많이 사용. 변수선언 -> 지역변수 자바 실행 코드

출력문 : <%= %> : 값을 출력   : HTML코드와 섞어서 사용가능

 

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

 <!-- 6 스크립스설명 -->
<h1> test04 page </h1>
<%-- #1. 선언부 --%>
<%! 
	//선언부 : 클래스영역
	//클래스변수, 인스턴스 변수, 메서드
	static int num = 10;
	int num2 = 200;
	public int mul(int a, int b){
		return a * b;
	}
	
%>
<%-- #2. 출력문 : 세미콜론 안적음. 변수명, 리턴있는 메서드 호출하면 값화면에 출력 --%>
<%= num %> <br/>
<%= num2 %><br/>
10*20 = <%= mul(10,20) %>

<!-- 스크립트릿 -->
<% // 스크립트릿 : 메서드 영역
	for(int i = 0; i < num ; i++){
		out.print("java server pages" + i + "<br/>");
	}
	String col = "yellow";
	

%>
<body bgcolor="<%=col%>">
</body>

<ul>
<% for(int i = 0 ; i < 10; i++){ %>  


<li>hello jsp</li>
<%} %>
</ul>