[Javascript]REST API

youngseo·2022년 2월 14일

Javascript

목록 보기

11/46

REST API

기계와 기계가 규격화된 방식으로 통신할 수 있도록 돕는 규칙인 REST API는 웹의 통신 규약인 HTTP를 이용합니다.

API란 컴퓨터의 기능을 실행시키는 방법을 의미합니다. 컴퓨터 언어마다 화면에 hello world를 출력하는 방식이 다릅니다.

/*javascript*/
document.write('hello world')
/*python*/
print('hello world')

여기서 사용된 document.write, print 하나하나가 API라고 할 수 있습니다.

마찬가지로 REST API도 컴퓨터의 기능을 실행시키는 명령입니다. 하지만 REST API는 내컴퓨터가 아닌 다른 사람의 컴퓨터를 실행시킵니다.

예를 들어 앱이 https://www.google.com/.../calendars/calendar_id 주소로 접속을 하는 경우 구글캘린더에 적힌 나의 캘리더를 구글 캘린더에서 아래와 같이 출력해줍니다.

{
  "summary":"일정",
  "timeZone": "Asia/Seoul"
}

REST API는 특정기술을 의미하는 것이 아닌 http를 이용해서 기계들이 통신할 때 http가 가진 잠재력을 최대한 이용할 수 있도록 유도하기 위한 고민의 결과물이라고 할 수 있습니다.

REST API 메소드

Resource에 대한 가공방법은 Create, Read, Update, Delete 4가지가 있습니다. 이러한 작업들을 REST API에서는 method라고 합니다.

또한 REST API는 웹의 통신규약인 HTTP를 이용하기 때문에 HTTP가 가지고 있는 아래의 메소드를 이용합니다.

Request Method (요청의 종류)
GET : 자료를 요청할 때 사용
POST : 자료의 생성을 요청할 때 사용
PUT, PATCH : 자료의 수정을 요청할 때 사용(전체수정: put, 부분수정:patch)
DELETE : 자료의 삭제를 요청할 때 사용

fetch를 이용한 REST API 요청

npm i -g json-server
db.json작성

{
  "topics" : [
    {
      "id": 1,
      "title": "REST",
      "body": "REST is..."
    }
  ],
  "Comments": [
    {
    "id": 1,
    "body": "Post is...",
    "topicId": 1
    },
      {
      "id": 2,
      "body": "Post is...",
      "topicId": 1    
    }
  ]
}

json-server --watch db.json

1. 생성 POST

규정하고 있는 것.
:데이터의 리소스는 url를 통해 식별합니다.
:method는 http의 규정대로 사용합니다.(POST, GET, PUT, DELETE)
규정하고 있지 않은 것.
:클라이언트와 서버가 어떤 데이터 타입으로 통신할 것인지?

fetch('topics', { //Resource의 식별자
    method:'POST', //POST
    headers:{'content-type':'application/json'},//데이터 형식
    body:JSON.stringify({//json형태로 데이터 형성
        title:'fetch', body:'fetch is ...'
    })
})
    .then(
        function(response){
            console.log('status', response.status);
            return response.json()
        }
    )
    .then(
        function(result){
            console.log(result);
        }
    )

2. 읽기 GET- (1) Collection 읽기

fetch('topics', {method:'GET'}) //topics에 해당하는 resource를 모두 가져옴
.then(
    function(response){
        return response.json()
    }
)
.then(
    function(result){
        console.log(result);
    }
)

3. 읽기 GET- (2) 부분 읽기

fetch('topics/2') //topics의 id2번을 가져오기
.then(
    function(response){
        return response.json()
    }
)
.then(
    function(result){
        console.log(result);
    }
)

4. 부분 수정 PATCH

전송되지 않은 데이터는 삭제되지 않습니다.

fetch('topics/2', {
    method:'PATCH', 
    headers:{'content-type':'application/json'},
    body:JSON.stringify({
        title:'fetch - patch'
    })
})
    .then(
        function(response){
            return response.json()
        }
    )
    .then(
        function(result){
            console.log(result);
        }
    )

5. 전체수정 PUT

PATCH와 달리 전송되지 않은 데이터는 삭제됩니다.

fetch('topics/2', {
    method:'PUT', 
    headers:{'content-type':'application/json'},
    body:JSON.stringify({
        title:'fetch - put'
    })
})
    .then(
        function(response){
            return response.json()
        }
    )
    .then(
        function(result){
            console.log(result);
        }
    )

6. 삭제 DELETE

fetch('topics/2', { //부분삭제
    method:'DELETE'
})
    .then(
        function(response){
            return response.json()
        }
    )
    .then(
        function(result){
            console.log(result);
        }
    )

전체삭제의 경우 위험한 명령어이기 때문에 막혀있는 경우가 많습니다.

fetch('topics', {
    method:'DELETE'
})
    .then(
        function(response){
            return response.json()
        }
    )
    .then(
        function(result){
            console.log(result);
        }
    )

7. 관계 표현

부모가 되는 것을 앞에 적고 부모의 element값을 적은 후 종속되는 것을 적습니다.
ex) topics/1/comments

fetch('topics/1/comments', {
    method:'GET'
})
    .then(
        function(response){
            return response.json()
        }
    )
    .then(
        function(result){
            console.log(result);
        }
    )