백엔드1-2. JSP-1: JSP기초와 예제(이클립스에서 웹 프로젝트 생성)

프로젝트 생성

NEW > Dynamic Web Project > Project name: webJSP > Finish -> webJSP 프로젝트 생성! > webapp에 index.jsp 생성!

웹 애플리케이션의 기본 디렉터리 구조

C:\Program Files\Apache Software Foundation\Tomcat 9.0\webapps\webJSP 경로 안에 WEB-INF 폴더가 있음

webapps	웹 애플리케이션의 루트 디렉터리, 다른 웹 애플리케이션 이름과 중복을 허용하지 않고, 여기에는 JSP HTML 파일이 저장된다.
WEB-INF	웹 애플리케이션에 관한 정보가 저장되는 곳으로 이 디렉터리는 외부에서 접근할 수 없다.
classes	웹 애플리케이션이 수행하는 서블릿과 다른 일반 클래스들이 위치하는 곳
Lib	웹 애플리케이션에서 사용되는 여러 라이브러리 압축 파일(jar 파일)이 저장되는 곳
Lib	DB연동 드라이버나 프레임워크 기능 관련 jar 파일이 여기에 저장된다.
web.xml	웹 애플리케이션에 대한 여러 가지 설정을 할 때 사용된다.

이클립스의 Project Explorer에 나오는 webJSP프로젝트에서의 구조와 동일하다.

JSP(Java Server Pages)

Java 언어를 기반으로 하는 Server Side 스크립트 언어로 HTML 코드에 Java코드를 넣어 동적인 웹 페이지를 생성하는 웹 애플리케이션 도구

JSP를 통해 정적인 HTML과 동적으로 생성된 contents(HTTP 요청 파라미터)를 혼합해 사용할 수 있다.(즉, 사용자가 입력한 contents에 맞게 동적인 웹 페이지를 생성한다.

<% 자바코드 %>로 둘러싸인 스크립트 영역이 있고, 실행 시에 javax.servlet.http.HttpServlet 클래스를 상속받은 Java 소스코드로 변환한 다음 컴파일되어 실행된다.!!!(JSP 파일을 Servelt 클래스로 변환하고 실행시켜주는 역할을 하는 프로그램을 서블릿 컨테이너라고 한다.)

JSP는 실행시에는 자바 서블릿으로 변환된 후 실행되기 때문에 서블릿과 거의 유사하다고 할 수 있다. 하지만 서블릿과 달리 HTML 표준에 따라 작성되기 때문에 웹 디자인하기에 편리하다.

JSP의 특징

Tomcat(WAS)이 이미 만들어놓은 객체(predefined values)를 사용한다. (내장 객체 request, response, session, out, application..)

Predefined Values(또는 Implicit Object) : 미리 정의된 객체(내장 객체)로, WAS가 제공하는 객체를 의미

request the HttpServletRequest Object(입출력 객체)

response the HttpServletResponse Object(입출력 객체)

session the HttpSession Object

out the PrintWriter Object(입출력 객체)

application the ServletContext Object

내장객체는 JSP 컨테이너에 의해 Servlet으로 변화될 때 자동으로 객체가 생성된다.

HTML 코드 안에 Java 코드가 있기 때문에 HTML 코드를 작성하기 쉽다.

Servlet과 다르게 JSP는 수정되는 경우 재배포할 필요 없이 Tomcat(WAS)이 알아서 처리해준다.

하나의 JSP 페이지가 하나의 Java 클래스이기 때문에 모든 Java 라이브러리를 끌어다 쓸 수 있다.

JSP 동작 원리

1. 클라이언트가 웹 브라우저로 요청(웹 브라우저 요청) http://localhost:9090/webJSP/index.jsp
2. JSP >> Servlet
JSP는 웹 어플리케이션 서버(WAS)의 서블릿 컨테이너에서 서블릿 원시 코드로 변환된다.
(index.jsp >> index_jsp.java)
3. Servlet >> class
변환된 서블릿 원시코드는 바로 컴파일된 후에
(index_jsp.java >> index_jsp.class)
4. 실행되어 결과를 HTML 형태로 클라이언트에 돌려준다. (웹브라우저 응답)

Servlet(Server Application Let)

Dynamic Web Page를 만들 때 사용되는 자바 기반의 웹 애플리케이션 프로그래밍 기술

즉, 자바 웹 서버로 웹 페이지를 제공할 때, 동적인 데이터를 제공하는 것을 도와준다.

JSP	Servlet
HTML 코드에 Java언어를 삽입해 동적 문서를 만들 수 있다.	Java언어를 이용해 문서를 작성하고 출력객체를 통해 HTML 코드를 삽입한다.

기본 문법

<%@ 지시부 %>	JSP 페이지의 전체적인 속성을 지정할 때 사용, import 구문
	.jsp 파일의 제일 상단
	page 지시자: 페이지의 전체적인 속성을 지정할 때 사용. 사용되는 언어와 import문을 많이 사용한다.
	include 지시자: 별도의 페이지를 현재 페이지에 삽입할 때 사용하고, file 속성을 이용
	taglib 지시자: 사용자가 만든 태그를 태그 라이브러리라고 한다.
<%! 선언부(declaration) %>	전역변수 선언 및 초기화, 객체 생성 및 인스턴스 초기화, 메서드 선언 및 정의
<%! 선언부(declaration) %>	JSP 페이지의 스크립트릿이나 표현식에서 사용할 수 있는 메서드를 작성할 때 사용
<% 스크립트릿(scriptlet) %>	코딩, 지역변수(변수 선언), 계산
<% 스크립트릿(scriptlet) %>	scriptlet은 jsp페이지에서 Java 코드를 넣기 위한 태그
<%=출력부(표현식 태그) %>	문자열, 변수값, 메서드리턴값 출력
	java의 변수 및 메서드의 반환값을 출력하는 태그
	결과값은 String이고, 세미콜론 사용 불가
<!-- -->, <%-- --%>	HTML 주석, JSP 주석(jsp 파일이 서블릿 파일로 변환될 때 제외된다.)
<jsp:action> </jsp:action>	자바빈 연결

index.jsp 파일 예제1)

