Spring) JSON, Ajax, REST API

JSON 자바스크립트 객체 표기법


{ 속성 : 속성값, 속성 : 속성값 , ...}
[{ 속성 : 속성값, 속성 : 속성값 , ...}] 객체배열
{키 : {속성명 : 속성값, ...} , 키 {속성명 : 속성값} ...} map 형태


stringify() 
js객체를 서버로 전송하려면 직렬화(문자열로 변환) 필요해요

parse()
서버가 보낸 데이터(JSON문자열)을 js객체로 변환할 때, 역직렬화

JSON.stringify() - 객체를 JSON 문자열로 변환(JS -> 문자열)
JSON.parse() - JSON 문자열을 객체로 변환(문자열 -> JS)

{ name : "John", age: 30 } -> stringify -> '{ name : "John", age: 30 }'
'{ name : "John", age: 30 }' -> parse -> { name : "John", age: 30 }


ajax 비동기 자바스크립트 xml
비동기 통신으로 데이터를 받기 위한 기술,
웹페이지 전체가 아니라 일부만 업데이트 가능!(새 창이 아니라, 일부만 반응 가능)


동기 ? -> 서버가 처리하고 응답 올 때까지 기다려야 함
비동기 ? -> 서버가 처리하기 전에 응답이 없어도 다른 요청 가능


비동기여서 callback 함수를 보냄(성공? 이면 이거하고 실패?이면 이거 해)

jQuery를 이용한 Ajax

$.ajax({
        type: 'POST', // 요청한 메서드
        url: '/signUp', // 요청한 url
        header: {"content-type":"application/json"}, // 요청 헤더(내가 json으로 보내는 거야)
        dataType: 'text', // 전송할 데이터의 타입
        data: JSON.stringify(data), // 서버로 전송할 데이터, 직렬화(문자열화) 필요해서 stringify()
        success: function (data) { //서버로부터 응답(data)가 도착하면 호출될 함수
          alert(data); // data는 서버가 전송한 데이터
        },
        error: function () { //에러가 발생했을 때 호출될 함수
          alert("가입 실패");
        }
      });

   
  
data를 서버가 받기 위해서는 @RequestBody 애너테이션을 붙여야함
그리고 서버에게 다시 응답을 보내기 위해서는 @ResponseBody 애너테이션을 붙여야함

@ResponseBody //얘가 다시 응답 보냄
@PostMapping("/signUp")
public String signUpTest(@RequestBody MemberDto dto) throws Exception { // dto로 요청이 옴

@ResponseBody 대신, 클래스에 @RestController 도 가능(이 클래스에 있는 모든 메서드를 응답할수있게 만듬)
귀찮으면 걍 @RestController 클래스 붙이기
Controller + ResponseBody 기능을 합니다...!!

//@Controller
//@RequestMapping("/hi")
@ResponseBody
public class SignUpController

REST란 ?
웹 서비스 디자인 아키텍쳐 접근 방식,
프로토콜에 독립적, 주로 HTTP를 사용해서 구현함
리소스 중심의 API 디자인 - HTTP 메서드로 수행할 작업을 정의

이게 뭔 뜻이냐 ????


POST, GET, PUT, DELETE 등의 HTTP메서드(매핑하는 거)가지고
똑같은 URI지만 다른 방식으로 보낼 때 기능을 다르게 하게 만듬

/rest -> 같은 URI지만
POST -> 가입
GET -> 검색 
PUT -> 업로드
PATCH -> 수정
DELETE -> 삭제


이런 식으로 리소스마다 수행할 작업이 다른 거 !


RESTful API의 설계란?
동사가 아니라 명사로 작성하는 것!

읽기 /comments/read?cno=번호 -> GET -> 지정된 번호 댓글 보여주기
쓰기 /comments/write -> POST -> 작성한 게시물을 저장하기
삭제 /comments/remove -> POST -> 댓글 삭제
수정 /comment/modify -> POST -> 수정된 게시물을 저장하기


읽기 /comments -> GET -> 모든 댓글 보여주기
읽기 /comments/{con} -> GET -> 지정된 번호 댓글 보여주기
쓰기 /comments -> POST -> 새로운 댓글 저장하기
삭제 /comments/{cno} -> DELETE -> 지정된 번호의 댓글 삭제
수정 /comment/{cno} -> PUT/PATCH -> 수정된 댓글 저장하기



이런 식으로 만들 수도 있다~ 이 말이야!!!