TIL 0419

먼지·2024년 4월 19일

Today I Learned

목록 보기

44/89

[실습] To-do List

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <!-- 모바일 장치에서 웹사이트가 원하는 사이즈로 보여지게 처리 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>할 일 목록(TodoList)</title>
    <!-- BootStrap CSS 링크 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: sans-serif;
        }

        .title {
            text-align: center;
            font-weight: bold;
            font-size: 20pt;
        }

        .todo-done {
            text-decoration: line-through;
        }

        .pointer {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="card card-body">
            <div class="title">할 일 목록(To-doList)</div>
        </div>
        <div class="card card-default">
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col">
                        <div class="input-group">
                            <input type="text" class="form-control" name="msg" placeholder="오늘의 할 일 입력하세요!" id="todo">
                            <span class="btn btn-primary" id="add_btn">추가</span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <ul class="list-group" id="list"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- BootStrap JS 링크 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        let ts = new Date().getTime();
        const todoList = [
            { id: ts, todo: "자전거 타기", completed: false },
            { id: ts+1, todo: "딸과 공원 산책", completed: true },
            { id: ts+2, todo: "일요일 애견 카페", completed: false },
            { id: ts+3, todo: "원고 집필", completed: false }
        ];

        // 목록 처리
        function selectList() {
            $('#list').empty();
            $(todoList).each(function (index, item) {
                let output = '';
                if (item.completed) { // 할 일 완료
                    output += '<li class="list-group-item list-group-item-success">'
                    output += '<span class="pointer todo-done check-btn" id="' + item.id + '">' + item.todo + '(완료)</span>';
                } else { // 할 일 미완료
                    output += '<li class="list-group-item">';
                    output += '<span class="pointer check-btn" id="' + item.id + '">' + item.todo + '</span>';
                }
                output += '<span class="float-end badge bg-secondary pointer delete-btn" id="' + item.id + '">삭제</span>';
                output += '</li>';

                $('#list').append(output);
            });
        };   // end of selectList
        
        // 삭제 이벤트 연결
        $(document).on('click', '.delete-btn', function(){
            let id = this.id
            let index = todoList.findIndex((item)=> id == item.id);
            // 배열에서 선택한 객체 삭제
            todoList.splice(index,1);
            selectList();
        })

        // 할 일 체크 이벤트 연결
        $(document).on('click','.check-btn',function(){
            // 이벤트가 발생한 li 태그의 id
            let id = this.id;
            // findIndex는 매개변수로 전달된 함수에 배열의 요소를 전달해서
            // 비교 연산 후 일치하게 되면 해당 요소의 인덱스를 바놘
            let index = todoList.findIndex((item)=> id == item.id);
            // function(item){return id == item. id})
            todoList[index].completed = !todoList[index].completed;
            selectList();
        });


        // 등록 key 이벤트 연결
        $('#todo').keydown(function (event) {
            if (event.keyCode == 13) { // enter 키를 눌렀을때 실행된다
                // this : 이벤트가 발생한 input 객체
                addTodo($(this));
            }
        });
        // 등록 click 이벤트 연결
        $('#add_btn').click(function () {
            addTodo($('#todo'));
        });


        //등록
        function addTodo(todo) {
            todoList.unshift({ id: new Date().getTime(),todo: todo.val(), completed: false });
            todo.val(''); // 입력창 초기화
            // 새로 저장된 뎅터까지 포함해서 전체 목록을 다시 호출함
            selectList();
        };


        selectList();
    </script>
</body>

</html>

Web Application

웹어플리케이션의 구성

요청 처리 방식

CGI 방식

여러 요청이 동일한 프로그램을 호출할 때 요청량만큼 프로세서를 생성해서 처리하기
때문에 대량 트래픽 발생시 부하 발생

Servlet/JSP 사용시 처리 방식

여러 요청이 동일한 프로그램을 호출할 때 요청을 어플리케이션서버내의 컨테이너가 각 요청에 따라 스레드를 생성해 하나의 프로그램을 동작시키는 방식으로 대량의 트래픽 발생해도 CGI 방식에 비해 부하가 덜 발생함

Servlet 과 JSP

Servlet

자바를 기반으로 하는 웹 개발 표준 언어
실행 코드 방식

JSP

자바 기반 스크립트 언어
웹 어플리케이션에서 결과 화면을 생성할 때 주로 사용

웹컨테이너

웹어플리케이션을 실행할 수 있는 컨테이너

개발 환경 구축

서버 : 톰캣( http://tomcat.apache.org/)

톰캣의 디렉토리

bin : 톰캣을 실행하고 종료시키는 스크립트 파일 위치
conf : 설정 파일이 위치
lib : 톰캣을 실행하는데 필요한 라이브러리(jar) 파일이 위치
logs : 톰캣 로그 파일이 위치
temp : 톰캣이 실행되는 동안 임시 파일이 위치
webapps : 웹 어플리케이션이 위치
work : 톰캣이 실행되는 동안 사용되는 작업 파일이 위치

구축된 프로젝트 (다이나믹 웹 프로젝트)

이클립스의 다이나믹 웹 프로젝트를 이용해 개발 환경 구축

배포 환경(톰캣 배포시 환경)

Servlet

서블릿의 개요

자바 기반의 웹 프로그래밍 기술로 자바 언어의 모든 기능을 사용 할 수 있으며 쓰레드 기반의 빠른 처리 속도를 자랑하나, 프로그램 내에서 화면 코딩을 제어해야 하는 문제로 인해 유지 보수에 많은 문제가 있다. 이러한 문제점을 개선한것이 JSP로 JSP는 내부적으로 서블릿 기술에 기반하고 있다.

HTTP 프로토콜과 HTTP 메서드

HTTP 프로토콜
HTTP은 비 연결(Connectionless : 클라이언트의 요청에 응답한 후 바로 연결을 끊음)과 비 상태(Stateless : 서버의 상태가 어떤지 간에 상관없이 요청을 함)의 특징
HTTP 메소드(method)
Get : 쿼리문자열로 전송요청라인의 URL뒤에 데이터를 연결하여 전송 256byte가 전송 한계

ex)

http://localhost:8080/servletMain/hello
http://localhost:8080/servletMain/hello?id=dragon

HTML 페이지
<form action=”/servletMain/lauch” method=”get”>
...
</form>

Post : 요청 몸체 데이터로 전송 전송하는 데이터 사이즈의 제한이 없음
ex)

