티스토리 뷰

백엔드 교육과정/3월

2024.03.28_ 웹 서비스 구조와 JSP/Servlet

Ji@n 2024. 3. 28. 17:48

ch1. 웹 서비스 개념 및 구조

웹 클라이언트 (Web Client) - Web Browser, Mobile App ...

웹 서버(Web Server) -> resource(이미지,텍스트...)를 줌 -> 정적(이미지,텍스트,파일... 변하지 않음) / 동적(글을 쓴다->바뀐다)

WAS(Web Application Server) -> 동적 컨텐츠를 처리함 => DB Control => Java로 컨트롤

==> 자바를 기반으로 한다

Web Container(Servlet Container) -> WAS 제일 큼 이 안에 웹 컨터이너가 있음
웹 컨테이너랑 서블렛 컨테이너 랑 같은거임!

웹 서비스 개념 및 구조(JSP/Servlet)

JSP는 html이 껴있는 java임

JSP 와 Servlet은 (달라보이지만)같은것이다..

JSP -> Servlet Container 가 관리함

=> 원래 같은건데 역할에 의해 만들어놓은것이다! (그래서 주고 받고 할 수 있다)

JSP 와 Servlet 배우는 이유 -> Spring Framework를 구성하는 언어라서

1. 웹 클라이언트 (Web Client)

웹 클라이언트는 사용자가 웹 서비스를 이용하기 위해 사용하는 장치입니다. 주로 다음과 같은 것이 있습니다:

웹 브라우저: Chrome, Firefox, Safari 등.
모바일 앱: iOS 및 Android 앱 등.

2. 웹 서버 (Web Server)

웹 서버는 클라이언트의 요청을 수신하고 처리하여, 요청된 리소스(이미지, 텍스트 등)를 응답으로 제공합니다. 웹 서버는 두 가지 주요 리소스 유형을 처리합니다:

정적 리소스: 변하지 않는 리소스(이미지, 텍스트 파일 등). 서버에서 단순히 파일을 제공.
동적 리소스: 사용자 요청에 따라 동적으로 생성되는 리소스(예: 사용자 입력을 받아서 변경된 데이터 제공).

3. 웹 애플리케이션 서버 (WAS, Web Application Server)

웹 애플리케이션 서버는 동적 콘텐츠를 처리하는 서버입니다. 주요 역할은 다음과 같습니다:

동적 콘텐츠 처리: 사용자 요청에 따라 웹 페이지를 동적으로 생성합니다.
DB Control: 데이터베이스와의 연결을 관리하고 데이터에 접근합니다.
Java 기반: Java 기술을 사용하여 서버 사이드 로직을 처리합니다.

4. 웹 컨테이너 (Web Container) 또는 서블릿 컨테이너

웹 컨테이너는 웹 애플리케이션 서버의 한 구성 요소로, 서블릿과 JSP를 관리합니다. 주요 역할은:

서블릿 관리: 서블릿 생명주기를 관리하고 요청을 서블릿으로 전달합니다.
JSP 관리: JSP 페이지를 서블릿으로 변환하여 처리합니다.

5. JSP와 서블릿

JSP (JavaServer Pages):

정의: HTML과 Java 코드를 혼합하여 동적 웹 페이지를 생성하는 기술입니다.
역할: 사용자에게 동적 웹 콘텐츠를 제공하며, 서블릿 컨테이너가 JSP를 서블릿으로 변환하여 처리합니다.
장점: HTML과 Java 코드가 혼합되어 있으므로 웹 페이지의 디자인과 비즈니스 로직을 함께 처리할 수 있습니다.

서블릿 (Servlet):

정의: Java로 작성된 서버 사이드 프로그램으로, HTTP 요청을 처리하고 응답을 생성합니다.
역할: 요청을 받아 비즈니스 로직을 처리하고, JSP와 같은 뷰를 통해 응답을 생성합니다.
장점: 웹 애플리케이션의 서버 사이드 로직을 처리하며, 데이터베이스와 상호작용하고 동적 콘텐츠를 생성할 수 있습니다.

6. 웹 브라우저에서 URL 입력 시의 동작 과정