<!-- 지시부 -->
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%!
	// 선언부
	String username="이아무개";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index.jsp</title>
<script>
	document.write("자바스크립트여기있어요!")
</script>
</head>
<body>
<h2>홈페이지</h2>
<%
	// jsp 코드(스크립릿)
	int num = 2000;
	String tel = "010-1234-5678";
%>
</body>
</html>

jsp코드가 있던 곳은 페이지소스로 볼 때 space가 존재하기 때문에 space를 없애기 위해 trimDirectiveWhitespaces를 지시부에 기술한다.

jsp는 서버에서 실행되고 데이터를 보내주는 역할이기 때문에 데이터를 클라이언트 측으로 보내기 위해서는 내장객체나 변수를 사용해서 보내줘야 한다.

<!-- 지시부 -->
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<%! 
	// 선언부
	String username="이아무개";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index.jsp</title>
<script>
	document.write("자바스크립트여기있어요!")
</script>
</head>
<body>
<h2>홈페이지</h2>
<%  
	int num = 2000;
	String tel = "010-1234-5678";
	
	// out 내장객체를 사용해서 데이터를 클라이언트에게
	out.println("이름: "+username+"님");
	out.println("<br/>번호: "+num);
	out.println("<br/>연락처: "+tel);

%> <!-- scriptlet 끝 -->
<hr/>
	<!-- html 부분에서 jsp 변수를 사용해서 데이터를 클라이언트에게 -->
	이름: <%=username %>님<br/>
	번호: <%=num %><br/>
	연락처: <%=tel %><br/>
</body>
</html>

trimDirectiveWhitespaces로 인해서 페이지소스에서 공백이 사라졌다.
out.println이나 out.print는 동일하다. 서버로보내지기 때문에 줄바꿈이 되지 않는다.