HTML 페이지
<form action=”/servletMain/lauch” method=”post”>
...
</form>

Servlet의 패키지 및 주요 객체

패키지

javax.servlet : 패키지는 프로토콜에 독립적인 서블릿을 만들기 위한 클래스
javax.servlet.http : 패키지는 HTTP 프로토콜의 고유한 기능(GET, POST 등)을 제공

주요객체

HttpServletRequest : HTTP 요청에 대한 기능 제공
HttpServletResponse: HTTP 응답에 대한 기능을 제공
ServletConfig 객체 : 서블릿 당 ServletConfig 객체 하나 서블릿 배포시 설정된 정보를 서블릿으로 넘겨줌
ServletContext 객체 : 웹 어플리케이션 당 하나의 ServletContext 객체 하나
웹 어플리케이션의 파라미터 정보를 읽어보기 위하여 사용 서버 정보를 파악하기 위하여 사용(컨테이너의 이름 및 버전,지원하는 API 정보)

동작 원리

라이프 사이클

■init()

컨테이너 에서 서블릿 객체를 생성한 다음에 호출한다. service() 이전에 실행
서블릿을 초기화
초기화할 내용(DB 접속 등)이 있는 경우 재정의

■ service()

클라이언트의 요청 후 컨테이너에서 쓰레드를 이용하여 호출
요청의 HTTP 메소드(GET, POST등)를 참조하여 해당 메소드(doGet(), doPost() 등) 호출 판단
거의 재정의 하지 않음

■ destroy()

서블릿 종료시 호출

서블릿 매핑

■ 배포 서술자 (DD, Deployment Descriptor)

서블릿 컨테이너에 서블릿 배포 시 사용하는 XML 문서
URL과 서블릿 매핑 정보 포함
보안역할 설정, 오류 페이지 설정, 초기화 구성 및 관련 정보 설정 등

■ URL 매핑을 위한 항목

<servlet> 서블릿 내부명과 완전한 클래스명과의 매핑정보
<servlet-mapping> 서블릿 내부명과 URL 명과의 매핑정보

Servlet 실습

Hello Servlet

package kr.web.ch01;

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;

// 일반 클래스를 서블릿으로 사용할 경우 HttpServlet를 상속시켜야 한다.
@WebServlet("/helloServlet")
public class HelloServlet extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {

//		문서 타입 및 캐릭터셋 지정
		response.setContentType("text/html;charset=utf-8");
		
//		HTML 출력을 위한 출력 스트림 생성
		PrintWriter out = response.getWriter();
		out.println("<html>");
		out.println("<head><title>Hello Servlet</title></head>");
		out.println("<body>");
		out.println("처음 작성하는 servlet 입니다.");
		out.println("</body>");
		out.println("</html>");
		     
//		자원 정리
		out.close();
	}

}

