[71] 230410 동기식, 비동기식, AJAX, Spring: 게시판 댓글 [K-디지털 트레이닝 71일]

2304010 Mon 71st class

참고: 동기식 vs 비동기식
https://dev-coco.tistory.com/46
https://sudo-minz.tistory.com/21

참고: ajax
https://azderica.github.io/00-javascript-ajax/

---

웹 브라우저 → controller → .jsp(해당 화면으로 이동)

동기식 통신방식

: 기승전결이 있다. (순서) 
ex) 카페: 주문한 후에 커피가 나올때까지 기다려주세요

회원가입
1)
웹브라우저 → MemberController(controller) → Member.jsp(회원가입 화면으로 이동)

회원가입 버튼을 클릭
2)
웹브라우저 → controller → model(회원가입 정보 수집) → service <=> mapper(dao) <=> db
웹브라우저 <=> MemberController(controller) <=> MemberVO(model)(회원가입 정보 수집) → MemberService(service) <=> MemberMapper(mapper(dao)) → Member Table insert <=> db

	MemberVO (model) (회원가입 정보 수집)		MemberVO (model)		MemberVO (model)		MemberVO (model)
웹브라우저	----------->	MemberController (controller)	----------->	MemberService (service)	----------->	MemberMapper (mapper(dao))	----------->	Member Table insert

In software, a data access object (DAO) is a pattern that provides an abstract interface to some type of database or other persistence mechanism.

In computer science, a value object is a small object that represents a simple entity whose equality is not based on identity: i.e. two value objects are equal when they have the same value, not necessarily being the same object.

---

로그인
1)
웹브라우저 → MemberController(controller) → Login.jsp(로그인 화면으로 이동)

로그인 버튼을 클릭
2)
웹브라우저 → controller → model(회원가입 정보 수집) → service <=> mapper(dao) <=> db
웹브라우저 <=> MemberController(controller) <=> MemberVO(model)(회원가입 정보 수집) → MemberService(service) <=> MemberMapper(mapper(dao)) → Member Table insert <=> db

	MemberVO (model) (회원가입 정보 수집)		MemberVO (model)		MemberVO (model)		MemberVO (model)
웹브라우저	<=====>	MemberController (controller)	<=====>	MemberService (service)	<=====>	MemberMapper (mapper(dao))	<=====>	Member Table

---

비동기식 통신방식 (ajax)

: ex) 카페: 주문한 후에 진동벨이 울리면 커피를 가지러 오세요!

Ajax is a set of web development techniques that uses various web technologies on the client-side to create asynchronous web applications. With Ajax, web applications can send and retrieve data from a server asynchronously without interfering with the display and behaviour of the existing page.

.jsp에 보내는 동기식과는 달리,
비동기식은 웹 브라우저한테 데이터를 준다. 

AJAX 문법 및 속성

---

JSON is an open standard file format and data interchange format that uses human-readable text to store and transmit data objects consisting of attribute–value pairs and arrays. It is a common data format with diverse uses in electronic data interchange, including that of web applications with servers.

---

Spring Framework의 기본적인 언어는 자바이다.
하지만 비동기식은 데이터타입이 javascript 또는 xml이 주로 언어이다.

Spring Framework에서 javascript 타입 또는 xml에 대한 인식이 pom.xml에서 필요하다.

javascript 타입 또는 xml에 대한 인식에 필요한 jar 파일을 다운로드한다.

the simplest way to parse JSON with Jackson.

jackson-databind(javascript타입)
jackson-dataformat-xml(xml타입)을 pom.xml에 추가한다.

		<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
		<dependency>
		    <groupId>com.fasterxml.jackson.core</groupId>
		    <artifactId>jackson-databind</artifactId>
		    <version>2.9.6</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.dataformat/jackson-dataformat-xml -->
		<dependency>
		    <groupId>com.fasterxml.jackson.dataformat</groupId>
		    <artifactId>jackson-dataformat-xml</artifactId>
		    <version>2.9.6</version>
		</dependency>

게시판의 댓글은 비동기식으로 만든다.
AJAX는 jQuery의 일종이다.

---

230404 자료: SpringEx테이블 구조

reply from reply.js and ReplyVO from ReplyController.java

---

detail.jsp

	<div id="chat">
		<ul id="replyUL">
		</ul>
	</div>

reply.js

function list(param){// list함수 선언 시작
	//alert(bno);
	var bno = param.bno;
	var page = param.page;
	
	console.log(bno)
	console.log(page)
	
	$.getJSON("/replies/"+bno+"/"+page+".json",function(data){
		console.log(data.replycnt)
		console.log(data.list)
		
		var str="";
		
		for(var i=0;i<data.list.length;i++){
			str+="<li>"+data.list[i].id+"</li>"
			str+="<li><textarea id='replycontent"+data.list[i].rno+"'>"+data.list[i].reply+"</textarea></li>"
			str+="<li>"
			str+="<input class='update' type='button' value='수정' data-rno="+data.list[i].rno+">"
			str+="<input class='remove' type='button' value='삭제' data-rno="+data.list[i].rno+">"
			str+="</li>"
		}
		
		$("#replyUL").html(str);
		
		showReplyPage(data.replycnt,page);
	});
}// list함수 선언 끝

---

소스를 분석한다. 소스를 분석하는 것이 먼저다. MVC, DB에 어떻게 데이터를 던지고 있는지

detail.jsp

	<div><label>댓글</label></div>
	<div>
		<textarea rows="5" cols="50" id="reply"></textarea>
	</div>
	<div>

reply.js

	// 댓글 쓰기버튼을 클릭하면 
	$("#add").on("click",function(){
		// 댓글쓰기 버튼을 클릭했을 당시에 댓글내용을 가져올려면 $("#add").on("click",function(){ 아래에 선언
		var replyValue=$("#reply").val();
		var idValue="abcd1";
		// 댓글쓰기를 하기 위한 함수 호출
		add({bno:bnoValue,reply:replyValue,id:idValue});
	})

제일 하단의 코드

// 댓글 쓰기를 하기 위한 함수 선언
function add(reply){	// add함수 선언 시작
	console.log(reply);
	$.ajax({
		type:"post",	// method방식(get, post, put, delete)
		url:"/replies/new",
		data:JSON.stringify(reply),
		// contentType : ajax -> controller로 데이터 전송 시 타입
		// (contentType을 생략하면 web Brower한테 위임)
		contentType:"application/json; charset=utf-8",
		success:function(result){
			if(result=="success"){
				alert("댓글쓰기 성공")
				list(reply.bno)
			}
		}
	})
}	// add함수 선언 끝

---