복습

서블릿,jsp

• 요청처리 적합 -- 서블릿
• 응답처리 적합 -- jsp
• 반드시 써라! 이말은 아님..

model1 vs model2

• model1 : 책임이 분리되지 않은 모델
• model2 : JSP (또 다른 서블릿이 될 수도 있다.)
  • 요청을 받아줄 수 있는 서블릿
  • WEB-INF(금고)안에 있는 JSP (응답데이터)

Request

• RequestLine
  • URL : 수신자 정보
    • 클라이언트 -- 서버사이드 간의 주소 표기 방식 차이
    • GET -- 파라미터가 URL에 쿼리스트링으로 붙음
  • 메서드
  • protocol/ver
• Request Header
  • 브라우저에 의해 뿌려지는 메타데이터
• Request Body
  • 클라이언트가 보낸 정보
  • POST 방식에만 해당

디코딩

• POST
  • Messagebody를 통한 파라미터 전달
  • 파라미터 디코딩 방식
    • request.setChracterEncoding(String encoding)
• GET
  • Request-line의 Requset-url을 통한 파라미터 전달
  • 서버의 설정을 통한 디코딩 방식 설정 -- 톰캣(server.xml)
  • URIEncoding = "encodingName" or useBodyEncodingForURI ="true"

---

2020.11.30 주 키워드

• 이동방식
  • response라는 객체
  • foward, redirect 식별 차이
• 스코프
  • 4개의 스코프를 식별해서 사용할 수 있을것인지

---

calendar 과제 목적

• form태그 안에 action이 생략되었을때
• 한페이지에서 여러가지 요청이 올때 요청을 넘기는 방식을 단일화

/webStudy01/WebContent/04/calendar.jsp

<a href="#" data-year="<%=beforeYear %>" 
   data-month="<%=beforeMonth %>" class="controlA">이전달</a>

<a href="#" data-year="<%=nextYear %>" 
   data-month="<%=nextMonth %>" class="controlA">다음달</a>

let year = $(this).data("year"); //a태그안에 data-year
let month = $(this).data("month");//a태그안에 data-month

jQuery data function

• jQuery DOM요소에 속성 추가 -- 데이터 속성
• a태그 안에 data-year, data-month --HTML5 권고
• data()함수 사용 -- data(key,value)
  • key와 value형식으로 파라미터 넘겨 사용

data()함수 예시

<span data-age="13">
$('span').data('age',13); //값 저장
$('span').data('age'); //값 가져옴 >> 13리턴  

calendar.jsp -- JS

<script type="text/javascript">
	let calenderForm = $("#calenderForm");
	calenderForm.find(':input[name]').on("change",function(){//콜백함수
		calenderForm.submit(); //change -> 로케일,timezone을 선택하자마자 submit
	});//:input '모든 입력'태그중에 name값들을 갖고있는 녀석들
	$(".controlA").on("click", function(event){
		event.preventDefault();//안막으면 a태그 고유의 이벤트 -> 클릭하면 href 페이지 이동
		//클릭한 a태그 선택 (스코프 제한할때 - 훨씬더 명확 let)
		let year = $(this).data("year"); //a태그안에 data-year
		let month = $(this).data("month");//a태그안에 data-month
		//form태그 ID, 자식들중에 name='year'로 되있는 애들
		calenderForm.find("[name='year']").val(year);
		calenderForm.find("[name='month']").val(month);
		//폼전송
		calenderForm.submit();//폼submit(최종적으로) (다음달,이전달,language,timezone)
		return false;
		//하나의 페이지안에서 요청을 넘기는 방식이 여러가지인데 - 한가지 방식으로 요청이 넘어가게 해라!
	});
</script>

• $("#calenderForm") --form태그 id값
• (':input[name]') -- 모든 입력태그 중에 name값들을 갖고있는 녀석들에
  • change가 될때 sumbit이 발생되게 콜백함수를 줌
• $(".controlA") -- a태그 클래스인데 click이 될때 href속성인 다른페이지로 이동 못하게 event.preventDefault()를 걸어줌
  • a태그에서 '이전달''다음달'을 클릭하면 <input name="year">, <select name="month">인 값이 같이 변해서 값을 이것들만 넘겨줌
• form태그 아이디값에 data()함수를 사용해서 val()값을 주고 모든 요청을 한꺼번에 submit()처리

a태그 == form태그 일치

• form태그가 가진 파라미터들 다 서버에 전달되어야 된다 (YEAR, MONTH, LANGUAGE)
• a태그 클릭 순간 form태그에 값이 입력되어 데이터 요청
• Timezone 파라미터가 추가 => form태그만 수정

한페이지에서 요청 넘어가는 구조 단일화

• jquerydata 쓰는 방법
• 다양한 selector 쓸 예정

---

2020.11.30 월요일

HttpServletResponse

• 서버에서 클라이언트로 전송되는 응답과 관련된 모든 정보 캡슐화
• HttpServletResponse 타입의 response객체는 응답데이터 생성을 위해 HTTP에 특화된 기능을 가진 객체
• 바이너리 데이터 전송을 위한 ServletOutputStream, 문자전송을 위한 PrintWriter등의 스트림 확보나 응답 헤더의 설정 등에 사용

HTTP Response Message 구조

Message 요소	포함 데이터
Response Line	Protocol-version, Status-code Reason-Pharse
Response Header (metadata header)	응답 메시지에 대한 부가정보(설정 정보) 헤더명=헤더값으로 표현된 토큰들로 구성됨
Response Body (Message Body) (content body)	Accept 요청 헤더에 지정된 MIME 데이터로 구성된 message body request한테 주는 답장!

상태코드분류와 의미

• Status-code (in Response Line)
• 웹서버는 요청을 받고 그에 대한 응답라인에 처리 결과를 의미하는 세자리 숫자로 표현된 상태코드를 클라이언트로 전송
• 100~500번대로 표현되는 상태코드의 종류는 다음 표와 같다.

상태코드	의미
100~	HTTP/1.1에서 유효한 코드로 요청에 대한 조건부 응답처리 상태
200	요청에 대한 처리 성공, 정상 응답 데이터 상태
300~	클라이언트의 요청을 처리하기 위한 추가 동작이 필요함 (ex) 304(Not Modified) ★302/307(Moved) : Location 헤더와 병행 사용★
400~	클라이언트 에러(오류)로 실패, 클라이언트에게 오류전달해서 인지하게 함, 세분화해서 사용 (ex) 401(UnAuthorized),403(Forbidden) =>보안처리관련401,403 405(Method Not Allowed), 415(Media Not Supported) 400(잘못된 요청), 404(요청한 자원이 서버에 존재하지 않는다)
500	서버 에러(오류)로 실패 서버에서 발생한 상황을 노출하지 않기 위해서 세분화해서 사용하지 않는다. 500으로 통일

response 객체의 헤더 기록용 메소드

메소드	리턴타입	설명
setHeader(String name, String value)	void	name헤더의 값을 value로 지정
setIntHeader(String name, int value)	void	name헤더의 값을 정수 value로 지정
setDataHeader(String name, long date)	void	name의 헤더 값을 ms 단위의 value로 지정
addHeader(String name, String value)	void	name헤더의 값을 value로 추가
addIntHeader(String name, int value)	void	name헤더의 값을 정수 value로 추가
addDateHeader(String name, long date)	void	name헤더의 값을 ms단위의 value로 추가
containsHeader(String name)	boolean	응답 헤더의 name 헤더 포함 여부