본문 바로가기
dev/Spring

[Spring] REST API , Ajax

by dev_Step 2022. 7. 15.

 

 

Java Script Option Notation  -  자바스크립트 객체 표기법

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

 

>> 객체 배열

[{ 속성명1 : 속성값 },{ 속성명2 : 속성값2}]

 

>> Map

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

 

>> Stringify() 와 parse()

 - JS객체를 서버로 전송하려면, 직렬화(문자열로 변화)가 필요 

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

{ name = "John", age:30}   [ JS객체 ]    ======> { "name" : "John", "age" : "30" } [ String ]

 

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

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

{ "name" : "John", "age" : "30" } [ String ] ======> { name = "John", age:30}   [ JS객체 ] 

 

 

>> Ajax [Asynchronous javascript and Xml  ] - 요즘은 JSON을 주로 사용한다.

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

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

 요청을 보낸 후 대기 시간이 없이 다른 작업을 할 수 있음(처리가 끝을 확인하기 위해 Callback함수가 있다)

$.ajax({

 ~ 이부분이 끝나기도 전에 

})

아래부분의 함수가 호출된다 alert("Send Success")

비동기 이기 때문에

 

=====================================================================================

 

JSON 을 사용하기 위해서는  Jackson lib를 추가해야 한다.


<!--JSON -->

<dependency>
   <groupId>com.fasterxml.jackson.core</groupId>
   <artifactId>jackson-databind</artifactId>
   <version>2.13.3</version>
</dependency>

 또한 Controller 에 @ResponseBody(호출되는 메서드에)  어노테이션과 @RequsetBody (받는 객체에)를 사용한다.

 

@ResponseBody대신에  컨트롤러에 @RestController 붙이면 @ResponseBody없이 JSON데이터를 사용할 수 있따

 

 

=================================================================================

 

>> REST란  (Representational State Transfer API - REST규약을 준수하는API[Application Programming Interface])

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

 - 프로토콜에 독립적이며,  주로 HTTP를 사용하여 구현 

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

 - 리소스를 심플하게 가고 Method방식에 따라서 작업이 다르게

GET - READ

POST - WRITE

PUT - 파일 업로드

DELETE - 삭제

PATCH - 수정

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

 

>> RESTful API 설계

<동사>

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

<차이점>

- read,write,remove,modify등의 동사를 HTTP메서드가 역할을 할 수있도록 한다.

- 서버에있는 resource의 작업을 어떻게 할지는 HTTP메서드로 지정해준다

<명사>

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

 

=======================================================================================