[DAY48](중요) ★★★

NA YE SOM·2023년 9월 11일

요청(client -> 서버)

이름과 나이를 보내는 방법

-> 해당 파라미터 값이 항상 문자열로 넘어오니까
integer 값으로 바꾸기 위해서 타입을 조정하다 보면 exception 발생할 수 있음

-> method를 post로 바꿔서 doPost가서 연습할 수 있음
-> 단순 변수들은 연습 x

-> name속성을 select에 주고 option에는 주지않음

-> select는 입력이 아니라 골라주는것
(어느것을 골랐는지 서버측에서 이해하려면 option마다 value가 붙어야 함 )

-> value 가 안붙으면 빈문자열이 전송됨

★★★ 무조건 구분해서 이해!!!!!!!

사용자가 입력하는것 : value속성 x
사용자가 입력 x : valuet속성 만들기 **

-> 동일한 파라미터로 인식

doGet 2줄 복사
-> doPost 복사 (서로 상관이 없어짐)

★★★(무조건이해해야함)

-> 전체 주소를 적는 방법도 있음(하지만 그럴 필요가 없음)

응답 : 입출력 스트림 활용해서 java코드로 만들어 내는것

-> 서버 안에서의 이동에대해서 배움

같은 프로젝트 안에서는 같은 contextpath쓰는것(action="/servlet/response")

성별 보내기

datalist(선택도 하고 입력도 할 수 있는 콤보)

체크박스 : 동시에 둘이상 선택 가능 -> 배열

라디오 : 무조건 한개라서 -> 배열 x**

-> servlet url Mapping은 거의 다 바꿈

get방식으로 했으니 getmethod가서 진행

-> 보이지 않아서 사용자가 입력할 수 없기때문에 value가 있어야 의미있음

응답

화살표 방향으로 공부하기

응답도 요청처럼 인코딩 필요함

응답은 String필요함

writer만들기

byte기반의 출력 스트림도 원하면 쓸 수 있음
(getOutputStream 쓰지x)

-> IOException 예외 처리 필요

-> 안해도 되는이유 : 처리가 되어있어서

textarea : 여러줄의 긴 문장을 입력할 수 있는 양식

pre : 미리 정의된 형식(preformatted)의 텍스트를 정의할 때 사용함

-> pre 요소 내의 텍스트는 시스템에서 미리 지정된 고정폭 글꼴을 사용하여 표현되며, 텍스트에 사용된 여백과 줄바꿈이 모두 그대로 브라우저 화면에 나타난다
-> pre 요소를 사용하면, 독특한 서식의 텍스트나 컴퓨터 코드 등을 HTML 문서에 그대로 표현할 수 있다

jsp : 태그 안에다가 자바를 넣을 수 있게 됨

-> 자바로 태그 만들기가 어려웠음(servlet이 먼저 나옴)

-> pre태그 쓴 곳 : 원래 글꼴 달라짐
-> 공백이랑 줄바꿈 넘어오는곳 보기

POST : 주소창의 파라미터를 표시 X

-> 요청을 POST 바꾸고 나면
-> Servlet에서 할 일은 없음

adjac 따로 할거임
-> 똑같음

-> 따로 빼서 할것임

서버측에서 데이터를 이동시키는 방법

-> 서버 코드를 이용해서 이동하는 방법(새롭게 나옴)

forward:코드를 별도로 적지않아도 코드를 전달함

redirect :(기본값) 데이터전달 안하는 특성

-> forward이건 redirect이건 이동을 해줌
(forward는 직접 전달해서 이동,redirect는 다시 가라고 다시 알려주는 방식)
-> 다시 client한테 알려주는 방식
(최종 도착지 : servlet 2)
-> 내부적으로 이동하는 방법이 조금 다름

