본문 바로가기
Full Stack 교육 회고록

9/21 jsp/servlet (was구조, servlet 특징, request vs response, url mapping)

순두부 호랑이 2022. 9. 21. 12:51
728x90
SMALL

<학습목표>

1. 서버프로그램의 필요성에 대해 설명할 수 있다.

2. WAS 구조를 설명할 수 있다.

3. Servlet의 특징을 설명할 수 있다.
4. Request와 Response를 이해할 수 있다.

5. URL Mapping이 무엇인지 설명할 수 있다.

 

Networkwork = Net + Work "그물처럼 서로 엮어서 일하는 것"

=> 통신 장비들이 그물망처럼 연결되어 데이터를 교환하는 형태

node: 네트워크에 연결된 컴퓨터와 그 안에 속한 장비(허브,공유기,라우터)

host: 노드 중에서 애플리테이션을 실행할 수 있는 컴퓨팅 시스템을 갖춘 기기

 

<client와 server>

- 호스트 사이에 제공되는 서비스를 기준으로 호스트를 세분화

   => 임의의 호스트가 클라이언트나 서버로 고정되지 않고 이용하는 서비스의 종류에 따라 클라이언트가 될 수도 있고 서버가 될 수도 있음

임의의 호스트가 클라이언트나 서버로 고정되지 않고 이용하는 서비스의 종류에 따라 클라이언트가 될 수도 있고 서버가 될 수도 있음

<서버프로그램의 필요성>

 

정적 페이지(Static Web Page)

- 서버(웹 서버)에 미리 저장된 파일(HTML 파일, 이미지, JavaScript 파일 등)이 그대로 전달되는 웹페이지

- 사용자는 서버에 저장된 데이터가 변경되지 않는 한 고정된 웹 페이지를 보게 됨

 

동적 페이지(Dynamic Web Page)

- 서버(웹 서버)에 있는 데이터들을 스크립트에 의해 가공처리한 후 생성되어 전달되는 웹페이지

- 사용자는 상황, 시간, 요펑 등에 따라 달라지는 웹 페이지를 보게 됨

 

<servlet이란?>

server(서버 상에서 작동하는)+applet(응용 프로그램)

- java를 기반으로 하는 web application programming 기술

- client 요청에 동적으로 작동, 응답은 가공이 완료된 정적문서 형식으로 제공

 

destory는 서버 꺼질때 1번만 사용.

<TOMCAT 설치>

https://tomcat.apache.org/download-90.cgi 8버전 다운로드

 

Apache Tomcat® - Apache Tomcat 9 Software Downloads

Welcome to the Apache Tomcat® 9.x software download page. This page provides download links for obtaining the latest version of Tomcat 9.0.x software, as well as links to the archives of older releases. Unsure which version you need? Specification version

tomcat.apache.org

인코딩 설정하기

<ex01.jquet.html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
    <title>Document</title>
</head>
<body>
    <div id="movieTB"></div>
    <button onclick="req()">요청</button>

    <script>
        function req(){
            $.ajax({
                //어디로 요청할건지
                url:"http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20220901",
                //어떻게 요청할건지(요청방식-get/post/put/delete)
                //type 속성은 기본값이 get
                type:"get",
                //요청-응답 성공했을 때 수행할 작업
                success: function(date){
                    //응답받은 데이터를 테이블 형식으로 
                    //# movie TB DIV영역에 출력
                    let movieList= date.boxOfficeResult.dailyBoxOfficeList;
                    
                    let str = `<table border = '1px solid black'>`;
                        str += `<tr>`;
                        str += `<th>순위</th><th>영화제목</th><th>개봉일자</th>`;
                        str += `</tr>`;
                    for(var i=0; i<movieList.length; i++){
                        str += `<tr align='center'>`;
                        str += `<td>${movieList[i].rank}</td>`
                        str += `<td>${movieList[i].movieNm}</td>`
                        str += `<td>${movieList[i].openDt}</td>`
                        str += `</tr>`;
                    }
                        str += `</table>`;
                    $("#movieTB").html(str);
                },
                //요청-응답 실패했을 때 수행할 작업
                error : function(){
                    alert("실패!");
                }
            });
        }

        for(var i=0; i<movieList.length;i++){
                movieList[i].rank
        }
        

    </script>
        
</body>
</html>

