배움 __IL/TIL 1기

TIL : 20번째- 221226 [12-5-월]

Mo_bi!e 2022. 12. 26. 19:32

I. 서블릿

1.서블릿을 이용한 웹개발 실습 - 출력

(1) 실습

지금 부터는 메모장으로 이용하기 보다 이클립스로 유용하게 이용이 가능하다. 이전시간에는 정적웹이었다면 이번에는 동적인 웹으로 실습해본다.

 

package com.newlecture.web;

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

import jakarta.servlet.ServletException;
import jakarta.servlet.ServletRequest;
import jakarta.servlet.ServletResponse;
import jakarta.servlet.http.HttpServlet;

public class HelloServlet extends HttpServlet {

	
	@Override
	public void service(ServletRequest request,
			ServletResponse response) 
					throws ServletException, IOException {
		// TODO Auto-generated method stub
	
	
//		response.getOutputStream() //바이너리 경우
		
		PrintWriter out = response.getWriter(); //문자열의 경우
//		PrintStream out = new PrintStream(response.getOutputStream()); //위와 어느정도 같음
		//같은데 두개 차이가있다. writer는 다국어 모드이다.
		//스트림은 유니코드가 아니다. 과거 다국어 어려움 그래서 새로운 프린트객체가 프린트 라이터계열
		
		for(int i = 0 ; i < 10 ; i++)
			out.println("Hello Servlet");
				
	
	}
	
	
	
	
}

이렇게 하고 저장하는 순간 컴파일 필요없다. 저장하면 자동으로 된다.

1. 컴파일 결과물에 3. 톰캣실행 에 2. 옮기기'배포'라고 한다. (서버에 옮기는 작업)

 

1. 컴파일 > 2. 배포 >

3. 서버 켬(톰캣) >

4. 브라우저 실행 > 5. 주소입력 [매번 자동 암기]

 

1)한국어 설정 

 

2) response의 여러가지 방식

//		response.getOutputStream() //바이너리 경우
		
		PrintWriter out = response.getWriter(); //문자열의 경우
//		PrintStream out = new PrintStream(response.getOutputStream()); //위와 어느정도 같음
		//같은데 두개 차이가있다. writer는 다국어 모드이다.
		//스트림은 유니코드가 아니다. 과거 다국어 어려움 그래서 새로운 프린트객체가 프린트 라이터계열
		
		String c = request.getParameter("c");
		//왜 문자열로?
		//모든 사용자의 request는 문자열로 받기 때문이다.

getOutputStream()은 바이너리 파일(원시)일 경우이다.

printWriter는 다국어 모드(유니코드) / printStream은 유니코드가 아니다.

 

 

 

(2) 퀴즈 

