JSP 웹프로그래밍 57일차 (25/2/6)

프로그래밍/JSP

JSP 웹프로그래밍 57일차 (25/2/6)

wkun 2025. 2. 6. 17:58

contents

PART01 JSP 기초 지식

chapter01

02.JSP 개발환경구축

3.JSP 애플리케이션 만들고 실행하기

03.북마켓(Book Market) 프로젝트 생성하기

<MVC패턴 설정>

<JSP 정리>

PART 02 JSP 기본문법

chapter 02 스크립트 태그: 시작 페이지 만들기

01.스크립트 태그의 개요

02.선언문 태그

------------------------------------------

chapter01

02.JSP 개발환경구축

3.JSP 애플리케이션 만들고 실행하기

-JSP 애플리케이션은 이클립스를 이용하여 프로젝트를 생성한 후 여기에 JSP 페이지를 작성하여 프로젝트를 실행하는 단계로 <프로젝트 생성하기> -> <JSP 페이지 작성하기> -> <프로젝트 실행하기>과 같은 과정을 거쳐 개발됨

-애플리케이션을 개발할 때 생성되는 프로젝트는 다음과 같은 구조로 되어 있음

[src]-[main]-[webapp]-[WEB-INF]-[classes]-[class파일]

-[JSP파일] -[lib]: jar 같은 라이브러리 파일(외부클래스 파일)

-[web.xml]: 사용설명서(동작지침서)

-[정적 리소스(html, 이미지, css...)]

-여기서 webapp은 웹 어플리케이션의 기본 또는 루트 폴더(web application root directory)임. 일반적으로 이 폴더에 JSP 파일을 작성하고 웹 브라우저를 통해 이 파일에 직접 접근할 수 있음. 예를 들어 웹 어플리케이션의 프로젝트 이름이 JSPBook이고 webapp 폴더에 hellow.jsp를 작성했다면 웹 브라우저에서 http://localhost.8080/JSPBook/hello.jsp로 접근하는 것임. 또는 webapp 하위에 jsp 폴더를 생성하고 여기에 hello.jsp를 작성하면 http://localhost:8080/JSPBook/hello.jsp로 접근할 수 있음. JSP 파일이나 정적 리소스 파일도 보안을 위해 WEB-INF 폴더에 배치할 수 있음

*서버 127.0.0.1:8080

= localhost

요청 URL 서버프로젝트명 wapapp만 배포

http://localhost:8080 / test /hello.jsp

1-6.프로젝트 만들고 실행하기

[프로젝트 생성하기]

1)동적 웹 프로젝트 생성하기

-이클립스의 [File]-[New]-[Dynamic Web Project]를 선택

2)프로젝트 이름 설정하기

-[New Dynamic Web Project] 창에서 프로젝트 이름에 'JSPBook'을 입력하고, Target runtime이 'Apache Tomcat v.10.0'로 되어 있는지 확인한 후 [Finish]를 클릭

3)프로젝트 구성 설정하기
-JSPBook 프로젝트에서 마우스 오른쪽 버튼을 누르고 [Properties]를 선택함. [Properties for JSPBook] 창에서 [Project Facets] 항목을 선택하고 Dynamic Web Module의 버전을 5.0으로 변경한 후 [Apply and Close]를 클릭함

*체크 확인

Project Facet:

1.Dynamic Web Module 5.0 [ √ ]

2.java 17 [ √ ]

Runtimes:

3.Apache Tomcat v10.0 [ √ ]

[JSP 페이지 작성하기]

4)JSP 파일 생성하기

-JSPBook 프로젝트에서 마우스 오른쪽 버튼을 [New]-[File]을 선택함. [New File] 창에서 현재 경로 JSPBook/src/mainwebapp를 확인하고 파일 이름에 'hell.jsp'를 입력한 후 [finish]를 클릭함

5)JSP 페이지 코드 작성하기

-생성된 hello.jsp 파일에 코드 작성하여 저장함

[프로젝트 실행하기]

6)톰캣 서버에 등록하기

-제대로 구현되었는지 실행해봄. JSPBook 프로젝트를 실행하려면 톰캣 서버도 실행해야 함. 이클립스의 아래쪽 창에서 [Servers] 탭을 선택함. Tomcat v.10.0 Server at locallhost 하위에 JSPBook 항목을 추가함. [Run As] 버튼을 클릭하여 서버를 실행

7)실행 결과 확인하기

-서버가 성공적으로 실행되면 JSPBook 프로젝트를 선택하고 이클립스의 실행 버튼을 클릭하여 [Run As]-[Run on Server]를 선택함. 웹 브라우저에 'http://localhost:8080/JSPBook/hello.jsp'를 입력하여 실행 결과를 확인함

◎프로젝트를 실행하는 다른 방법