<ex02vanilla_js.html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="movieTB"></div>
    <button onclick="req()">요청</button>

    <script>
        //요청 주소 정의
        const url = "http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20220901";
    
        //비동기 통신: async/await 문법 사용(ESB)
        //async: 비동기 함수 정의 -> 결과값: promise 형태로 반환
        //promise: 비동기 작업 결과 단위(비동기 처리 상태, 데이터)
        async function req(){
            //await:async 같이 쓰임,promise(비동기 처리) 끝날때까지 기다려라!
            //fetch API: 외부 라이브러리 추가 없이 브라워저 내장
            //then(): 비동기 처리가 끝난 다음 처리할 일 정의
            //첫번째 then(): promise를 반환(data - response data)
            //두번째 then(): promise 내부에 promiseResult 사용(movie- 영화 데이터)
            await fetch(url).then((data)=>data.json()).then((movie)=>{
                console.log(movie)
                 //응답받은 데이터를 테이블 형식으로 
                    //# movie TB DIV영역에 출력
                    let movieList= movie.boxOfficeResult.dailyBoxOfficeList;
                    
                    let str = `<table border = '1px solid black'>`;
                        str += `<tr>`;
                        str += `<th>순위</th><th>영화제목</th><th>개봉일자</th>`;
                        str += `</tr>`;
                    for(var i=0; i<movieList.length; i++){
                        str += `<tr align='center'>`;
                        str += `<td>${movieList[i].rank}</td>`
                        str += `<td>${movieList[i].movieNm}</td>`
                        str += `<td>${movieList[i].openDt}</td>`
                        str += `</tr>`;
                    }
                        str += `</table>`;
                        document.getElementById("movieTB").innerHTML = str;
            })

        }

    </script>
</body>
</html>

<Ex01createServlet.java>

package com.smhrd.servlet;

import java.io.IOException;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