<서블릿의 실행 순서?> [https://kgvovc.tistory.com/26]

서블릿의 객체화 작업은 톰캣이한다.

 

서블릿 실행 순서

서블릿 실제 실행주체는 톰캣이다.

톰캣이 실행위해 객체화 할 때, 메모리에 올려야 사용가능하다

1. 이 경우 메모리는 ( 클라이언트로 부터 최초요청을 받았을 때  ) 올라간다.

2. 메모리 올리는 것 누구? 톰캣(서블릿컨테이너) 이 함

3. 실행은 누구? 톰캣

4. 실행 언제 함? web.xml 읽었을 때 (정확한건 아님), 컴파일에 담음

 

5. <load-on-startup> 얘는 요청이 왔을 때 얘를 우선적으로 객체생성을 있다.

실행을 원하는 서블릿 우선적으로 실행해주는 것이다. 

(예컨데 인코딩 최초설정으로도 가능하다) 

 

6. 사용자 요청으로 hello.txt 가 들어 옴 , 이경우 nana라는 서블릿 읽어옴 , 이것으로 실행 함 

 

- ETC.이 경우 main함수가 없는데, override된 상태이다. 즉 톰캣 안에 main함수가 있다.

 

(3) web-xml 과 annotation 

XML VS Annotation방법이 있다.

후자의 장점이 좋다고 생각하면 후자를 해야한다.

장1 : 코드 량 적음

장2 : 더 좋은 점은 설정이 용이하다. 간단하고, 다른파일에 갈 필요가 없다.

결국 Annotation가능하면 XML을 덜 쓴다.

 

다만 전자 XML 장점은 수정할 때 매핑 정보, 객체생성 소스코드없이 이용하고, 다른 서블릿으로 손쉽게도 바꿀수있다.

만약 객체를 텍스의 수정만을 가능할 때는 XML이 낫다

 

최근에는 후자 장점이 더 크게 반영되고있다.

 

--

(4) 실행

이제 F11 로 실행 > 서블릿 실행할 수있는 종류가 나열됨 (sever type)

이 경우 톰캣은 was의 종류 중 하나인데 우리는 톰캣사용

 

이렇게 되면 알아서 다 됨

앞서 했던 [ 컴파일 > 배포 > 서버 켬(톰캣) > 브라우저 실행 > 주소입력 ] 한번에 다 됨.

 

2. 서블릿을 이용한 웹개발 실습 - 입력

(1)

달랑 hello 10번뛰울거면 동적으로 할필요가없다.

이번에는 사용자가 입력할수있는 방법을 보자

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<a href="/hello">hello</a> 
	<!--href는 입력이고   -->
	<!-- /hllo 는 출력이다.  -->
	
</body>
</html>

이 경우 index.html 은 web-inf에 넣으면 안된다 접근 못함

 

project 세팅에서 context root를 없애준다.

만약 있으면 index.html을 실행하면 root디렉토리가 존재한다
root 디렉토리를 없애면 그 디렉토리 없이 해당 index.html을 별도의 디렉토리가 없이 바로 접근이 가능하다.

有라면 webPrj => index.html (/hello) => java (@webServlet ("/hello") 순서로 어노테이션을 설정해준다.

 

삭제의 이유는 url을 다 입력하기 번거롭기 때문이고(localhost로 배우는 과정에서),

설정하는 경우는 여러사람이서 공동으로 작업할때 충돌방지하는 용도이다.

 

 

 

---

(2)

달라고 하는건 get요청인데 문서를 달라고하는 것이다

달라고 할 때 을 전달할 수있다.

 

카페가서 커피달라고 할때 샷추가, 빼기, 물추가 등 옵션을 말 할 수있다.

이것처럼 달라고 할 때 서버가 안들어줄 때도 있다 (서버 제공하는 마음대로)

 

 

"/hello?c=5"가 추가될수있다

여기서 옵션을 추가하는것이다.

c == count 의미이다.

c를 줄인이유 url특성상 길이 제한 때문이다.

값을 실어나르는데 적절하지 않다. 간단한 옵션이기 때문에 줄여서 전달한다.

 

커피 주문시 옵션은 주문할때 하는데, 뒤에 사람들 서 있는데 회원가입하고 멤버십등록은 카운터에서 안하고 빼서 한 다음에 제출을 추후에한다. 즉 긴 데이터는 밖으로 빠져서 별도로 받아서 입력하고 제출 다음에 하는 것이다.

 

'?' 뒤에 있는것을 쿼리스트링이라고한다.

 

즉 위 해석하면 달라는 것 hello인데 질의하는것이 옵션값이다.

 

자바 파일로  세팅을 해준다.

package com.newlecture.web;

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

import jakarta.servlet.ServletException;
import jakarta.servlet.ServletRequest;
import jakarta.servlet.ServletResponse;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;


@WebServlet("/hello")
public class HelloServlet extends HttpServlet {

	
	@Override
	public void service(ServletRequest request,
			ServletResponse response) 
					throws ServletException, IOException {
		// TODO Auto-generated method stub
	
	
//		response.getOutputStream() //바이너리 경우
		
		PrintWriter out = response.getWriter(); //문자열의 경우
//		PrintStream out = new PrintStream(response.getOutputStream()); //위와 어느정도 같음
		//같은데 두개 차이가있다. writer는 다국어 모드이다.
		//스트림은 유니코드가 아니다. 과거 다국어 어려움 그래서 새로운 프린트객체가 프린트 라이터계열
		
		String c = request.getParameter("c");
		//왜 문자열로?
		
		
		int count = 10; 
		//사용자가 값을 전달하면 바꾸게 끔
		//쿼리로 c로 전달할수있다.
		//이경우 전달안하면 기본값이 필요한데, 
		//이러한 초기 10값이 기본값 세팅이다.
		
		if(c != null)
			count = Integer.parseInt(c);
		
		for(int i = 0 ; i < count ; i++)
			out.println("Hello Servlet");
				
	
	}
	
	
	
	
}

위와 같이 기본값을 10으로 설정해주고,

별도의 값이 있을 때 받은 문자열값을 정수형으로 변환 후에 count에 넣어준다.

url의 쿼리문 c 값 입력만큼 적용

 

값이 없다면 기본값 10개가 출력 됨

 

- Servers에 server.xml 은 지난번에 우리가 포트번호80으로 바꿧던 것과 동일한 것이다

톰캣의 런타임환경 설정시 지정한 것의 복사본을 가져온다. 그래서 이 복사본은 망가져도 상관없다. 

이클립스는 원본 설정에 준해서 바뀐다.

한편 서버 탭의 서버삭제하면 같이 없어진다.

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<section>
		<h1>인사말을 몇번 듣고 싶으세요?</h1>
		<ul>
		<!--아래와 같이 입력 쿼리를 조절하고
		출력문에 클릭할수 있게끔 하였다.  -->
			<li><a href="/hello?c=5">5번</a></li>
			<li><a href="/hello?c=10">10번</a></li>
			<li><a href="/hello?c=100">100번</a></li>
		</ul>
	</section>
	 
	<!--href는 입력이고   -->
	<!-- /hllo 는 출력이다.  -->
	
</body>
</html>

위와 같이 hello의 쿼리문입력을 여러개 하여서 클릭해서 출력의 갯수를 다양하게 가능하다.

 

 

 

그 외 5/10/100 외 입력받고싶을 때도 기타로도 가능하다.

<form action="/hello">
			<label>기타</label>
			<input name = "c" placeholder="원하는 횟수 입력하시오">
			<input type="submit" value = "전송">
				
		</form>

위와 같이 기타로 입력받을수 있게끔 할수있다.

 

 

---

JS를 이용하는데 플랫폼은 최소화하고 우리가 원하는 오브젝트 기획해서 실행할것이다.

플랫폼 최소화로 캔버스에다가 원하는 그림으로 만든다.

 

인덱스페이지 추가해서 게임페이지를 만들자.

 

 

II. 자바스크립트

전혀다른 플랫폼이다. 자바와 달리!

 

하나의 플랫폼언어에 익숙해지면 다른것도 잘 할수있다.

1. 자바스크립트 무엇부터 공부해야 하나요?

이런 순서로 해야한다.

 

2. ES5와 ES6중 무엇을 먼저?

우선 ES란 ECMAScript의 약어이다.

 

ES6 바로하기 무리일수있음, 옛날버전 같이 포함된다.

 

점점키워드는 바뀐게 아니라 늘어난 것이다.

내가 하는게 5인지 6인지에 대한 기준이 없어진다.

5 => 6 해야 내가 하는게 어떤버젼인지 할수있다.

 

6부터 APL(App pro Lan) : 응용프로그래밍 언어 이 되었다.

 

플랫폼 언어만 잘한다고 끝이 아니다 알고리즘과 방법론을 잘 안아야한다.

코딩은 수학적, 이론적내용의 코딩과 타인이만든것을 가져오는것이 있다.

 

데이터사이언스 및 딥러닝 이전에 코딩을 먼저...

 

 

3. 자료형

(1) 일반적인 언어의 값의 종류와 변수

이런 것도 전산공부한 우리에게는 이상할수도 있다.

 

자바는 우리가 박스를 넣어주는것이다

그러나 JS는 3을넣을 때 오토박싱(원시타입을 객체로 변)을하고, 그 박스를 x가 참조하는 것이다.

오토박싱한다. 그러한 클래스를 래퍼클래스라고한다.

자바는? ...

 

---

(2) 자바 : 최상위 추상클래스

1) 모든 클래스는 Object이다. 그럼 primitive형식과의 관계는?

 

부모로 object인데, 틀이라고 할만한게 없다. 이런것을 왜 쓰는거지? (물려줄거도 물려받을거 없음)

오브젝트가 모든 객체를 한번에 을수 있는 역할을 한다.

어떤 객체를 만들어도 오브젝트가 있다. 오브젝트로 상속 못할게 없다. 배열할때 참조 못할게 없다.

모든 것을 다 엮어낼수있다.

자료관리 측면에서 중요한 역할을한다. (ex: toString() / equals() 으로 유용하게 이용가능)

그러나 문제있다. 모든것 다꿸수있는데,,,, 객체만! 가능하다.

즉 참조형만 참조하고, 그 외 값(primitive type :정수실수등)은 공간이어야한다.

 

그래서 만든것이 래퍼클래스이다.

값은 참조가 아니라 담는것이다. 

 

정수를 박스로 만들어서 사용하는것이 Integer();

-나머지는 일-

 

 

 

 


1. 보충

(1) load-on-startup

What (정의) : 우선적으로 원하는 애플리케이션 실행

Why (존재이유)  :  우선적으로 원하는 애플리케이션 행

How (방법) : index에 넣어준다.

e.g. (예) : 인코딩 우선적으로 실행

 

 

(2) 인코딩방식과 컨텐츠 타입정하기

https://develop-writing.tistory.com/25

What (정의) :

Why (존재이유)  :

How (방법) :

e.g. (예) :

 

(4) HttpServlet 클래스

What (정의) : client로부터 request가 있을 때 서블릿을 실행하는 모든 조건을 포함한다.

 

Why (존재이유)  : 서블릿을 실행하기위해 

How (방법) : 상속(override)을 이용한다. 이 경우 본 클래스를 상속하지않으면 요청을받아도 작동하지 않는다.

 

(5) 서블릿 실행순서

What (정의) : 실행의 흐름을 개발자가 아니라 서블릿컨테이너(톰캣)이 진행한다.[IOC(Inversion of control)]

Why (존재이유)  : 서블릿컨테이너는 main함수에 구현되어있지 않기 때문이다.

How (방법)  : 이 모두는 톰캣이 한다.

e.g. (예) :

5단계

라이언트로부터 요청을 받음 (요청페이지가 서블릿인지 판단)=> 

초요청인지 판단 (서블릿 객체가 메모리에 없으면 최초)=>

서블릿체생성 (서블릿 메모리에 로딩 후 객체 생성 : new (한번만) ) =>

init()소드 실행 (서블릿 객체 초기화 작업)=>

service()소드 실행 (클라이언트 요청에 따라 실행)

==클최객메메)

 