-프로젝트 실행시 해당 JSP 파일(hello.jsp)을 열어놓고 이클립스의 실행 버튼을 클릭하여 [Run As]-[Run on Server]를 선택하면 웹 브라우저의 주소 창에 'http://localhost:8080/JSPBook/hello.jsp'를 직접 입력하지 않아도 웹브라우저에서 실행 결과를 확인할 수 있음. 또한 실행 결과를 확인하는 브라우저는 이클립스의 [window]-[Web Browser] 메뉴를 이용하여 변경할 수 있음

1.Internal Web Browser: 이클립스 내부의 웹 브라우저

2.Default system web browser: 시스템의 기본 웹 브라우저

3.Internet Explorer: 인터넷 익스플로어

4.Chrome: 크롬

03.북마켓(Book Market) 프로젝트 생성하기

[프로젝트 생성하기]

1)동적 웹 프로젝트 생성하기

-이클립스의 [File]-[New]-[Dynamic Web Project]를 선택함

2)프로젝트 이름 설정하기

-[New Dynamic Web Project] 창에서 프로젝트 이름에 'BookMarket'을 입력하고, Target runtime이 'Apache Tomcat v.10.0'으로 되어 있는지 확인한 후 [Finish]를 클릭함

[JSP 페이지 작성하기]

3)JSP 파일 생성하기-BookMarket 프로젝트에서 마우스 오른쪽 버튼은 누르고 [New]-[File]을 선택함. [Create New File] 창에서 현재 경로 BookMarket/src/main/webapp을 확인하고 파일 이름에 'welcome.jsp'를 입력한 후 [Finish]를 클릭함 4)JSP 페이지 코드 작성하기-생성된 welcome.jsp 파일에 다음과 같이 저장함

BookMarket/src/main/webapp.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>Welcome to Book Shopping Mall</h1>
<h3>Welcome to web Market!</h3>
</body>
</html>

[프로젝트 실행하기]

5)톰캣 서버에 등록하기

-이클립스의 아래쪽 창 [Servers] 탭에 있는 Tomcat v10.0 Server at localhost에서 마우스 오른쪽 버튼을 누르고 [Add and Remove]를 선택함. 다음 창에서 BookMarket 프로젝트를 선택하고 [Add]를 클릭(또는 더블클릭)하여 오른쪽에 추가한 후 [Finish]를 클릭하여 Tomcat v10.0 Server at localhost 하위에 BookMarket 항목을 추가함

6)실행 결과 확인하기

-서버가 성공적으로 실행되면 welcome.jsp를 열어놓고 이클립스의 실행 버튼을 클릭하여 [Run As]-[Run on Server]를 선택함

<MVC패턴 설정>

1.index.html에 코드 삽입

1)[Dynamic Web Project] 만들기

2)[src]-[main]-[webapp] 폴더에 index.html 만들어 <a>태그 안에 요청명 넣기: <a href="ch02_1"></a>

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style>
body{
padding-left: 30%;
}
</style>
</head>
<body>
<h1>실습리스트</h1>
<h3>챕터2</h3>
<p><a href="ch02_1">실습 2-1</a></p>
</body>
</html>

실행 결과

2.class 매핑하여 연결하기

1)프로젝트 안 [Java Resources]-[src/main/java]에 [controller] 패키지 만들기

2)패키지 안에 class 만들기: 클래스이름: ch02_1_controller

3)클래스 매핑하기: class이름 위에 매핑코드 @WebSevlet("/ch02_1") 입력하기 -> HttpServlet 상속하기

4)클래스안에서 doGet, doPost 메서드를 오버라이딩하기 -> doGet메서드에 System.out.println("연결되었음"); 코드삽입하기 -> index.html에서 Run As > Run in Server 실행하여 콘솔에 연결되었음이 표시되는지 확인하기

3.doGet메서드 안에 뷰이동 코드작성하기: "ch02/declaration01.jsp"는 이동할 뷰의 위치와 파일명

RequestDispatcher dispatcher = req.getRequestDispatcher("ch02/declaration01.jsp");
dispatcher.forward(req, resp);

ch02_controller.java

package controller;

import java.io.IOException;

import jakarta.servlet.RequestDispatcher;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

@WebServlet("/ch02_1") //프로그램 시작 전에 미리 인스턴스 객체 생성
public class ch02_controller extends HttpServlet{ //자바연결 코드: @WebServlet HttpServlet

@Override//<a>태그는 get 방식: HTML <form>
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("연결되었습니다");
}

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//전처리: 전달받은 데이터를 가공하는 단계

//모델이동: 모델이동 생략

//뷰이동
RequestDispatcher dispatcher = req.getRequestDispatcher("ch02/declaration01.jsp");
dispatcher.forward(req, resp);
}

}

