• REST API의 의미

  • REpresentational State Transfer 

  • Application Programming Interface

  • 특정 시점의 [자원] [상태] [전달]

  • stateless - 어느 시점, 상태더라도 상호 소통이 가능

• REST API의 특징

  • 자원 - URI

    • URI는 자원(명사)을 표현해야한다. 띄어쓰기는 하이픈으로 표현

  • 행위 - Http Method

    • 행위는 Http Method로 표현 (GET, POST, PUT(갈아끼기), PATCH(부분 수정), DELETE)

  • 표현 - JSON

    • 자원의 표현은 주로 JSON(key, value) 형식으로 전달된다.

  • 웹에서는 일련의 문자열(byte)로 직렬화하여 송수신하고, 역직렬화(객체화) 과정을 통해 데이터를 사용한다.

• RestController

  • @RestController = @Controller + @ResponseBody 

  • json 형태로 응답한다.
    - new ResponseEntity(T, HttpStatus) 반환
    - Custom Response 객체 반환

  • @RequestBody로 json 요청 객체를 받는다. 

• Ajax 사용법

  • type에는 GET, POST, PATCH, DELETE 등 HTTP METHOD가 들어간다.
    
    

  • url - GET 요청 시에는 파라미터와 쿼리스트링을 문자열에 붙여 전달 가능하다.
    
    

  • data는 요청 시 필요한 객체를 전달한다.

    • GET 방식이면 url뒤에 쿼리스트링으로 붙어서 전달된다. 

    • POST 방식이면 JSON.stringify()로 형태 변환이 필요하다.
      
      

  • contentType은 요청하는 데이터의 형태이다.  

    • json 형태는 application/json; charset=utf-8

    • form 형태는 applicaiton/x-www-form-urlencoded; charset=utf-8 (기본값)

    • multipart/form-data 형태는 contentType: false, processData: false로 지정한 후
      enctype: "multipart/form-data"로 설정한다.
      
      

  • dataType은 응답받는 데이터의 형태이다.

    • 기본값은 text이며, json 형태일 경우 json으로 설정해주면 된다.

$.ajax({
    type: "GET",
    url: `/api/board/${id}`,
    dataType: "json",
    success: function(result){
        // 반환된 객체 처리
        // 객체 상태에 따라 성공, 에러 분기 처리
    }
});

$.ajax({
    type: "POST",
    url: "/api/board",
    data: JSON.stringify(data),
    contentType: "application/json; charset=utf8",
    dataType: "json",
    success: function(result){
        location.href=`/board/detail/${result.body}`;
        // result.body == entity의 id
        // 서버에서 return id하고 dataType text로 받으면 result == id
    },
    error: function(error){
        // http status를 200으로 보내지 않으면 해당 분기 타게 됨
        // 반환 객체는 responseText에 text로 담기기 때문에 JSON으로 변환 시켜줌

        let errRes = JSON.parse(error.responseText); 
        alert(errRes.body);
 
    }
});

$.ajax({
    type: "POST",
    url: "/api/board",
    data: new FormData($("form")[0]),
    enctype: "multipart/form-data",
    contentType: false,
    processData: false,
    dataType: "json",
    success: function(result){
    }

});