(5)  web-xml 과 annotation (분리와 결합)

우선 xml 이란 extensible markup language이다.

[https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=wwwkang8&logNo=220994093310]

 

web-xm (분리)

What (정의) : web-xml이란 웹 어플리케이션의 배포설명자를 의미한다. 

Why (존재이유)  : 이를 이용해서 웹서버는 들어오는 request를 처리하는 방법이 있다.

How (방법) : web-inf 폴더 아래에있다. 그리고 요청에대한 URL 을 행해야하는 코드 매핑하는것이다.

e.g. (예) : 지난시간

 

annotation (결합)

What (정의) : 메타데이터이다. 이는 컴파일 및 실행과정에서 어떻게 할지를 알려주는 정보이다.

Why (존재이유)  : 프로그램 규모 방대해짐 => XML이 복잡해짐 => 소스코드와 메타데이터 결합하기 때문에 직관적인 메타데이터로 설정 함.

How (방법) : 자바 클래스 파일위에 @webServlet을 이용한다. 

@WebServlet("/hello")
public class HelloServlet extends HttpServlet {

	
	@Override
	public void service(ServletRequest request,
			ServletResponse response) 
					throws ServletException, IOException {
                    } }

 

 

 

 

2. 회고 

1) 여전히 낯선 어휘들의 연속이다.

2) 오늘 서블릿의 실행과정과 그 주체를 알면서 서블릿컨테이너에 대해서 이해할수 있게 되었다. 

3) web-xml 에서 xml이 무엇인지 그리고 그 자체는 무엇을 설명하는지 알수있게 되었고, annotation과의 어떤 차이가 있는지 엄밀하게 이해할수 있게 되었다
다만 이클립스에서 context path 설정과 어떻게 차이를 두어야하는지 아직 이해가 되지않는다.

4) 백과 html 프론트와의 왔다갔다 하는 과정이 흥미로웠다
?c 를 이용한 쿼리문 작성도 꽤나 재밌다
이를 넘어서 버튼이나, 직접원하는 만큼 반복시킬 수있다는 것도 흥미로웠다. 

5) html은 이전에도 느낀것처럼 주석부터 다르긴해서 신기하다.

6) 자바스크립트의 당연하게 내가 느꼇던것을 다르게 느껴서 신기하다.

 

 

 

미해결 : context path!! => 해결