Hundred Servlet

1 ~ 100의 합을 구하기

package kr.web.ch01;

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("/hundred")
public class HundredServlet extends HttpServlet {
	@Override
	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		int sum = 0;
		for (int i = 1; i <= 100; i++) {
			sum += i;
		}

		response.setContentType("text/html;charset=utf-8");

		PrintWriter out = response.getWriter();
		out.println("<html>");
		out.println("<head><title>1부터 100까지의 합</title></head>");
		out.println("<body>");
		out.println("1부터 100까지의 합은" + sum);
		out.println("</body>");
		out.println("</html>");
		out.close();
	}
}

My Info Servlet

package kr.web.ch01;

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("/myInfo")
public class MyInfoServlet extends HttpServlet {
	@Override
	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		String name = "홍길동";
		int age = 20;
		String job ="학생";
		String address = "서울시";
		
		response.setContentType("text/html;charset=utf-8");

		PrintWriter out = response.getWriter();
		out.println("<html>");
		out.println("<head><title>개인정보 출력하기</title></head>");
		out.println("<body>");
		out.println("이름 : " + name +"<br>");
		out.println("나이 : " + age+"<br>");
		out.println("직업 : " + job+"<br>");
		out.println("주소 : " + address+"<br>");
		out.println("</body>");
		out.println("</html>");
		   
		
		out.close();
	}
}

Now Servlet

package kr.web.ch01;

import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Date;

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

// 일반 클래스를 서블릿으로 사용할 경우 HttpServlet를 상속시켜야 한다.
@WebServlet("/now")
public class NowServlet extends HttpServlet {
	@Override
	public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
		Date now = new Date();
		SimpleDateFormat sf = new SimpleDateFormat("yyyy년MM월dd일 a hh:mm:ss");
		
//		문서 타입 및 캐릭터셋 지정
		response.setContentType("text/html;charset=utf-8");
		
//		HTML 출력을 위한 출력 스트림 생성
		PrintWriter out = response.getWriter();
		out.println("<html>");
		out.println("<head><title>현재 날짜와 시간</title></head>");
		out.println("<body>");
		out.println("현재 날짜와 시간 : " + sf.format(now));
		out.println("</body>");
		out.println("</html>");
		
//		자원 정리
		out.close();
	}

}

Add Servlet

두 개의 숫자 전송되면 전송된 두 개의 숫자를 더해서 결과를 구하시오
=> 5 + 2 = 7

package kr.web.ch02;

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("/add")
public class AddServlet extends HttpServlet{
	@Override
	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
response.setContentType("text/html;charset=utf-8");
		
		int num1 = Integer.parseInt(request.getParameter("num1"));
		int num2 = Integer.parseInt(request.getParameter("num2"));
		int sum = num1 + num2;
		PrintWriter out = response.getWriter();
		out.println("<html>");
		out.println("<head><title>덧셈하기</title></head>");
		out.println("<body>");
		out.println(num1 + " + " + num2 + " = " + sum);
		out.println("</body>");
		out.println("</html>");
	
		out.close();
	}
}

Add Form

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>덧셈하기</title>
</head>
<body>
<h1>덧셈하기</h1>
<form action="/ch03_JSP/add" method="get">
	첫 번째 정수 <input type="number" name="num1"><br>
	두 번째 정수 <input type="number" name="num2"><br>
	<input type="submit" value="전송">
</form>
</body>
</html>

구구단 Servlet

package kr.web.ch02;

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("/gugudan")
public class GugudanServlet extends HttpServlet {
	@Override
	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//		문서 타입 및 캐릭터 셋 지정
		response.setContentType("text/html;charset=utf-8");
//		전송된 데이터 반환
//						String ---> int 변환 실행함
		int dan = Integer.parseInt(request.getParameter("dan"));
		
//		HTML 출력을 위한 출력 스트림 생성
		PrintWriter out = response.getWriter();
		out.println("<html>");
		out.println("<head><title>구구단</title></head>");
		out.println("<body>");
		out.println(dan + "단<br>");
		out.println("-------------------<br>");
		for(int i = 1; i <=9; i++) {
			out.println(dan + "*" + i + "=" + dan*i + "<br>");
		}
		out.println("");
		out.println("</body>");
		out.println("</html>");
	
