오늘의 코딩순서
(폴더: och01)
- hello.html
- test4.0.html
(폴더: och02)
- add3.html
- color.html
- gugu.html
- board.html
- name.html
- movie.html
- num.html
- menu.html
오늘의 코딩
오늘부터 웹 프로그래밍, Servlet 시작!!+ HTML부분이 헷갈리면 0613 일지부터 복습하기
Tip) HTML의 제목은 소문자로 시작, .java파일의 제목은 대문자로 시작
och01 폴더
- hello (html 5.0)
Tip)- meta charset="UTF-8":
- <head>: 문서의 정보를 지정함
- <body>: 실제 화면에 보이는 문서 내용을 입력하는 부분
- <p>: paragraph, 문단의 약자로 하나의 문단을 만들 때 쓰이며 Enter과 기능이 비슷하다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
Hello Html<p>
Hello 안녕
</body>
</html>- test4.0 (4.0 transitional html)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>대박사건</h1>
</body>
</html>och02 폴더
- add3
Tip)- chk(): 다른 함수의 arguments 배열을 건네받아서 함수가 기대하는 것과 같은 개수의 전달인자를 건네받았는가를 검사하는 함수
- frm: form, 일반적으로 폼에 접근할 때 사용하며 id value에도 접근할 때 사용함, id 또는 name, documents.forms 컬렉션을 이용하여 접근함
- frm.num.focus(): 커서 가져다 놓기
- frm.num.value=' ': Enter로 값 입력하면 빈 공백 초기화, 즉 입력된 글자가 지워짐
- alert: 경고 알림 팝업창
- isNaN⭐⭐⭐(6/19일지 참고): 어떤 값이 NaN(Not A Number)인지 판별하는 함수, 인수로 전달된 값이 숫자가 아니라면 숫자로 강제 변환하여 검사함, if-else 혹은 for문과 함께 사용됨
- form 태그 속성
- 사용자가 입력한 내용들을 서버 쪽 프로그램으로 보내는 방법을 지정해줌
- 입력한 데이터를 서버로 전송한 뒤 전송한 데이터를 웹서버가 처리하여 결과에 따른 웹 페이지를 보여주게 만듬
- 기본형: <form [속성="속성 값"]> 여러 폼 요소</form>
- action: 폼 데이터(form data)를 서버로 보낼 때 해당 데이터가 도착할 URL을 명시
- name: 폼의 이름을 지정하며, 한 문서 안에 여러 개의 <form>태그가 있을 경우 form들을 구분하기 위해 사용함,
⭐이 값을 지정하지 않으면 값이 넘어가지 않음 매우중요! - target: <action> 태그에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정함
- value: <input> 태그의 value 속성은 <input> 요소의 초기값(value)을 명시함, value 속성은 <input> 요소의 type 속성값에 따라 다른 용도로 사용됨
- button, reset, submit : 버튼 내의 텍스트를 정의함
- hidden, password, text: 입력 필드의 초깃값을 정의함
- checkbox, image, radio: 해당 입력 필드를 선택 시 서버로 제출되는 값을 정의함
- submit
- 서버에 입력받은 데이터를 전송하기 위해 사용하는 키워드
- <input> 태그의 type속성을 submit이라고 지정해주면 자동으로 테이터를 전송할 수 있는 버튼이 생성되고, 그 버튼을 클릭하면 지정된 URL로 <form>태그 안에 입력된 값들이 'action'속성으로 지정된 서버 페이지로 전송됨
- onsubmit
- 양식 제출 이벤트가 발생할 때의 동작을 지정함
- form태그에서 onsubmit를 통해 submit를 제어할 수 있음, 때문에 대게 form 전송 직전에 form 태그 안의 데이터의 유효성을 검사하기 위해 사용함
- onSubmit이 처리되면 그 다음 action이 역할을 한다
- input: 태그는 사용자로부터 입력을 받을 수 있는 입력 필드(input filed)를 정의할 때 사용함
- return: return을 쓰면 null을 리턴하게 되는데 유효성 검사 중 null을 받으면 응답받는 입장에서 검사가 통과된 정확한 값인지 불확실해짐, 혹은 return 아래의 코드를 전부 실행하지 않고 클래스를 끝내버릴 수 있음
따라서 true와 false를 사용(+++ exit의 기능도 가지고 있음) - return true: 유효성 검사에 통과하면 submit 이벤트가 발생함
- return false: 유효성 검사에 통과하지 못하고 submit 이벤트가 실패했다는 명확한 의미 전달을 위해 사용함
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function chk() {
if (!frm.num.value) {
alert("숫자 입력 안하니?");
frm.num.focus();
return false;
}
if (isNaN(frm.num.value)) {
//**isNan: 어떤 값이 NaN(Not A Number)인지 판별하는 함수
//인수로 전달된 값이 숫자가 아니라면 숫자로 강제 변환하여 검사
alert("숫자가 뭔지 모르니! 헐?");
frm.num.focus();
frm.num.value = ""; //입력된 글자 지우기
return false;
}
return true;
}
</script>
</head>
<body>
<h1>숫자를 입력하세요</h1>
<form action="Add3" name="frm" onsubmit="return chk()">
숫자 : <input type="text" name="num"><p>
문자 : <input type="text" name="han"><p>
<input type="submit" value="확인">
<!-- 이곳의 name에 넣은 frm과 num이 위에서 적용 -->
</form>
</body>
</html>
Tip)
- ⭐⭐⭐⭐⭐form action에 넣은 변수 이름과 .java파일의 이름은 같아야함!!! 이거 틀리면 web.xml에서 다시 편집하고 rename도 해야함!
- response.setContentType("text/html;charset=utf-8")
: response.setCharacterEncoding("utf-8")(아래 board 문제 참고)만 이용하면 한글이 깨져서 나옴, 이는 브라우저마다 기본적으로 문자코드를 해석하는 default가 다르기 때문
=> 이를 위해 브라우저에게 UTF-8 문자코드를 사용하겠다는 명령어임
+++ text/html: 타입을 정해줌 - doGet: Get 요청이 들어왔을때 default로 실행되는 메소드, 일반적으로 request 와 reponse를 매개변수로 넘겨줌, 정확히는 다른 곳으로 정보를 넘겨주기 위해 request 객체의 속성(attribute)을 사용함
- request: 데이터를 주고 받기 원하는 과정이 요청이며 자바는 요청도 객체로 만들어서 전달됨, 이때의 객체가 바로 request 객체임(사용자의 요청)
- response: 서버에서는 데이터에 부합하게 가공해서 사용자에게 적절하게 응답하는데 이러한 응답을 response라고 하며, 이를 적절하게 만든 것을 response 객체라고 함 (웹서버의 응답)
- Integer.parseInt: 문자열을 숫자로 변환시킴
- request.getParameter: 웹 환경은 HTTP 프로토콜 위에서 동작함, 이 HTTP가 요청한 파라미터 값을 얻기 위해 사용하는 메소드
형식: int 나 String 변수 = request.getParameter(가져올 파라미터 이름) - out.print
- out은 기본 객체, out.print는 system.out의 출력방식과 비슷하지만 참조하는 타입이 다름
System.out은 PrintStream을 참조하지만, out은 JspWriter를 참조함 - JSP 페이지에 작성된 내용들은 최종적으로 출력 결과를 생성하여 클라이언트(브라우저) 측으로 전송(출력)하게 되는데, 이때 출력은 out 객체를 통해 하게 됨
- out은 기본 객체, out.print는 system.out의 출력방식과 비슷하지만 참조하는 타입이 다름
- PrintWriter: 바이트를 문자 형태로 가지는 객체로 바꿔줌,
웹 브라우저에 데이터를 전송하려면 getWriter()를 호출해서 문자열 데이터를 출력할 수 있는 PrintWriter를 가져오고 print()나 println()을 이용해서 전송
PrintWriter: Print 메소드를 모두 구현하여 Char 단위 출력 메소드 print를 사용할 수 있도록 구현된 클래스
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/html;charset=utf-8");
System.out.println("doGet start...");
int num = Integer.parseInt(request.getParameter("num"));
// num의 누적분을 return 목표
String han = request.getParameter("han");
int sum = 0;
for (int i = 1; i <=num ; i++) {
sum += i;
}
response.setContentType("text/html;charset=utf-8");
// browser에 Display 하기 위한 방법
PrintWriter out = response.getWriter();
// browser에 상세 내용을 보여줌
out.println("<html><body>");
// out.println("<h1>1부터 "+num+"까지 합계</h1>");
out.printf("<h1>han Test : %s</h1>",han);
out.printf("<h1>1부터 %d까지 합계</h1>",num);
out.println(sum);
out.println("</body></html>");
out.close();
}
- Color(현장HW) => 제목 대문자 필수!!!
Tip)
- <br>
- 텍스트에서 줄을 바꾼다는 목적의 줄바꿈(line break)을 나타내는 태그
- 일반적으로 다음 텍스트를 새 줄로 시작함으로써 시, 주소, 코드 등에 표현할 때 유용
- 줄을 바꿀 위치에 <br> 태그를 사용, 닫는 태그는 없음
- <br>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>좋아하는 색을 선택하세요</h1>
<form action="Color">
빨강<input type="radio" value="red" name="color" checked="checked"><br>
주황<input type="radio" value="orange" name="color"><br>
노랑<input type="radio" value="yellow" name="color"><br>
초록<input type="radio" value="green" name="color"><br>
파랑<input type="radio" value="blue" name="color"><br>
남색<input type="radio" value="navy" name="color"><br>
보라<input type="radio" value="violet" name="color"><br>
<input type="submit" value="선택완료"><br>
</form>
</body>
</html>/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String color = request.getParameter("color");
PrintWriter out = response.getWriter();
out.printf("<html><body bgcolor= '%s'>",color);
out.println("</body></html>");
out.close();
}
- ⭐⭐⭐⭐⭐gugu(현장HW) (면접 코딩 test에 나올 수 있음, 기본적인 것을 알고 있는가 시험하는 문제)
Tip)- option
- option태그의 selected 속성은 페이지가 로드될 때 옵션 중에서 미리 선택되어지는 옵션을 명시함
- 대부분은 value에 값을 부여해서 원하는 값을 주입할 수 있지만, option은 value가 존재하지 않기 때문에 작동하지 않음, 이는 for문 같은 반복문을 통해 해결해야 함
- +++) <option value="2">2단</option> 에서 value값은 프로그래머들이 보는 값, 최소한으로 정리해서 넣을것/ 괄호 밖의 value값은 사용자들이 보는 값==> 이 둘을 잘 구분하고 섞어쓰지 않도록 주의
- option
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>보고싶은 구구단은?</h1>
<form action="GuGu">
<select name="num">
<option value="2">2단</option>
<option value="3">3단</option>
<option value="4">4단</option>
<option value="5">5단</option>
<option value="6">6단</option>
<option value="7">7단</option>
<option value="8">8단</option>
<option value="9">9단</option>
</select><p>
<input type="submit" value="선택완료">
</form>
</body>
</html> protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
int num = Integer.parseInt(request.getParameter("num"));
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.println("<html><body>");
out.print("<h1>구구단 "+num+"단</h1>");
for(int i = 1; i<=9; i++) {
out.printf("%d * %d = %d<br>",num,i,(num*i));
}
out.print("</body></html>");
out.close();
}
- board
Tip)- tr (table row) : 행
- th (table heading) : 행, 열의 제목
- td (table data) : 행의 내용
- ⭐⭐⭐⭐⭐colspan=열 합치기 ex) colspan= "100" : 100칸 열병합
+++) rowspan: 행 합치기 ex) rowspan="3" : 3칸 행병합
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function chk() {
if (!frm.title.value) {
alert("제목은 ?");
frm.title.focus();
return false;
}
if (!frm.writer.value) {
alert("작성자는 ?");
frm.writer.focus();
return false;
}
if (!frm.content.value) {
alert("내용은 ?");
frm.content.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<h1>게시판</h1>
<form action="Board" name="frm" method="post" onsubmit="return chk()">
<table border="1">
<tr>
<td>제목</td>
<td><input type="text" name="title"></td>
</tr>
<tr>
<td>작성자</td>
<td><input type="text" name="writer"></td>
</tr>
<tr>
<td>내용</td>
<td><textarea cols=40 rows=10 name="content"></textarea></td>
</tr>
<tr>
<td colspan="100"><input type="submit" value="완료"></td>
</table>
</form>
</body>
</html>
Tip)
- response.setCharacterEncoding("utf-8")
- JSP (JavaServer Pages)나 Servlet에서 응답의 문자 인코딩을 설정하는 메서드
- JSP나 html 파일에서 폼 태그에 입력한 값을 전송할 때 get방식과 post방식으로 나뉨
- get
- GET 요청은 주로 서버에서 데이터를 가져올 때 사용됨
- 사용자가 웹 페이지를 요청할 때 GET 요청이 발생하는데, 이 경우 서버는 요청된 데이터를 클라이언트로 전송하며, response.setCharacterEncoding("utf-8")을 설정하면 서버가 클라이언트로 전송하는 데이터가 UTF-8로 인코딩됨
- get 방식으로 보내진 한글은 tomcat이 기본적으로 UTF-8 문자코드가 적용되어 있어서 자동으로 한글 처리를 해주기 때문에 한글이 깨지지 않음
- post
- POST 요청은 주로 서버로 데이터를 보낼 때 사용됨
- 사용자가 웹 폼을 제출할 때 POST 요청이 발생하는데, 이 경우 서버는 클라이언트가 보낸 데이터를 처리한 후 응답을 보냄냄. 이때 response.setCharacterEncoding("utf-8")을 설정하면 서버가 클라이언트로 전송하는 응답 데이터가 UTF-8로 인코딩됨
- post 방식으로 보내는 값이 '한글'일 경우 깨지지 않게 전달하여 출력하기 위해 사용하는 것
- get
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setCharacterEncoding("utf-8");
String title = request.getParameter("title");
String writer = request.getParameter("writer");
String content = request.getParameter("content");
response.setContentType("text/html;charset=utf-8");
//한글로 제대로 출력되도록 해줌
PrintWriter out = response.getWriter();
out.println("<html><body><h1>게시판</h1>");
out.println("제목 : " + title +"<p>");
out.println("작성자 : " + writer +"<p>");
out.println("작성일 : " + new Date() +"<p>");
out.println("내용 <br><pre>" + content + "</pre>");
out.close();
}
- movie
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>좋아하는 영화를 모두 선택하세요</h1>
<form action="Movie" method="post">
배트맨<input type="checkbox" name="movie" value="배트맨"><br>
슈퍼맨<input type="checkbox" name="movie" value="슈퍼맨"><br>
호빵맨<input type="checkbox" name="movie" value="호빵맨"><br>
아이언맨<input type="checkbox" name="movie" value="아이언맨"><br>
스파이더맨<input type="checkbox" name="movie" value="스파이더맨"><br>
<input type="submit" value="체크완료"><br>
</form>
</body>
</html>
Tip)
- length: 함수가 건네받기를 기대하는 전달인자의 개수를 반환함
즉, 함수 매개변수 목록에 선언된 매개변수의 개수를 반환함 - String[]: 배열 출력 선언, String의 배열화, 배열 출력 선언
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("utf-8");
String[] movie = request.getParameterValues("movie");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.println("<html><body><h1>당신이 좋아하는 영화는</h1>");
for (int i = 0; i < movie.length; i++) {
out.println(movie[i] + "<br>");
}
out.println("</body></html>");
out.close();
}
- name (HW)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function chk() {
if(!frm.name.value) {
alert("이름 ?");
frm.name.focus();
return false;
}
if(!frm.addr.value) {
alert("주소 ?");
frm.addr.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<h1>이름과 주소를 입력하세요</h1>
<form action="Name3" name="frm" onsubmit="return chk()">
이름 : <input type="text" name="name"><p>
주소 : <input type="text" name="addr"><p>
<input type="submit" value="입력완료">
</form>
</body>
</html>
- num (HW)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function chk() {
if (!frm.num1.value){
alert("첫번째 숫자 입력 안하니?");
frm.num1.focus();
return false;
}
if (isNaN(frm.num1.value)) {
alert("첫번째 숫자가 뭔지 모르니! 헐");
frm.num1.focus();
frm.num1.value = "";
return false;
}
if (!frm.num2.value){
alert("두번째 숫자 입력 안하니?");
frm.num2.focus();
return false;
}
if (isNaN(frm.num2.value)) {
alert("두번째 숫자가 뭔지 모르니! 헐");
frm.num2.focus();
frm.num2.value = "";
return false;
}
return true;
}
</script>
</head>
<body>
<h1> 연산할 두 숫자를 입력하세요</h1>
<form action = "Num" name="frm" onsubmit="return chk()">
첫번째 숫자 : <input type="text" name="num1"><p>
두번째 숫자 : <input type="text" name="num2"><p>
<input type="submit" value="확인">
</form>
</body>
</html>
- menu (HW)
Tip)- multiple
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>좋아하는 메뉴</h1>
<form action = "Menu">
<select name="menu" multiple="multiple" size="5">
<!-- multiple은 ctrl키를 누른 상태에서 옵션을 눌러야 다중선택이 된다 -->
<option value="짜장">짜증 날때</option>
<option value="우동">우울 할때</option>
<option value="짬뽕">해장 할때</option>
<option value="만두">공짜 필요</option>
<option value="탕수육">여유 만만</option>
</select><p>
<input type="submit" value="확인">
</form>
</body>
</html>
오늘의 코딩 포인트
WAS: Wep And application Server
url에서 ?를 기준으로 앞은 URL, 뒤는 parameter임
JSP 기본용어 정리
| 기본용어 | 뜻 |
| JSP | - 동적인 웹 페이지를 개발하기 위한 웹 프로그래밍 기술 - 자바 언어를 사용하여 서버측에서 웹 페이지들을 생성해 웹 브라우저로 전송해줌 - 짧은 코드로 동적인 웹 페이지를 생성할 수 있음 - 기본적인 예외는 자동으로 처리됨 - 많은 확장 라이브러리를 사용할 수 있음 - 스레드 기반으로 실행되어 시스템 자원을 절약해줌 스레드?: Thread, 어떠한 프로그램 내에서, 특히 프로세스 내에서 실행되는 흐름의 단위 |
| Server | 웹에서 서비스를 제공하는 컴퓨터 시스템 |
| Web Server | - 사용자로부터 HTTP를 통해 요청을 받거나, 웹 컨테이너가 전달해준 결과물을 정적인 페이지로 생성하여 사용자에게 응답해주는 소프트웨어를 말함 - 웹 페이지는 주로 HTML, CSS, 자바스크립트 등으로 구성 ex) 아파치 |
| IP ⭐⭐⭐⭐⭐ | 네트워크 상에서 컴퓨터를 식별할 수 있는 주소 |
| DNS ⭐⭐⭐⭐⭐ | IP 주소를 인간이 쉽게 외우도록 맵핑한 문자열 |
| PORT ⭐⭐⭐⭐⭐ | 컴퓨터 사이에서 데이터를 주고받을 수 있는 통로 IP 주소가 컴퓨터를 식별할 수 있게 해준다면, Port번호는 해당 컴퓨터의 구동되고 있는 프로그램을 구분할 수 있는 번호, 즉 하나의 서버에서 어플리케이션을 구별하기 위한 식별번호 우리가 이용하는 인터넷상의 모든 서비스는 IP 주소와 함께 포트 번호까지 지정해야 제대로 요청을 전달할 수 있음 |
| Protocol |
네트워크를 통해 컴퓨터들이 정보를 주고받는 절차 혹은 통식 규약 (0708일지 참고)⭐ |
| HTTP (Hyper Text Transfer Protocol) ⭐⭐⭐⭐⭐ |
- 월드 와이드 웹의 토대 - 웹 서버와 사용자 사이의 통신을 위해 사용하는 통신 프로토콜 - 사용자가 요청하면 웹 서버가 응답하는 단순한 구조의 프로토콜 - 하이퍼텍스트 링크를 사용하여 웹 페이지를 로드하는 데 사용됨 - 네트워크 장치 간에 정보를 전송하도록 설계된 애플리케이션 계층 프로토콜이며 네트워크 프로토콜 스택의 다른 계층 위에서 실행됨 ++ HTTPS는 암호화된 HTTP |
| FTP (File Transfer Protocol) |
네트워크를 통해 컴퓨터들이 정보를 주고받는 절차 혹은 통식 규약 |
| SMTP (Simple Mail Transfer Protocol) |
인터넷을 통해 이메일 메시지를 보내고 받는 데 사용되는 통신 프로토콜 |
| POP (Post Office Protocol) |
Mail 서버를 액세스하여 e-mail을 수신하기 위한 프로토콜 |
| DHCP (Dynamic Host Configuration Protocol) |
해당 IP(인터넷 프로토콜) 주소와 기타 관련 구성 정보 ex) 서브넷 마스크 및 기본 게이트웨이)를 IP 호스트에 자동으로 제공하는 클라이언트/서버 프로토콜 |
| Hypertext | - 쉽게 말하면 다른 문서와 쉽게 연결이 되도록 한 '링크'의 모음으로 구성된 문서 - 하이퍼 텍스트에는 하이퍼링크라고 하는 다른 문서에 대한 참조 정보가 들어있는데, 이 하이퍼링크는 여러 개의 문서를 한 곳에 담아 거대한 정보를 가진 하나의 문서가 되도록 할 수 있음, 이런 하이퍼 텍스트를 작성하는데 사용되는 전용 기술 언어가 HTML |
| Web Application | - 웹을 기반으로 작동되는 프로그램 - 웹 서버는 HTML 문서 파일을 찾아서 보내주는 일 뿐만아니라, HTML 문서를 생성하는 프로그램을 호출해서 그 프로그램의 실행결과를 보내주는 일도 하는데, 이때 호출되는 프로그램을 웹 애플리케이션 이라고 함 - 웹 애플리케이션이 생성하는 HTML 문서를 동적 HTML 문서라하고, 웹 서버 쪽에 파일 형태로 저장되어 있는 HTML 문서를 정적 HTML 문서라고 함 |
| WAS (Web Application Server) |
- 웹 애플리케이션이 실행될 수 있는 환경을 제공하는 소프트웨어 - 컴퓨터에서 운영체제와 비슷한 역할을 하는 소프트웨어라 할 수 있음 - WAS는 웹 서버와 웹 컨테이너를 포함한 개념 ex) 톰캣, 웹로직, Jboss |
| Component | - 데이터들을 조작하는 행위로 구성된 재사용 가능한 모듈을 뜻함 - 복잡한 비즈니스 로직을 구현하는 기능을 웹 페이지의 화면 디자닝과 분리해내어, 웹페이지 디자이너와 프로그래머가 각자 해야 할 영역을 명확하게 구별시킬수 있게 함 - JSP 컴포넌트 기반 구현을 위해서는 서버 측에서 요청한 데이터 처리가 가능해야함 이를 위해 비즈니스 로직 부분은 자바빈즈 컴포넌트로 개발하며, 프레젠테이션은 JSP로 개발함 |
수업교재
02장. Servlet 기초
1. Servlet 개념
1. 서블릿이란?
- 웹 서버측(사이트)에서 동적인 페이지를 자바로 구현한 서버측 프로그램
- JSP 표준이 나오기 전에 만들어진 표준으로, 자바에서 웹 애플리케이션을 개발할 수 있도록 하기 위해 만들어졌으며, 자바클래스를 웹에서 호출 및 실행할 수 있도록 한 표준
- 서버 측에서 실행되면서 클라이언트의 요청에 따라 동적으로 서비스를 제공하는 웹 애플리케이션 컴포넌트 (응답 : HTML 형식)
- 자바 플랫폼에서 컴포넌트 기반의 웹 애플리케이션을 개발하는 핵심 기술 (동적 웹 애플리케이션 컴포넌트)
- 컨테이너 종류에 상관없이 실행됨 (플랫폼 독립적)
- 독자적으로 실행되지 못하고 톰캣과 같은 JSP/Servlet 컨테이너에서 실행
- 자바로 만들어져 자바의 특징(객체 지향)을 가짐
- 모든 메소드는 스레드로 동작됨
- JSP 페이지처럼 화면에 내용을 표시할 목적으로 사용하는 것이 아니라 MVC 패턴에서 로직인 모델(Model)과 화면에 결과를 표시하는 view 사이에서 제어를 하는 컨트롤러로 사용됨
- java 파일이기 때문에 src/main/java 폴더에 위치 => webapp 폴더 - HTML 문서
- javax.servlet.http.HttpServlet 클래스로부터 상속받아서 작성
- 위의 클래스는 톰캣의 servlet-api.jar에 포함
2. 서블릿의 역할
- 통신 지원: 클라이언트와 통신하려면 서버는 특정 포트로 소켓을 열고 I/O 스트림을 생성하는 등 복잡한 과정이 필요하다. 서블릿 컨테이너는 이 과정을 간단히 해주는 API를 제공함
- 생명주기⭐⭐ 관리: 서블릿 객체의 생성, 초기화, 호출, 종료하는 주기를 관리함
- 서블릿 객체를 생성하고, 서블릿을 인스턴스화 후 초기화하고, 요청에 맞는 적절한 메서드를 호출하며, 응답한 후에는 가비지 컬렉션을 통해 객체를 소멸(종료)시킴
- 서블릿 객체는 Singleton으로 관리되는데, 고객의 요청이 올 때마다 계속 객체를 생성하는 것은 비효율적이기 때문. 따라서 최초 로딩 시점에 서블릿 객체를 미리 만들어주고 Singleton을 이용해 재활용함.
이로 인해 모든 고객의 request들은 서블릿 객체 인스턴스에 접근하게 되는데, 이때문에 공유 변수 사용에 주의해야 함
- 멀티스레딩 관리: 서블릿 요청들은 스레드를 생성해 처리함. 즉, 멀티스레드 방식으로 여러 요청을 동시에 처리할 수 있음
- 스레드 Thread
- 브라우저가 WAS에게 보낸 요청request에 맞게 서블릿 객체를 생성해서 비즈니스가 로직을 수행하도록 담당함
- 자바에서 자주 사용하는 메인 메서드 또한 main이라는 이름의 스레드가 실행되는 것임
- 스레드가 없다면 Java application 실행이 불가능함
- 한 번에 하나의 코드 라인만 수행되며, 동시 처리(수행)이 필요하다면 스레드를 추가 생성하면 됨
- 멀티 스레드 Multi-thread
- 단일 요청이 들어올 경우 스레드를 하나만 사용하면 되지만, 다중 요청이 들어오면 뒤에 들어오면 뒤에 들어온 request는 앞서 요청된 스레드의 사용이 끝날때까지 대기해야함
여기서 기존의 스레드가 로직을 수행하다가 오류를 발생시킬걍우 뒤의 request들을 처리할 수 없는 문제가 생김 ==> 이 때문에 요철이 올 때마다 스레드를 새로 생성하는 방법을 사용함, 이 방법을 쓰면 하나의 request에서 오류가 발생하더라도 다른 request는 영향을 받지 않음 - 장점
- 동시 요청을 처리할 수 있음
- 리소스(CPU, 메모리)가 허용할 때까지 처리 가능
- 하나의 스레드가 지연되어도, 나머지 스레드는 정상 작동함
- 멀티 스레드에 대한 부분은 WAS가 처리하기 때문에, 개발자는 멀티 스레드 관련 코드를 신경쓰지 않아도 됨
- 단점
- 새 스레드의 생성 비용이 매우 비쌈
- 고객의 요청이 올 때마다 스레드를 생성하면 응답속도가 늦어짐
- context switching 비용이 발생함
: 스레드는 동시에 실행되는 것처럼 보이지만, 실상은 실행 속도가 빠르기 때문에 동시에 수행되는 것처럼 보이는 것. 때문에 여러개의 스레드를 사용하면 왔다갔다 하면서(switching) 실행할 때 많은 비용이 발생함 - 생성에 제한이 없기 때문에, 고객의 요청량이 매우 많아지면 CPU와 메모리가 임게점을 넘어 서버가 죽을 수 있음
- 멀티 환경이기 때문에 Singleton 객체는 주의해서 사용해야 함
- 보완방법: 스레드 풀 Thread pool
- 스레드 풀을 사용하면 필요한 스레드를 스레드 풀에 보관하고 관리하고 사용한 뒤, 사용이 종료되면 스레드 풀에 해당 스레드를 반납함
↳ 최대 스레드가 모두 사용중이어서 스레드 풀에 사용할 수 있는 스레드가 없으면, 기다리는 요청을 거절하거나 특정 숫자만큼만 대기하도록 설정하는 것으로 해결 가능함 - 스레드 풀에 생성 가능한 스레드의 최대치를 관리할 수 있음 (톰캣은 최대 200개 기본설정, 변경 가능)
- 장점
- 스레드가 미리 생성되어 있으므로 스레드를 생성하고 종료하는 비용이 절약됨
- 생성 가능한 스레드의 최대치가 있으므로 요청이 많아도 기존 요청을 안전하게 처리할 수 있음
- 스레드 풀을 사용하면 필요한 스레드를 스레드 풀에 보관하고 관리하고 사용한 뒤, 사용이 종료되면 스레드 풀에 해당 스레드를 반납함
- 단일 요청이 들어올 경우 스레드를 하나만 사용하면 되지만, 다중 요청이 들어오면 뒤에 들어오면 뒤에 들어온 request는 앞서 요청된 스레드의 사용이 끝날때까지 대기해야함
- 스레드 Thread
- 선언적인 보안 관리 및 JSP 지원: 보안 기능을 지원하므로 별도로 구현하지 않아도 됨
3.작성 과정
1) 서블릿 규칙에 따라 자바코드 생성
2) 작성한 코드를 컴파일해서 웹프로젝트 WEB-INFclasses 폴더에 복사
3)경우에 따라서 web.xml 파일에서 서블릿을 주소와 매핑
4) 웹 컨테이너 재실행
4. 서블릿 선언
1. 매개변수(parameter-폼안에서 name을 가진 객체, 또는 URL의 ?다음의 데이터) 처리방법
- 단일 항목인 경우: request 객체의 getParameter(“매개변수이름”)으로 처리
- 배열인 경우: request 객체의 getParameterValues(“매개변수이름”)으로 처리
2. 요청시 응답
- 요청시 응답은 response 객체를 이용
- 출력을 하고자 하는경우라면response객체의getWriter()를호출해서 PriterWriter객체를받은후print 또는println메서드를이용해서html 코드를리턴(print는이어지는문장을계속작성하고자하는경우 사용하고println은하나의문장을작성하기위해서사용)
3. 특정 페이지로 이동
- request 공유RequestDispatcher변수= request.getRequestDispatcher(“이동할페이지"); 변수.forward(request, response);
- request 공유하지않고이동 response.sendRedirect(“이동할 페이지”)
5. 서블릿 요청처리
- 클라이언트의 요청방식에 따라 doGet 이나 doPost 메서드를 재정의해서 처리
- service 메서드를 재정의해서 사용할 수 있는데 이 메서드는 get 방식이나 post 방식 상관없이 호출되며 이 메서드가 호출되면 doGet이나 doPost 메서드는 호출되지 않음
- 서블릿에서 요청을 처리하기 위해 오버라이딩한 메서드는 request 객체를 이용해서 웹 브라우저의 요청정보를 읽어오던가 아니면 response를 이용해서 응답을 전송
- 응답을 전송하고자 하는 경우는 response 객체의 setContentType() 메서드를 이용해서 타입과 인코딩 방식을 지정.
- 웹 브라우저에 데이터를 전송하려면 getWriter()를 호출해서 문자열 데이터를 출력할 수 있는 PrintWriter를 가져오고 print()나 println()을 이용해서 전송하면 됨
6. 서블릿 처리순서
- 클라이언트에서 서블릿 요청이 들어오면
- 서버에서 서블릿 컨테이너를 만들고 스레드 생성
- 요청 시 마다 스레드 생성
- 서블릿 컨테이너는 스레드를 가동하여 서블릿 객체 생성
- 서블릿 객체의 실행이 종료되면 스레드 종료되고 반환
- 서블릿 실행 결과가 웹 서버에 전송
- 이 결과를 웹 서버가 웹 브라우저에게 전송
2. 서블릿 호출 방법⭐⭐⭐⭐⭐
1.Get 방식⭐⭐⭐⭐⭐
- 주소에 매개변수를 붙여서 호출하는 방식
- 주소와 매개변수를 붙여서 주소 표시줄에 입력하는 방법 (?로구분)
- a 태그를 이용해서 페이지를 요청하는 경우
- 자바스크립트를 이용해서 요청하는 경우
- 폼에서 명시적으로 GET 방식으로 요청하는 경우
- 매개변수의 데이터는 4K 이내이며 보안성이 없음
- 폼에서 사용하면 처리가 지연되는 경우 재요청
2. Post 방식⭐⭐⭐⭐⭐
- 매개변수를 본문에 포함시켜 전송하는 방식
- 폼에서 명시적으로 POST 방식으로 요청
- 데이터의 크기에 제한이 없기 때문에 이미지 파일도 전송 가능함
- URL에 표시가 되지 않으므로 보안성이 우수함
오늘의 숙제
- Name3.java==> 이름, 주소 입력하면 연개소문님은 평양성에 사시는 군요 나오게하기
>>내가 푼 것
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String name = request.getParameter("name");
String addr = request.getParameter("addr");
PrintWriter out = response.getWriter();
out.println("<html><body>");
out.printf(name + "님은 ");
out.printf(addr + "에 사시는군요");
out.println("</body></html>");
out.close();
}
>>선생님의 답(맞았지만 순서가 달라 참고용으로 기재)
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name = request.getParameter("name");
String addr = request.getParameter("addr");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.println("<html><body>");
out.printf(name + "님은 " + addr + "에 사시는군요");
out.println("</body></html>");
out.close();
}- Num.java ==> 각 숫자 사칙연산 나오게 하기
>>내가 푼 것
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
int num1 = Integer.parseInt(request.getParameter("num1"));
int num2 = Integer.parseInt(request.getParameter("num2"));
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.println("<html><body><h1>연산결과</h1>");
out.printf("덧셈 : %d + %d = %d<br>" , num1, num2,(num1+num2));
out.printf("뺄셈 : %d - %d = %d<br>" , num1, num2,(num1-num2));
out.printf("곱셈 : %d * %d = %d<br>" , num1, num2,(num1*num2));
out.printf("나눗셈 : %d / %d = %d<br>" , num1, num2,(num1/num2));
}
>>선생님의 tip: 계산이 복잡해지면 변수명을 선언하여 넣고, 복잡하지
- Menu.java==> 선택한 것들 다 나오게 하기
예시) 좋아하는 음식
짜장
짬뽕
탕수육
>>내가 푼 것
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/html;charset=utf-8");
String[] menu = request.getParameterValues("menu");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
out.println("<html><body><h1>좋아하는 음식</h1>");
for (int i=0; i < menu.length; i++) {
out.println(menu[i] + "<br>");
}
out.println("</body></html>");
out.close();
}
>>선생님의 답(맞았지만 순서가 달라 참고용으로 기재)
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String[] menu = request.getParameterValues("menu");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.println("<html><body><h1>좋아하는 음식</h1>");
for (int i=0; i < menu.length; i++) {
out.println(menu[i] + "<br>");
}
out.println("</body></html>");
out.close();
}'JSP > Java Script' 카테고리의 다른 글
| 2024_07_11_목 (0) | 2024.07.11 |
|---|---|
| 2024_07_10_수 (0) | 2024.07.10 |
| 2024_07_08_월 (0) | 2024.07.08 |
| 2024_06_21_금 (0) | 2024.06.21 |
| 2024_06_20_목 (0) | 2024.06.20 |