//@ 주석(annotation): 코드실행에 영향x, 컴파일 할때 영향을 미침
//@WebServlet : URL 매핑 역할
@WebServlet("/Ex01")
public class Ex01createServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see Servlet#init(ServletConfig)
	 */
	public void init(ServletConfig config) throws ServletException {
		// TODO Auto-generated method stub
	}

	/**
	 * @see Servlet#destroy()
	 */
	public void destroy() {
		// TODO Auto-generated method stub
	}

	/**
	 * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
	}

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.getWriter().append("Served at: ").append(request.getContextPath());
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

<web.xml>

<welcome-file-list>
        <welcome-file>index.html</welcome-file>
        <welcome-file>index.htm</welcome-file>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
    
    <servlet>
    	<servlet-name>Ex01</servlet-name><!-- 서블릿의 별명 -->
    	<servlet-class>com.smhrd.servlet.Ex01createServlet</servlet-class><!-- 서블릿의 실제 경로 -->
    </servlet>
	<servlet-mapping>
		<servlet-name>Ex01</servlet-name>
		<url-pattern>/create</url-pattern>
	</servlet-mapping>

<Ex01 createServlet.java>

package com.smhrd.servlet;

import java.io.IOException;

import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

//@ 주석(annotation): 코드실행에 영향x, 컴파일 할때 영향을 미침
//@WebServlet : URL 매핑 역할
@WebServlet("/Ex01")
public class Ex01createServlet extends HttpServlet {
	//객체 데이터를 입출력(스트림(자바 바이트)-통로)
	//객체 -> 바이트형태로 변환 (-> 직렬화)
	//바이트배열 -> 객체 형태로 변환(-> 역직렬화)
	private static final long serialVersionUID = 1L;

	//1.init: 서블릿 객체를 초기화하는 역할
	//맨 처음에 딱 한번만 실행, 초기값 설정
	
	public void init(ServletConfig config) throws ServletException {
		System.out.println("init 호츌!");
	}

	//2. destroy : 서블릿 객체를 없앰
	//서블릿이 종료될 때 마지막에 딱 한번 자동으로 호출
	public void destroy() {
		System.out.println("destroy 호출!");
	}

	//3. service: 클라이언트의 요청 처리
	//요청 방식(get, post, put, delete ...)에 따라 doGet, doPost 메서드를 호출하는 역할
	//HttpServletRequest:HTTP 요청 정보 제공
	//HttpServletResponse: HTTP 응답 정보 제공
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("service호출!");
		doGet(request,response);
		doPost(request,response);
	}

	//클라이언트에서 get 방식으로 요청 시에 호출
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("doGet호출!");
	}

	//클라이언트에서 post 방식으로 요청시에 호출
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("doPost호출!");
	}

}

<Servlet 실습>

 

실습1. 화면에 "Hello Servlet"문자열 출력하기

<Ex02HelloWord.java>

package com.smhrd.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/Ex02HelloWord")
public class Ex02HelloWord extends HttpServlet {

	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//PrintWriter: 텍스트 출력(서버->클라이언트) 스트림(통로)
		PrintWriter out = response.getWriter();
		out.print("<html>");
		out.print("<body style='background-color:pink;'>");
		out.print("<h1>hello world</h1>");
		out.print("</body>");		
		out.print("</html>");
	}

}

<데이터 전송을 위한 3가지 조건>

- 데이터를 전송하기 위해 사용하는 태그? <form>태그

실습2-1. 1개 값을 입력받는 form 태그작성

<EX02DataSend.html>

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
	<!-- get방식(기본값) -->
    <!-- action: 어디로 요청할건지(url 매핑값) -->
	<form action="Ex03DataSend">
		<!--  name: 어떤 값을 보내는지 -->
		<input type="text" name="data">
		<!-- submit: 값을 전송하는 시점 -->
		<input type="submit" value="SEND">
	</form>
</body>
</html>

<EX03DataSend.java>

package com.smhrd.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/Ex03DataSend")
public class Ex02DataSend extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//클라이언트(요청데이터) -> 서버에서 받기 (request)
		//getParameter(input-name): 해당 name이 지정된 input 창에 작성된(선택한) 값 반환
		//	->String
		request.setCharacterEncoding("euc-kr");//요청(get/post)데이터 인코딩 방식지정
		String data = request.getParameter("data");
		
		System.out.println(data);
	}
}

<server.xml>

 <Connector URIEncoding="euc-kr" connectionTimeout="20000" port="8081" protocol="HTTP/1.1" redirectPort="8443"/>

 

<ex03plus.html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="Ex04Plus">
		<input type="text" name="num1">+
		<input type="text" name="num2">+
		<input type="submit" value="확인">
	</form>

</body>
</html>

<ex04plus.java>

package com.smhrd.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/Ex04Plus")
public class Ex04Plus extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		int num1 = Integer.parseInt(request.getParameter("num1"));
		int num2 = Integer.parseInt(request.getParameter("num2"));
		
		//PrintWriter(출력스트림)
		PrintWriter out = response.getWriter();
		
		out.print("<html>");
		out.print("<body>");
		out.print(num1+"+"+num2+"="+(num1+num2));
		out.print("</body>");
		out.print("</html>");
	}

}

<ex04plus.java>

package com.smhrd.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/Ex04Plus")
public class Ex04Plus extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		int num1 = Integer.parseInt(request.getParameter("num1"));
		int num2 = Integer.parseInt(request.getParameter("num2"));
		String ope = request.getParameter("ope");
		
		System.out.println(ope);
		
		//PrintWriter(출력스트림)
		PrintWriter out = response.getWriter();
		
		out.print("<html>");
		out.print("<body>");
		if(ope.equals("plus")){
				out.print(num1+"+"+num2+"="+(num1+num2));
		}else if(ope.equals("minus")) {
			out.print(num1+"-"+num2+"="+(num1-num2));
		}else if(ope.equals("mul")) {
			out.print(num1+"*"+num2+"="+(num1*num2));
		}else{
			out.print(num1+"/"+num2+"="+(num1/num2));
			
			
		out.print("</body>");
		out.print("</html>");
	}

}}

<ex03plus.html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="Ex04Plus">
		<input type="text" name="num1">
		<select name="ope">
			<option value="plus">+</option>
			<option value="minus">-</option>
			<option value="mul">*</option>
			<option value="div">/</option>
		</select>
		<input type="text" name="num2">
		<input type="submit" value="계산">
	</form>

</body>
</html>
728x90
LIST

'Full Stack 교육 회고록' 카테고리의 다른 글

9/23- JSP  (0) 2022.09.23
9/22 jsp/servlet 실습  (0) 2022.09.22
9/20 css(flow, overflow,position) javascript(jquery, addremove)  (0) 2022.09.20
9/19 css(flex) javascript(j.query)  (2) 2022.09.19
8/16-css(박스모델, 신호등 표현) javascript(DOM, htmlelement객체)  (1) 2022.09.16

'Full Stack 교육 회고록' Related Articles

티스토리툴바