(고객센터:servlet1(전화한번 걸음)
servlet2(담당바꿔줌

(ex) forward, redirect 이동방식 차이

forward : 다른 고객센터 연결

redirect : 여기가 아니라고 하고 연결x, 전화번호 알려줌 -> 여기로 걸라 => 바뀐 전화번호로 또 전화를 걸어야 함

forward

servlet으로 전송된 데이터는 다시 이동할 것
-> 최종 2개의 servlet을 만들것!!

-> 소문자 f로 바꾸기

doGet
-> 본문 지우기

-> forward : 전달

-> 고객센터에 전화를 함
(1588-3030)

-> 최종 목적지 확인이 불가능(client측에는 공개x:어디서 처리했는지 모름)
-> 분명히 이동했지만 이동경로가 보이지 않음

redirect

-> 응답으로 시작해야함

-> 주소창에서는 갔음

->외우지는 말고 나중에 서버 DB할때 다시 나옴
(특징 정확히 알고 있기)

Forward

-> 요청한 곳과 응답된 곳이 다른것
-> client입장 : 요청 한번만

-> 결론 : SELECT -> Select이후에는 forward함

-> select결과 : 목록주세요(/getList) 요청함

Redirect : 2번 요청한다

입력요소들을 form 태그 없이 id기반으로 만들기

async: true(기본 값) -> 생략하기

-> 파라미터만 잘라서 data로 옮기기(모양 맞추기)

라이브러리 추가

-> JSON DATA로 만들수 있음

-> XML의 제작능력을 활용해서 XML 만들기

URL Mapping을 getXML로 바꾸는것이 중요

-> GET방식 요 청
-> doGet이 받음

-> 정상적으로 ajax 요청까지 되는지 확인

html 실행후

-> 나이는 정수를 입력(정수를 아닌 입력을 막는건 정규식으로 함)

3. XML 만들기

SYSOUT -> 없애기

PrintWriter(응답 스트림)

-> Json데이터 만들어서 보내주기
(xml은 거의 사용 x)

-> dynamic web project는 실무에서 사용할 일은 적다(옛날일)

spring study를 만들면 진짜 코드가 시작이다.

-> 코드가 점점 줄고 동작은 함
(지금 배우고 있는 코드에서 동작을 함: 이런 데이터에서 왔다가 갔다는 것을 이해하는 것이 중요함)
-> 없는 코드가 꽤 있을 수 있음

★★
-> 이 코드는 변하지 않음
(servlet 쪽 코드가 변함)

#쓰는 이유? jQuery에서 사용되는 선택자(selector)문법이다. 이선택자는 HTML문서에서 특정 요소를 선택하기 위해 사용된다.

val()쓰는 이유? jQuery에서 사용되는 메서드(method)이다. 주로 HTML form 요소에서 값을 가져오거나 설정하는데 사용된다.

$('#name').val() : jQuery로 ID가 "name"인 HTML 폼 요소의 값을 가져오는 부분이다. 사용자가 "name"필드에 입력한 값을 가져온다.
$('#age').val() : jQuery로 ID가 "age"인 HTML 폼 요소의 값을 가져오는 부분이다. 사용자가 "age"필드에 입력한 값을 가져온다.
success : function(resData) : resData는 ajax요청이 성공적으로 완료되고 서버에서 반환된 데이터를 받는 변수이다. ajax 요처의 성공 콜백 함수 안에서 사용된다.
-> resData 변수에는 서버에서 반환된 데이터가 들어 있으며, 이 데이터는 JavaScript 코드내에서 사용하여 원하는 방식으로 활용할 수 있다.

empty()쓰는 이유? jQuery메서드(method)이다. 선택한 요소의 내용을 비우는 역할을 한다 -> 해당 요소의 내용을 삭제하거나 비운다.

append() 쓰는 이유? jQuery메서드(method)이다. ul요소내에 새로운 HTML 요소나 콘텐츠를 추가할 때 사용된다. append() 사용하면 선택한 요소 내에 새로운 자식 요소나 콘텐츠를 추가할 수 있다.

var ul = $('<ul>'); // 새로운 'ul'요소를 생성한다. $('<ul>')는 새로운 빈 ul요소를 jQuery객체로 만든다.

ul.append() // 앞서 생성한 ul요소에 자식 요소를 추가하는 부분이다.

$('<li>').text($(resData).find('name').text(); //새로운 li요소를 생성하고 그 안에 resData에서 name 요소의 값을 가져와서 해당 li요소의 텍스트로 설정한다.

find() 쓰는 이유? XML 또는 HTML문서 내에서 요소를 검색하고 선택하는데 유용, jQuery로 DOM을 탐색하고 조작할 때 자주 사용된다.

error:function(jqXHR)

jQuery의 AJAX요청에서 사용되는 오류 처리 콜백 함수의 일부.이 콜백 함수는 AJAX요청이 실패할 때 실행되며, 실패한 요청과 관련된 정보를 제공한다.

-> 여기에는 jqXHR 객체가 포함되며 이 객체는 jQuery XMLHttpRequest의 확장 버전이다.

serialize()

jQuery에서 제공하는 함수로 HTML 폼 요소를 직렬화하여 문자열 또는 JSON객체로 변환한다.

(1) empty - append 조합 : 가지고 온 목록의 데이터가 여러개일때

(2) html - #content1 요소의 내용을 ul변수에 저장된 HTML 코드로 대체하는 것

empty 하는 이유 : append 메소드 써서( append : 원래있던 것 추가해서)
-> 애초에 덮어쓰기를 하면 기존 목록을 제거할 필요 없음
-> html(추가가 아니라 html요소로 덮어쓰기를 한다)

error:function(jqXHR) 이유?

error: function(jqXHR){
	alert(jqXHR.status + '(' + jqXHR.statusText + ')'); 
    //jqXHR.status : Ajax 요청에서 서버로부터 수신한 HTTP 응답 상태 코드를 나타냄
    (ex) 404 : Not Found, 500 : Internal Server Error

jqXHR.statusText : HTTP 응답 상태 코드에 대한 설명(텍스트) 
(ex) 404 상태 코드에 대한 jqXHR.statusText는 'Not Found'가 된다.

★★★ajax은 해당페이지의 변화없이 요청과 응답이 진행될 수 있는 특징을 가지고있음

★★★(이방법이 더 수월함-> 실수도 적음)

placeholder() : form 요소의 입력 필드에 사용, 주로 해당 필드에 어떤 정보를 입력해야 하는지 사용자에게 힌트를 제공하기 위해서 사용된다 (시각적 안내 : 입력필드에 placeholder값을 설정하면 해당 내용이 희미한 텍스트로 표시되므로 사용자는 필드에 무엇을 입력해야 하는지 시각적으로 파악하기 쉽다)

ajax요청이든 submit을 하든 form에다가 name을 만들기(보내고 싶은게 여러개면 form무조건 깔고 form안에 다 넣은후에 한번에 다 보내기)

-> serilaize(직렬화) : 파라미터 쭉 줄세워서 보내기

-> 밑에 로고 뜨는지 확인

4. 응답 데이터 타입과 인코딩

자바스크립트 객체니까 .찍고 속성만들기

-> 일반화된 코드라고 볼 수 없음
(라이브러리 바꾸면 코드가 다 바뀜)

google-gson 등등

(09/12) webstudy 능력단위 평가 : html , javascript, jquery 쓰는 것

평가 버튼 2번 누르기
(시험종료) ->
(평가)
-> 2개로 되어있음
-각각 50점
(하나 : only javascript)(쉬운것) -> 여기서 점수획득하기
-정규식
-event 문제(고전,표준,인라인)
-간단한 event작성하는문제(버튼 클릭시 어디로 가기)
-코드 보여주고 잘못된것 찾기(4문제)
(하나 : 화면만들기 : html, css)