URL 입력:
- 사용자가 웹 브라우저의 주소창에 URL을 입력합니다.
DNS 조회:
- 웹 브라우저는 도메인 이름을 IP 주소로 변환하기 위해 DNS 서버에 요청을 보냅니다.
- DNS 서버는 도메인 이름에 대응하는 IP 주소를 반환합니다.
TCP/IP 연결:
- 웹 브라우저는 반환된 IP 주소를 사용하여 서버와 TCP/IP 연결을 설정합니다.
HTTP 요청 전송:
- 연결이 완료되면, 웹 브라우저는 HTTP 프로토콜을 사용하여 웹 서버에 요청을 보냅니다.
- 요청은 HTML 파일이나 기타 리소스에 대한 것입니다.
웹 서버 처리:
- 웹 서버는 요청을 수신하고, 적절한 HTML 파일이나 리소스를 준비합니다.
- 동적 콘텐츠의 경우, 웹 애플리케이션 서버(WAS)로 요청을 전달하여 서블릿이나 JSP가 요청을 처리하도록 합니다.
응답 전송:
- 웹 서버는 준비된 HTML 파일이나 리소스를 웹 브라우저로 응답으로 보냅니다.
웹 브라우저 렌더링:
- 웹 브라우저는 받은 HTML 파일과 리소스를 파싱하고, 페이지를 렌더링하여 사용자에게 최종 웹 페이지를 표시합니다.

내장객체(implicit object) - request,response,session 이 주로 사용

클라이언트를 종료시키면 session이 날라감

환경구성

설정 정보 :

JAVA 11 쓰기

Apache Tomcat -> AWS의 무료 버전

JSP_Servlet 프로젝트 만들고

Java Resources > 동적

webapp > 정적

ch06 > jspTag

<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jspTag</title>
</head>
<body>
	<%-- Declaration(선언문) --%>
	<%!
		public int add(int x,int y){
		return x + y;
		}
	%>
	
	<%-- Scriptlet --%>
	<% 
		// 지역 변수 선언 
		int result = add(20,30);
		
		// JSP에서 출력 방법 
		// 1) 로그
		System.out.println("result = " + result);
		
		// 2) JspWriter 객체를 사용하여 응답(response)으로 출력
		out.write("<p>result = " + result + "</p>\r\n");
		
		// 3) Expression 사용
	%>
	
	<p>결과 = <%=result %></p>
	
	<% 
		Date date = new Date();
	%>
	
	<p><%=date %></p>
	
	
</body>
</html>

ch07 > condition

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Condition</title>
</head>
<body>
	<%
		int day = 1; // 지역 변수
		
	%>
	
	<% 
		if(day == 1 || day == 7){
	%>
		<p>오늘은 주말입니다.</p>
	<%
		}else{
	%>
		<p>오늘은 평일입니다.</p>
	<%
		}
	%>
</body>
</html>

list

<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>list</title>
</head>
<body>
	<%
		ArrayList<String> list = new ArrayList<>();
		list.add("둘리");
		list.add("도우너");
		list.add("고길동");
		list.add("또치");
	%>
	
	<ul>
		<li><%=list.get(0) %></li>
		<li><%=list.get(1) %></li>
		<li><%=list.get(2) %></li>
		<li><%=list.get(3) %></li>	
	</ul>
</body>
</html>

loop

<%@ page language="java" contentType="text/html; charset=UTF-8" 
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Loop</title>
  <style type="text/css">
     table {
         font-family : arial, sans-serif;
         border-collapse : collapse;
         width : 100%;
     }
     td, th {
            border : 1px solid #dddddd;
         text-align : left;
         padding : 8px;
     }
     </style>
</head>
<body>

	<table>
		<thead>
			<tr>
				<th>이름</th>
				<th>전화번호</th>
				<th>이메일</th>
			</tr>
		</thead>
		<tbody>
			<%for(int i = 0;i < 2; i++){%>
				<tr>
					<td>test<%=i+1 %></td>
					<td>010-1111-222<%=i+1 %></td>
					<td>test<%=i+1 %>@test.com</td>
				</tr>
			<%} %>
		</tbody>
	</table>
	
	
</body>
</html>

variable

