스프링 ch4-9 - REST API와 Ajax

JSON이란?

• Java Script Object Notation - 자바스크립트 객체 표기법
• XML로 데이터 교환이 복잡하므로 간단한 JSON을 쓰자고 나옴
• {속성명1:속성값1, 속성명2:속성값2, ...}
• 객체배열 - [{속성명:속성값,...}, {속성명:속성값,...},...]
• MAP - {키1:{속성명:속성값,...}, 키2:{속성명:속성값,...},...}

stringify()와 parse()

• JS객체를 서버로 전송하려면, 직렬화(문자열로 변환)가 필요.
• 서버가 보낸 데이터(JSON 문자열)를 JS객체로 변환할 때, 역직렬화가 필요.
• JSON.stringify() - 객체를 JSON문자열로 변환(직렬화, JS객체 -> 문자열)
• JSON.parse() - JSON 문자열을 객체로 변환(역직렬화, 문자열 -> JS객체)

Ajax란?

• Asynchronous javascript and XML(비동기 자바스크립트와 XML) - 요즘은 JSON을 주로 사용
• 비동기 통신으로 데이터를 주고 받기 위한 기술
• 웹페이지 전체(data+UI)가 아닌 일부(data)만 업데이트 가능
• 비동기는 동기와 달리 요청만해놓고 응답이 올 때 까지 기다리지 않고 중간에 다른 일을 할 수 있다. 콜백함수를 통해 언제 다른 일이 끝났는지 알 수 있다.

jQuery를 이용한 Ajax

$(document).ready(function() {
	let person = {name:"abc", age:10};
	let person2 = {};
	
	$("#sendBtn").click(function() {
		$.ajax({
			type:'POST',
			url: '/ch4/send',
			headers : {"content-type": "application/json"},
			dataType: JSON.stringify(person),
			success : function(result) { person2 = JSON.parse(result);
										alert(result); },
			error : function() { alert(error) }
		});
		alert("the request is sent")
	});
});

Ajax요청과 응답 과정

JS객체를 JSON.stringify()로 문자열로 바꾸고, 서버로 전송한다. 서버는 jackson-databind로 문자열을 자바 객체로 바꿔서 맵핑된 컨트롤러의 메서드가 받는다. 메서드에서 작업 후 자바객체를 반환한다.
다시 jackson-databind가 자바객체를 JSON문자열로 바꿔서 전송한다. 클라이언트가 받아서 JSON.parse()로 JS객체로 변환한다.
즉 클라이언트와 서버가 서로 전송 하려면 문자열로 전송해야 한고, 궁극적으로 JS객체를 JAVA객체로 바꾸고, 또 반대로 바꿔서 작업한다.
@ResponseBody를 해당 메서드에, @RequestBody를 해당 메서드의 매개변수에 붙여야 한다.

@RestController

메서드에 @ResponseBody 대신, 클래스에 @RestController 사용 가능. 그러면 클래스에 포함된 모든 메서드에 @ResponseBody가 붙은 효과.

REST란?

API를 디자인하는 방식.
프로토콜에 독립적이고, 주로 HTTP를 사용해서 구현.
리소스 중심의 API디자인 - HTTP메서드로 수행할 작업을 정의

/customers - POST:새 고객 만들기, GET:모든 고객 검색, PUT:고객 대량 업데이트, DELETE:모든 고객 제거
/customers/1 - POST:Error, GET:고객 1에 대한 세무정보 검색, PUT:고객 1인 있는 경우 고객 1의 세부 정보 업데이트, DELETE:고객 1 제거
/customers/1/orders - POST:고개1에 대한 새 주문 만들기, GET:고객 1에 대한 모든 주문 검색, PUT:고객 1의 주문 대량 업데이트, DELETE:고객 1의 모든 주문 제거

REST API란?

• REST규약을 준수하는 API

API란?

• Application Programming Interface - 약속

RESTful API

• REST방식을 잘 지킨 API
• 예) 댓글 기능

//원래 하던 방법
읽기 - /comment/read?cno=번호 - GET, 지정된 번호의 댓글을 보여준다.
쓰기 - /commnet/write - 지정한 게시물을 저장한다.
삭제 - /comment/remove - 댓글을 삭제한다.
수정 - /comment/modify - 수정된 게시물을 저장한다.

//REST API적용 - URI를 명사 위주로 변경
읽기 - /comments - GET, 모든 댓글을 보여준다.
읽기 - /comments/{cno} - GET, 지정된 번호의 댓글을 보여준다.
쓰기 - /comments - POST - 새로운 댓글을 저장한다.
삭제 - /comments/{cno} - DELETE - 지정된 번호의 댓글을 삭제한다.
수정 - /comments/{cno} - PUT/PATCH - 수정된 댓글을 저장한다.