실행 결과

4.[webapp] 파일에 폴더(ch02) 만들어 jsp를 생성하기

declaration01.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Scripting Tag</title>
</head>
<body>
<%! int data = 50; //전역변수%>
<%
out.println("value of the variable is:" + data); //HTML에 출력(문자열)
%>
</body>
</html>

실행 결과

<JSP 정리>

Chapter	수행과제	절차	항목	내용
1장 개발환경구축	JDK설치	Step1	오라클 사이트에 접속하기	www.oracle.com/kr/java
		Step2	개발 키트 선택하기	17버전
		Step3	자바 설치하기	설치 클릭
		Step4	자바 설치 위치 확인	C:\programFile\java
	환경변수설정	Step1	대화상자열기	찾기>"환경변수" 검색
		Step2	환경변수 창열기	환경변수(N)클릭
		Step3	환경변수 설정하기	Path변수의 제일끝에 자바의 경로(bin포함)을 추가
		Step4	환경변수 확인하기	cmd > java -version > 실행확인
	아파치톰캣 설치	Step1	아파치사이트 접속하기	tomcat.apache.org > download 10 > Archives 클릭 > v.10.0.26/ 클릭 >bin/ 클릭 > apache-tomcat-10.0.26-windows-x64.zip 다운로드
	아파치톰캣 설치	Step2	아파치 설치하기	압축해제 > 폴더를 C:\ 이동
	이클립스 설치	Step1	이클립스 사이트접속하기	www.eclipse.org/download/ > download 클릭 후 다운로드
		Step2	이클립스 설치하기	Eclipse IDE for Java and Web Developers을 선택하여 설치
		Step3	워크스페이스 지정하기	D:\자신의 이름\JSP 폴더를 지정
	이클립스&아파치톰캣 연동하기	Step1	서버프로젝트 생성	이클립스에서 File > new > Other > server 검색 후 선택
	이클립스&아파치톰캣 연동하기	Step2	서버 버전 선택	Tomcat 10.0을 선택 후 C:\에 위치한 아파치 톰캣의 폴더를 선택
	프로젝트 생성	Step1	Dynamic Web project 프로젝트 생성	File > New > Dynamic Web project을 선택 or Other 선택 후 검색 프로젝트 이름 할당
	프로젝트 속성	Step1	프로젝트 설정 창 열기	프로젝트이름 마우스오른쪽 > properties 선택
		Step2	프로젝트 설정 항목 선택하기	Project Facets 선택
		Step3	Dynamic Web Module 선택하기	아래의 스크린샷 참고
		Step4	Java 버전 선택하기	아래의 스크린샷 참고
		Step5	아파치톰캣 선택하기	아래의 스크린샷 참고
부록	MVC패턴설정	Step1	index.html에 코드 삽입	<a href="ch02_1">실습1</a>: ch02_1은 요청명이므로 제일 중요 예상 요청 URL: localhost:8080/JSPBook/ch02_1
		Step2	class 생성	클래스이름: ch02_1_controller 주의: 실습마다 컨트롤러가 필요하므로 요청명을 앞에 이름으로 중복되지 않게 사용
		Step3	클래스 매핑	@WebSevlet("/ch02_1") 요청명과 클래스가 매핑되도록 클래스이름 위에 코드를 삽입
		Step4	오버라이딩	클래스안에서 doGet, doPost 메서드를 오버라이딩
		Step5	중간점검	doGet메서드에 System.out.println("연결되었음"); 코드삽입 index.html에서 Run As > Run in Server 실행 <a> 태그를 클릭 콘솔에 연결되었음이 표시되는지 확인 표시된다면 정상적인 코드 생성
		Step6	뷰이동 코드	doGet메서드 안에 다음의 코드를 입력하여 뷰로 이동하도록 코드작성 RequestDispatcher dispatcher = req.getRequestDispatcher("ch02/declaration01.jsp"); dispatcher.forward(req, resp); "ch02/declaration01.jsp"는 이동할 뷰의 위치와 파일명
			실습시작	책에 있는 예제를 ch02폴더에 declaration01.jsp를 생성하여 예제 코드를 실습

PART 02 JSP 기본문법

chapter 02 스크립트 태그: 시작 페이지 만들기

01.스크립트 태그의 개요

-JSP는 태그를 이용하여 문법을 기술함. JSP 태그는 크게 스크립트 태그(script tag), 디렉티브 태그(directive tag), 액션 태그(action) 태그로 나뉨. 스크립트 태그는 HTML 코드에 자바 코드를 넣어 프로그램이 수행하는 기능을 구현할 수 있음. 디렉티브 태그는 JSP 페이지를 어떻게 처리할 것인지 설정하여 JSP 페이지에 대한 정보를 JSP 컨터이너에 보냄. 액션 태그는 클라이언트/서버에 어떤 작동을 행하도록 명력을 지시하는 XML 형태의 태그로, JSP 페이지 사이에서 제어를 이용할 수고 있음