		out.close();
	}
}

구구단 Form

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>구구단</title>
</head>
<body>
<h1>구구단 단 입력</h1>
<form action="/ch03_JSP/gugudan" method="get">
	단 <input type="number" name="dan" min="2" max="9">
	 <input type="submit" value="전송">
</form>
</body>
</html>

짝/홀 Servlet

전송된 정수 값이 짝수이면 짝수입니다. 홀수이면 홀수입니다 라고 출력

package kr.web.ch02;

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("/num")
public class numServlet extends HttpServlet{
	@Override
	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
response.setContentType("text/html;charset=utf-8");
		
		int num = Integer.parseInt(request.getParameter("num"));
		
		PrintWriter out = response.getWriter();
		out.println("<html>");
		out.println("<head><title>홀/짝 구분하기</title></head>");
		out.println("<body>");
		out.println(num);
		if(num % 2 == 0) {
			out.println(" = 짝수입니다.");
		}else {
			out.println(" = 홀수입니다.");
		}
		out.println("</body>");
		out.println("</html>");
		
	}
}

짝/홀 Form

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>짝/홀 구분</title>
</head>
<body>
<h1>짝수/ 홀수 구하기</h1>
<form action="/ch03_JSP/num" method="get">
	정수 하나 입력 <input type="number" name="num"><br>
	<input type="submit" value="전송">
</form>
</body>
</html>

Board Servlet

name, title, content 를 전달 받아서 아래와 같이 출력하세요
[출력 예시]
이름 : 홍길동
제목 : 봄봄봄
내용 : 무더위 시작

package kr.web.ch03;

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("/board")
public class BoardServlet extends HttpServlet{
	@Override
	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
		
		response.setContentType("text/html;charset=utf-8");
		request.setCharacterEncoding("utf-8");
		
		String name = request.getParameter("name");
		String title = request.getParameter("title");
		String content = request.getParameter("content");
		
		PrintWriter out = response.getWriter();
		 out.println("<html>");
		 out.println("<head><title></title></head>");
		 out.println("<body>");
		 out.println("이름 : " + name + "<br>");
		 out.println("제목 : " + title + "<br>");
		 out.println("내용 : " + content + "<br>");
		 out.println("</body>");
		 out.println("</html>");
	}
}

Hello Form

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Board</title>
</head>
<body>
	<form action="/ch03_JSP/board" method="post">
	 이름 : <input type="text" name="name"><br>
	 제목 : <input type="text" name="title"><br>
	 내용 : <textarea rows="4" cols="10" name="content"></textarea>
	 <input type="submit" value="전송">
	 </form>
</body>
</html>

Greeting Servlet

package kr.web.ch03;

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("/greeting")
public class GreetingServlet extends HttpServlet{
	@Override
	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 

		response.setContentType("text/html;charset=utf-8");
		
//		post 방식으로 데이터를 전송할 경우 인코딩 타입 지정
		request.setCharacterEncoding("utf-8");
		
		String name = request.getParameter("name");
		
		PrintWriter out = response.getWriter();
		out.println("<html>");
		out.println("<head><title>Greeting</title></head");
		out.println("<body>");
		out.println(name + "님의 방문을 환영합니다.");
		out.println("</body>");
		out.println("</html>");
		  
		out.close();
	}

}

Greeting Form

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>방문 인사</title>
</head>
<body>
<form action="/ch03_JSP/greeting" method="post">
	당신의 이름은 <input type="text" name="name"><br>
	 <input type="submit" value="전송">
</form>
</body>
</html>

먼지

Lucky Things🍀

이전 포스트

TIL 0418

다음 포스트

TIL 0419

Today I Learned

[실습] To-do List

Web Application

웹어플리케이션의 구성

요청 처리 방식

Servlet 과 JSP

웹컨테이너

개발 환경 구축

구축된 프로젝트 (다이나믹 웹 프로젝트)

배포 환경(톰캣 배포시 환경)

Servlet

서블릿의 개요

HTTP 프로토콜과 HTTP 메서드

Servlet의 패키지 및 주요 객체

패키지

주요객체

동작 원리

라이프 사이클

서블릿 매핑

Servlet 실습

Hello Servlet

Hundred Servlet

My Info Servlet

Now Servlet

Add Servlet

Add Form

구구단 Servlet

구구단 Form

짝/홀 Servlet

짝/홀 Form

Board Servlet

Hello Form

Greeting Servlet

Greeting Form

TIL 0418

TIL 0422

0개의 댓글