<%@page import="java.text.DecimalFormat"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>variable</title>
</head>
<body>
	<%
		int inputMoney = 10000000;
		int period = 24;
		double interest = Double.parseDouble("2.4");
		
		int totalInputMoney = inputMoney * period;
		double totalInterest = totalInputMoney * interest/100;
		double totalReceiveMoney = totalInterest + totalInputMoney;
		
		DecimalFormat df = new DecimalFormat("￦###,###,###");
		
	%>

	<h1> 적금 계산</h1>
	<h2> 입력받은 정보</h2>
	<p>월 금액 : <%=df.format(inputMoney) %></p>
	<p>적금 기간 : <%=period %></p>
	<p>년 이자 : <%=interest %></p>
	<hr>
	<p>총 납입 금액 : <%=df.format(totalInputMoney) %></p>
	<p>발생 이자 : <%=df.format(totalInterest) %></p>
	<p>총 수령액 : <%=df.format(totalReceiveMoney) %></p>
	
</body>
</html>

ch08>directiveInclude

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>directive</title>
</head>
<body>
	<%-- header.jspf 파일을 include --%>

	<h1>include directive(지시자)</h1>
	<%@ include file="header.jspf" %>
	<div>
		<p>본문입니다.</p>
	</div>

	<%@include file="footer.jspf" %>
	<p><%=header %></p><%-- header.jspf 변수를 사용할 수 있음 --%>

	<%--
		* directive include 특징 
		1. JSP 파일이 자바 파일로 바뀔 때 문서에 통합되어 컴파일(정적)
		2. 다수의 JSP 페이지에서 공통으로 사용되는 코드를 작성하는 용도 
		3. 포함되는 JSP 파일에서 선언한 변수들을,
			포함되는 JSP 파일에서 사용할 수 있음
	 --%>

</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<style>
.footer{
	background-color : lightblue;
	text-align : center;
	height : 60px;
}
</style>
<div class="footer">
(주) 목코딩<br>
https://www.mokcoding.co.kr<br>
TEL : 010-xxxx-xxxx
</div>

header

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<style>
.header{
	background-color : lightgreen;
	font-size : 200%;
	text-align : center;
	height : 60px;
}
</style>

<%! 
	String header = "헤더 변수";
%>
<div class="header">여기는 header 입니다.</div>

directiveInclude

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> directive <%-- header.jspf 파일을 include --%>

include directive(지시자)

<%@ include file="header.jspf" %>

본문입니다.

<%@include file="footer.jspf" %>

<%=header %>

<%-- header.jspf 변수를 사용할 수 있음 --%> <%-- * directive include 특징 1. JSP 파일이 자바 파일로 바뀔 때 문서에 통합되어 컴파일(정적) 2. 다수의 JSP 페이지에서 공통으로 사용되는 코드를 작성하는 용도 3. 포함되는 JSP 파일에서 선언한 변수들을, 포함되는 JSP 파일에서 사용할 수 있음 --%>

ch09 > actionInclude.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>
	<h2>action tag include 예시</h2>
	
	<div>
		<p>header 부분입니다.</p>
	</div>
	<div>
		<p>외부 파일 부분입니다.</p>
		<jsp:include page="part.jsp"></jsp:include>
	
	</div>
	
	<div>
		<p>footer 부분입니다.</p>
	</div>
	
</body>
</html>

part .jsp

<%@page import="java.util.Date"%>
<%@ 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>
	<%!
		String header = "header";
	%>

	<%=new Date().toString() %>
</body>
</html>

actionForword.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>forward</title>
</head>
<body>
	<% 
		System.out.println("forward 실행 전");
	%>
	<jsp:forward page="part.jsp"></jsp:forward>
	<%
		System.out.println("forward 실행 후");
	%>
</body>
</html>

ch10>useBean.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>
	<jsp:useBean id="member" class="web.ch10.bean.MemberBean"> /*자바와 JSP를 연결함*/
	</jsp:useBean>
	
	<%--useBean 사용 방법1 --%>
	<jsp:setProperty name="member" property="userId" value="guest"/>
	
	<p>id 출력 : <jsp:getProperty name="member" property="userId" /></p>
	
	<%-- useBean 사용 방법2 : getter/setter 이용 --%>
	<% member.setEmail("test@test.com"); %>
	
	<p>email 출력 : <%=member.getEmail() %></p>
	
	
	
</body>
</html>

JavaResources>src/main/java>web.ch10.bean

package web.ch10.bean;

import java.io.Serializable;

public class MemberBean implements Serializable{

	// 아이디, 비밀번호, 이메일 수신여부, 이메일 자기소개 정보를 변수로 선언
	private String userId;
	private String password;
	private String email;
	private String emailAgree;
	private String introduce;
	private String mId;
	
