36일차 시작....

📌 JSONWriter

• JSONWriter
  JSON 형태의 key, value 데이터를 HTML로 출력하는 역할

//요청 파라미터 추출
int num=Integer.parseInt(request.getParameter("num"));

//num 에 해당하는 회원 정보를 DB 에서 읽어온다.
Map<String, Object> map=new HashMap<>();
map.put("num", 1);
map.put("name", "김구라");
map.put("isMan", true);

//json 문자열 응답하기
JSONWriter.valueToString(map)

📌 JS fetch() 함수

• fetch 함수
  - 페이지 전환없이 요청 및 응답을 수행하도록 지원하는 함수
  - Default로 GET 요청 방식을 사용
  - 응답 객체로부터 JSON 포멧 또는 HTML의 응답 전문을 반환받을 수 있다.
  
  
• 구조
  fetch("주소+queryString", HTTP전송 방식)
  .then((res) => {return res.json(); or res.text();})
  .then((data) => {console.log(data)});
  ↪ 1. res.json() : 응답 파일에서 JSON으로 넘겨줬을 경우
  ↪ 2. res.text() : 응답 파일에서 XML or HTML로 넘겨줬을 경우
  
  
• 사용 함수
  - new URLSearchParams(form 데이터) : form 요소의 input 요소 name을 Query String 형태로 변환하기 위한 함수
  - new FormData(form) : form 요소의 입력 데이터들을 가져오는 함수
  - encodeURIcomponent(value) : Object 형태의 데이터 value를 인코딩하여 반환하는 함수
  
  
• 버튼 fetch() 함수 적용

document.querySelector("#requestBtn").addEventListener("click", ()=>{
	fetch("get_data.jsp?num=1")
	.then((res)=>{
		return res.json();
	})
	.then((data)=>{
		console.log(data);
		//서버에서 응답한 데이터를 이용해서 html 마크업을 구성한후 
		let info=`
			<p>번호:\${data.num}</p>
			<p>이름:\${data.name}</p>
			<p>남자여부:\${data.isMan}</p>
		`;
		//div 에 html 로 해석해 달라고 문자열을 넣어준다.
		document.querySelector("#one").innerHTML=info;
	});
});

• form 요소에 fetch() 함수 적용

document.querySelector("#myForm").addEventListener("submit", (e)=>{
	//폼 제출 막기(페이지 전환 막기)
	e.preventDefault();

	//폼에 입력한 내용을 전송할 query 문자열로 만들기
	const form=document.querySelector("#myForm"); //폼의 참조값
	const qs=new URLSearchParams(new FormData(form)).toString(); //query string

	//페이지 전환 없이 post 방식으로 insert.jsp 페이지로 전송하기 
	fetch("insert.jsp", {
		method:"POST",
		headers:{"Content-Type":"application/x-www-form-urlencoded; charset=utf-8"},
		body:qs
	})
	.then((res)=>{
		return res.json();
	})
	.then((data)=>{
		console.log(data);
	});
});

📌 parameter 인코딩

• url 파라미터 인코딩
  JS : encodeURIcomponent(value)
  Java : URLEncoder.encode(value)

<!-- JavaScript에서의 파라미터 인코딩 -->
encodeURIcomponent(url.value);

// Java에서의 파라미터 인코딩
String encodedUrl=URLEncoder.encode(url);

📌 Filter

• Filter
  클라이언트 요청이 서버로 가기 전에 Filter할 수 있는 구현 클래스
  
  
• Filter 구현
  1. Filter 인터페이스를 implements 한다.
  2. @WebFilter(필터 요청 보낸 경로)
  ↪ urlPatterns = {"/경로1/", "경로2/", ....} 로 지정가능
  3. destroy(), doFilter(), init() 메소드를 구현한다.
  
  
• doFilter() 메소드
  ServletRequest 객체 : HttpServletRequest의 부모 클래스
  ServletResponse 객체 : HttpServletResponse의 부모 클래스
  FilterChain 객체 : 클라이언트로부터 받은 요청을 서버로 channing하기 위한 객체
  ↪ chain.doFilter(request, response) : 요청, 응답 메시지를 서버로 연결시킴

📌 File

• file 업로드
  - 파일 다운로드를 위해서는 원본 파일명, 저장된 파일명, 파일 크기 정보가 필요하다.