JSON / Ajax / REST API

1. JSON이란?

Java Script Object Notation : 자바 스크립트 객체 표기법

데이터를 주고 받을 때 XML을 사용했는데 너무 복잡하고 실제 데이터보다 Tag가 더 많아

더 간단하게 표기하기 위한 표기법.

 

ex)

{속성명1 : 속성값1 , 속성명2 : 속성값2 , ....} 

[{속성명1 : 속성값1, ...}, {속성명1 : 속성값1, ...}, ...]                      //객체 배열

{키1 : {속성명1 : 속성값1, ...}, 키2 : {속성명1 : 속성값1, ...},....}     // Map

 

 

2. stringify()와 parse()

 

JS(JavaScript)객체를 서버로 전송하려면, 직렬화(데이터->문자열로 변환)가 필요.

직렬화는 데이터를 Text화 시킨다. → 저장 / 전송이 가능하다.(HTTP는 Text기반 프로토콜)

 

서버가 보낸 데이터(JSON문자열)를 JS객체로 변환할 때, 역직렬화가 필요.

 

JSON.stringify() - 객체를 JSON 문자열로 변환(직렬화, JS객체 → 문자열)

JSON.parse() - JSON 문자열을 객체로 변환(역직렬화, 문자열 → JS객체)

 

JSON 예제

 

 

3. Ajax란?

 

Asynchronous(비동기) Javascript And XML - 요즘은 JSON을 주로 사용.

 

비동기 통신으로 데이터를 주고 받기 위한 기술.

기본적으로 동기를 사용하나 비동기로 해서 효율을 높이려는 목적으로 사용.

웹페이지 전체(data + UI)가 아닌 일부(data)만 업데이트 가능.

동기 / 비동기

동기식은 요청을 보내고 서버가 응답할 때까지 다른 작업을 못하지만

비동기식은 요청을 보낸 뒤에도 다른 작업을 할 수 있으며, 서버의 응답은 언제 처리가 될 지는 모르지만

콜백함수로 응답이 온 것을 알 수 있다. 한마디로 전체가 아닌 일부만 업데이트 하는 작업이라면 비동기식이

더 효율적이라는 것.

 

 

4. jQuery를 이용한 Ajax 예제

 

1) https://mvnrepository.com 에서 "jackson" 검색 → Jackson Databind → 2.13.3 copy → pom.xml 에 붙여넣기

 

Maven Repository: Search/Browse/Explore

 

2) view 페이지 작성

$(document).ready(function(){
	let person  = {name:"abc", age:10};
	let person2 = {};
    
	$("#sendBtn").click(function(){
	 $.ajax({
	   type : 'POST',		// 요청 메서드
	   url : '/ch4/send',	// 요청 URI	
	   header : {"content-type" : "application/json"},	// header - 요청 헤더(JSON형식으로 보낼게!)
	   data : JSON.stringify(person),	// data - 서버로 전송할 데이터. stringify()로 직렬화 필요.
	   // success, error -> 콜백함수
	   success : function(result){ person2 = JSON.parse(result);	// result는 서버가 전송한 데이터
	     alert(result);	},
	   error : function(){ alert("error")}
	 });	// $.ajax()
        
        alert("the request is sent")	//요청을 보내자마자 실행된다. $.ajax가 리턴을 안해도 실행되기 때문.
	});
});

(...티스토리 코드블럭이 작성할때와 출력이 좀 다르네요..)

 

3) controller 작성

@Controller
public class RestControllerTest{
    @PostMapping("/send")
    @ResponseBody
    public Person test(@RequestBody Person p) {
    System.out.println("p = " + p);
    p.setName("ABC");
    p.setAge(p.getAge() + 10);

    return p;
    }
}

 

jackson-databind : '문자열 ↔ 자바 객체' 변환.

 

JSON.stringify(person) → jackson-databind → Java 객체 p

                                  return p;

Java 객체 p → jackson-databind → JSON.stringify(person)

 

( pom.xml에 jackson-databind를 적용 및 @ResponseBody가 있어야 자동변환한다.)

 

 

5. @RestController

 

@ResponsBody 대신, 클래스에 @RestController 사용하여 코드를 더 간결하게 줄일 수 있다.

4-3의 controller를 다음과 같이 바꿀 수 있다.

@RestController
public class RestControllerTest{
    @PostMapping("/send")
    public Person test(@RequestBody Person p) {
    System.out.println("p = " + p);
    p.setName("ABC");
    p.setAge(p.getAge() + 10);

    return p;	// 객체 반환
    }
}

 

 

6. REST란?

 

웹서비스 디자인 아키텍쳐 접근 방식.

 

프로토콜에 독립적이며, 주로 HTTP를 사용해서 구현.

 

★리소스 중심의 API 디자인 - HTTP메서드로 수행할 작업을 정의.

ex) 

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

 

 

7. REST API란?

 

Representational State Transfer API : REST규약을 준수하는 API.

API : Application Programming Interface(약속).

 

8. RESTful API 설계

 

RESTful API : REST방식을 잘 지킨 API.

 

Restful API 적용 전 후 비교해보자!

 

전) URI가 동사 위주

작업	URI	HTTP 메서드	설명
읽기	/comment/read?cno=번호	GET	지정된 번호의 댓글을 보여준다.
쓰기	/comment/write	POST	작성한 게시물을 저장한다.
삭제	/comment/remove	POST	댓글을 삭제한다.
수정	/comment/modify	POST	수정된 게시물을 저장한다.

후) Restful - URI가 명사 위주, 기능은 HTTP메서드로 구분한다.

작업	URI	HTTP 메서드	설명
읽기	/comments	GET	모든 댓글을 보여준다.
읽기	/comments/{cno}	GET	지정된 번호의 댓글을 보여준다.
쓰기	/comments	POST	새로운 댓글을 저장한다.
삭제	/comments/{cno}	DELETE	지정된 번호의 댓글을 삭제한다.
수정	/comments/{cno}	PUT / PATCH	수정된 댓글을 저장한다.

 

 

 

p.s. 어후...저도 강의듣고 공부하면서 정리한건데...더 공부해서 깔끔하게 정리하도록 하겠습니다.