JSP의 out 내장객체를 사용해서 데이터를 클라이언트에게 보냈다.
HTML 부분에서 JSP 변수를 사용해서 데이터를 클라이언트에게 보냈다.

index.jsp 파일 예제2) 구구단 메서드를 선언부에 선언하고 body에서 데이터 출력

<!-- 지시부 -->
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<%! 
	// 선언부
	public String gugudan(int dan){
		String temp = "";
		for(int i=2; i<10; i+=1){
			temp += dan + "*" + i + "=" + (dan*i) + "<br/>";
		}
		return temp;
	}
%>
<!DOCTYPE html>
...
<body>
<%  
	out.println(gugudan(5));
%>
<hr/>
<%=gugudan(6) %>
</body>
</html>

<%
System.out.println(gugudan(2)); // 서버에서 실행되기 때문에 화면에 출력되지 않고, 콘솔에 출력된다.
%>

index.jsp 파일 예제3) import로 클래스 사용하기

<!-- import문이 여러개일 경우 "java.util.Calendar, java.util.Scanner"이렇게 ,(콤마)로 연결 -->
<%@page import="java.util.Calendar"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<!DOCTYPE html>
...
<body>
<%   // 내장함수 사용
	Calendar now = Calendar.getInstance(); // import는 지시부에
	out.println(now);
%>
<hr/>
<%=now %> <!--변수사용-->
</body>
</html>

index.jsp 파일 예제4) ul, li 태그를 사용해서 반복문 처리

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index.jsp</title>
</head>
<body>
<ul>
	<%
	for(int i=1; i<=10; i+=1){
	%>
		<li><%=i %></li><!-- out.print("<li>"+i+"</li>"는 되도록이면 사용 xx -->
	<% 
	}
	%>
</ul>
</body>
</html>

https://gmlwjd9405.github.io/2018/11/03/jsp.html

https://www.javatpoint.com/jsp-implicit-objects

https://gmlwjd9405.github.io/2018/10/28/servlet.html

https://velog.io/@turtle601/JSP%EB%9E%80

https://velog.io/@dnjstjq25/JSP-%EC%A0%95%EB%A6%AC-3%EC%9D%BC%EC%B0%A8-rwk68lbijh

저작자표시

'멀티캠퍼스 풀스택 과정 > 백엔드' 카테고리의 다른 글

백엔드1-6. JSP-5: JAVA와 DB의 연동(isErrorPage)-2 (0)	2022.03.04
백엔드1-5. JSP-4 : JAVA와 DB의 연동(emp테이블사용)-1 (0)	2022.03.03
백엔드1-4. JSP-3: 내장객체 request 사용해서 서버로 데이터 보내기 (0)	2022.03.03
백엔드1-3. JSP-2: 웹 배포하기 (0)	2022.03.03
백엔드1-1. WAS(Web Application Server)과 Web Server (0)	2022.03.02

소소하게 매일

백엔드1-2. JSP-1: JSP기초와 예제(이클립스에서 웹 프로젝트 생성)

프로젝트 생성

웹 애플리케이션의 기본 디렉터리 구조

JSP(Java Server Pages)

JSP의 특징

JSP 동작 원리

Servlet(Server Application Let)

기본 문법

'멀티캠퍼스 풀스택 과정 > 백엔드' 카테고리의 다른 글

티스토리툴바

Predefined Values(또는 Implicit Object) : 미리 정의된 객체(내장 객체)로, WAS가 제공하는 객체를 의미
request	the HttpServletRequest Object(입출력 객체)
response	the HttpServletResponse Object(입출력 객체)
session	the HttpSession Object
out	the PrintWriter Object(입출력 객체)
application	the ServletContext Object

백엔드1-2. JSP-1: JSP기초와 예제(이클립스에서 웹 프로젝트 생성)

프로젝트 생성

웹 애플리케이션의 기본 디렉터리 구조

JSP(Java Server Pages)

JSP의 특징

JSP 동작 원리

Servlet(Server Application Let)

기본 문법

'멀티캠퍼스 풀스택 과정 > 백엔드' 카테고리의 다른 글

관련글

티스토리툴바