	public String getmId() {
		return mId;
	}


	public void setmId(String mId) {
		this.mId = mId;
	}


	// 기본 생성자
	public MemberBean() {
		System.out.println("MemberBean() 생성자");
	}

	
	// getter/setter
	
	public String getUserId() {
		return userId;
	}

	public void setUserId(String userId) {
		this.userId = userId;
	}

	public String getPassword() {
		return password;
	}

	public void setPassword(String password) {
		this.password = password;
	}

	public String getEmail() {
		return email;
	}

	public void setEmail(String email) {
		this.email = email;
	}

	public String getEmailAgree() {
		return emailAgree;
	}

	public void setEmailAgree(String emailAgree) {
		this.emailAgree = emailAgree;
	}

	public String getIntroduce() {
		return introduce;
	}

	public void setIntroduce(String introduce) {
		this.introduce = introduce;
	}
	
	
	
}//end MemberBean

이런식으로 변수명을 지정하면 에러가 날 수 있으므로 주의하기

homework>HW1.jsp

<%@page import="java.util.Date"%>
<%@page import="edu.web.homework.BoardVO"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HW1</title>
</head>
<body>
	<%
		ArrayList<BoardVO> list = new ArrayList<>();
	
		// 게시글 데이터 5개를 list에 추가
		list.add(new BoardVO(1,"test1","mok",new Date()));
		list.add(new BoardVO(2,"test2","lim",new Date()));
		list.add(new BoardVO(3,"test3","kim",new Date()));
		list.add(new BoardVO(4,"test4","park",new Date()));
		list.add(new BoardVO(5,"test5","lee",new Date()));
	%>
	
	

	
	<!-- table을 생성하여 5개의 게시글 출력 -->
	<table>
		<thead>
			<tr>
				<th>번호</th>
				<th>제목</th>
				<th>작성자</th>
				<th>작성일</th>
			</tr>
		</thead>
		<tbody>
			<%for(int i = 0;i < list.size(); i++){%>
				<tr>
					<td><%=list.get(i).getBoardId()%></td>
					<td><%=list.get(i).getBoardTitle()%></td>
					<td><%=list.get(i).getUserid() %></td>
					<td><%=list.get(i).getBoardRegDate() %></td>	
				</tr>
			<%} %>
		</tbody>
	</table>
	
</body>
</html>

Java Resources>edu.web.homework > BoardVO.java

package edu.web.homework;

import java.util.Date;

public class BoardVO {
	private int boardId;
	private String boardTitle;
	private String userid;
	private Date boardRegDate;
	
	
	public BoardVO() {}

	
	public BoardVO(int boardId, String boardTitle, String userid, Date boardRegDate) {
		super();
		this.boardId = boardId;
		this.boardTitle = boardTitle;
		this.userid = userid;
		this.boardRegDate = boardRegDate;
	}

	public int getBoardId() {
		return boardId;
	}

	public void setBoardId(int boardId) {
		this.boardId = boardId;
	}

	public String getBoardTitle() {
		return boardTitle;
	}

	public void setBoardTitle(String boardTitle) {
		this.boardTitle = boardTitle;
	}

	public String getUserid() {
		return userid;
	}

	public void setUserid(String userid) {
		this.userid = userid;
	}

	public Date getBoardRegDate() {
		return boardRegDate;
	}

	public void setBoardRegDate(Date boardRegDate) {
		this.boardRegDate = boardRegDate;
	}

	@Override
	public String toString() {
		return "BoardVO [boardId=" + boardId + ", boardTitle=" + boardTitle + ", userid=" + userid + ", boardRegDate="
				+ boardRegDate + "]";
	}
	
	
	
	
}//end BoardVO

'백엔드 교육과정 > 3월' 카테고리의 다른 글

2024.03.29_ 웹 서비스 개념 및 구조 , 실습 (0)	2024.03.29
2024.03.27_ 프론트엔드 프로젝트 마무리 + 코드 주석 (1)	2024.03.27
2024.03.26 _ 미니 프론트엔드 코드 리뷰 + 수정 (0)	2024.03.26
2024.03.25_ 프론트엔드 미니 프로젝트 (0)	2024.03.25
2024.03.25_ Bootstrap , JQuery (0)	2024.03.25

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/11 »
일	월	화	수	목	금	토
					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	29	30

글 보관함