-스크립트 태그는 세 가지 종류가 있으며 모두 <% ··· %>를 사용함. JSP 페이지가 서블릿 프로그램에서 서블릿 클래스로 변환할 때, JSP 컨테이너가 자바 코드가 삽입되어 있는 스크립트 태그를 처리하고 나머지는 HTML 코드나 일반 텍스트로 간주함

◎스크립트 태그의 종류

스크립트 태그	형식	설명
선언문(declaration)	<%! ··· %>	자바 변수나 메소드를 정의하는데 사용함 cf)클래스 자식 선언
스크립틀릿(scriptlet)	<% ··· %>	자바 로직 코드를 작성하는 데 사용함 cf)main( )함수 안에
표현문(expression)	<%= ··· %>	변수, 계산식, 메소드 호출 결과를 문자열 형태로 출력하는 데 사용함 cf)HTML

*JSP

HTML + Java -> 1.분리/추출 -> 임시클래스(_jsp).java

text + markup 2.컴파일 -> .class

3.리턴 문자/숫자

02.선언문 태그

-선언문 태그(declaration tag)는 변수나 메소드 등을 선언하는 태그로, 다음과 같은 형식임. 선언문 태그에 선언된 변수와 메소드는 서블릿 프로그램으로 번역될 때 _jspService() 메소드 외부에 배치되므로 JSP 페이지 임의의 위치에서 선언할 수 있음. 심지어 스크립틀릿 태그보다 나중에 선언해도 스크립틀릿 태그에서 사용할 수 있음

<%! 자바 코드; %> ············································· 각 행이 세미콜론으로 끝나야 함

-선언문 태그로 선언된 변수는 서블릿 프로그램으로 번역될 때 클래스 수준의 멤버 변수가 되므로 전역변수로 사용됨. 예를 들어 코드에서 선언문 태그로 선언한 변수 count는 서블릿 프로그램으로 번역될 때 _jspService() 메소드 외부에 배치되어 해당 JSP 페이지의 어느 위치에서도 참조할 수 있으므로 나중에 선언된 스크립틀릿 태그에서 사용할 수 있음. 반면 count 변수를 스크립틀릿 태그에서 참조하면 _jspService() 메소드 내부에 들어감

[선언문 태그 사용 예: 전역변수 선언]

<html>
<head>
<title>Scripting Tag</title>
</head>
<%-- 선언문 태그 [메소드] --%>
<%! int count = 0; %>
<body>
page Count is
<%-- 스크립틀릿 태그 --%>
<%
out.println(++count); //전역변수 count를 1증가시킴
%>
</body>
</html>

실행 결과

Page Count is: 1

* 출력방법

1.<%= %>

2.out.println();) -> 줄바꿈 안됨

3.${ } -> EL웹 모듈설정에 따라 실행 안 될 수도 있음

-선언문 태그로 선언된 메소드는 전역변수처럼 전역 메소드로 사용됨. 선언문 태그로 선언된 메소드는 전역 메소드로, 선언된 스크립틀릿 태그의 out.print() 메소드에서 호출할 수 있음. 따라서 매개변수에 값이 전달되어 출력됨

예제 2-1. 선언문 태그에 전역변수 사용하기

JSPBook/src/main/webapp/ch02/declaration01.jsp

예제 2-2. 선언문 태그에 전역 메소드 사용하기1

JSPBook/src/main/webapp/ch02/declaration02.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Scripting Tag</title>
</head>
<body>
<%! int sum(int a, int b){
return a + b;
}
%>
<%
out.print("2 + 3 = " + sum(2, 3));
%>
</body>
</html>

실행 결과

예제 2-3. 선언문 태그에 전역 메소드 사용하기2

JSPBook/src/main/webapp/ch02/declaration03.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Scripting Tag</title>
</head>
<body>
<%! String makeItLower(String data){
return data.toLowerCase();
} %>
<%
out.println(makeItLower("Hello World"));
%>
</body>
</html>

실행 결과

'프로그래밍 > JSP' 카테고리의 다른 글

JSP 웹프로그래밍 59일차 (25/2/10) (0)	2025.02.10
JSP 웹프로그래밍 58일차 (25/2/7) (0)	2025.02.07
JSP 웹프로그래밍 56일차 (25/2/5) (0)	2025.02.05

현재글JSP 웹프로그래밍 57일차 (25/2/6)

wkun 님의 블로그

wkun 님의 블로그 입니다.

Today :
Yesterday :

일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

wkun 님의 블로그