개발 도서/자바스크립트 deepdive

44 REST API

hp0724 2023. 7. 13. 12:00

HTTP 장점을 최대한 활용할수있는 아키텍처로서 REST를 소개 REST 의 기본 원칙을 성실히 지킨 서비스 디자인을 RESTfull 이라고 표현한다.

REST 는 HTTP 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처고 ,REST API는 REST 기반으로 서비스 API를 구현한것을 의미한다.

44.1 REST API 구성

REST API 는 자원 행위 표현 의 3가지 요소로 구성된다 .

구성 요소 내용 표현 방법

자원 resource 자원 URI
행위 verb 자원에 대한 행위 HTTP 요청 메서드
표현 자원에 대한 행위의  
구체적 내용 페이로드  

44.2 REST API 설계 원칙

URI 는 리소스를 표현하는데 집중하고, 행위에 대한 정의는 HTTP 요청 메서드를 통해 하는것이 RESTful API를 설계하는 중심 규칙이다 .

  1. URI는 리소스를 표현해야 한다 . 리소스를 식별할수 있는 이름은 동사보다는 명사를 사용한다. 이름에 get 같은 행위에 대한 표현이 들어가서는 안된다.
#bad
GET/getTodos/1
GET/todos/show/1

#good
GET/todos/1
  1. 리소스에 대한 행위는 HTTP 요청 메서드로 표현한다. HTTP 요청 메서드는 클라이언트가 서버에게 요청의 종료와 목적을 알리는 방법이다. 요청 메서드를 사용하여 CRUD를 구현한다.

HTTP 요청 메서드 종류 목적 페이로드

GET index/retrieve 모든/특정 리소스 취득 x
POST create 리소스 생성 0
PUT replace 리소스 전체 교체 0
PATCH modify 리소스의 일부 수정 0
DELETE delete 모든/특정 리소스 삭제 x

리소스에 대한 행위는 HTTP 요청 메서드를 통해 표현하며 URI에 표현하지 않는다. 리소스를 취득하는 경우에는 GET, 리소스를 삭제하는 경우에는 DELETE 사용하여 리소스에 대한 행위를 명확히 표현한다 .

#BAD 
GET /todos/delete/1

#good
DELETE/todos/1

44.3 JSON Server 를 이용한 REST API 실습

44.3.1 JSON Server 설치

npm install -g json-server

44.3.2 db.json 파일 생성

{
  "todos": [
    {
      "id": 1,
      "content": "HTML",
      "completed": true
    },
    {
      "id": 2,
      "content": "CSS",
      "completed": false
    },
    {
      "id": 3,
      "content": "JavaScript",
      "completed": true
    }
  ]
}

44.3.3 JSON Server 실행

db.json 파일의 변경을 감지하게 하려면 watch 옵션을 추가한다 .

json-server --watch db.json

package.json 수정

{
  "name": "json-server-exam",
  "version": "1.0.0",
  "scripts": {
    "start": "json-server --watch db.json"
  },
  "devDependencies": {
    "json-sever": "^0.16.1"
  }
}

44.3.4 GET 요청

todos 리소스에서 모든 todo를 취득한다

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <pre></pre>
    <script>
      //XMLHttpRequest 객체 생성
      const xhr = new XMLHttpRequest();
      //HTTP 요청 초기화
      //todos 리소스에서 모든 todo를 취득
      xhr.open("GET", "/todos");

      //HTTP 요청 전송
      xhr.send();

      //load 이벤트는 요청이 성공적으로 완료된 경우 발생
      xhr.onload = () => {
        if (xhr.status === 200) {
          document.querySelector("pre").textContent = xhr.response;
        } else {
          console.error("Error", xhr.status, xhr.statusText);
        }
      };
    </script>
  </body>
</html>

todo 리소스에서 id를 사용하여 특정 todo를 취득 하기

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <pre></pre>
    <script>
      //XMLHttpRequest 객체 생성
      const xhr = new XMLHttpRequest();

      //HTTP 요청 초기화
      //todos 리소스에서 id를 사용하여 특정 todo를 취득
      xhr.open("GET", "./todos/1");

      //HTTP 요청 전송
      xhr.send();

      //load 이벤트는 요청이 성공적으로 완료된경우 요청
      xhr.onload = () => {
        if (xhr.status === 200) {
          document.querySelector("pre").textContent = xhr.response;
        } else {
          console.error("Error", xhr.status, xhr.statusText);
        }
      };
    </script>
  </body>
</html>

{
  "id": 1,
  "content": "HTML",
  "completed": true
}

44.3.5 POST 요청

todo 리소스에 새로운 todo를 생성하낟.

setRequestHeader 메서드를 사용하여 요청 몸체에 담아 서버로 전송할 페이로드의 MINE 타입을 지정해야 한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <pre></pre>
    <script>
      const xhr = new XMLHttpRequest();
      xhr.open("POST", "/todos");

      //요청 몸체에 담아 서버로 전송할 페이로드의 MINE 타입을 지정
      xhr.setRequestHeader("content-type", "application/json");

      //HTTP 요청 전송
      //새로운 todo를 생성하기 위해 페이로드를 서버에 전송해야 한다.
      xhr.send(JSON.stringify({ id: 6, content: "c", completed: false }));

      xhr.onload = () => {
        //200(ok) 또는 201 (created) 이면 정상적으로 응답된 상태
        if (xhr.status === 200 || xhr.status === 201) {
          document.querySelector("pre").textContent = xhr.response;
        } else {
          console.error("Error", xhr.status, xhr.statusText);
        }
      };
    </script>
  </body>
</html>

44.3.6 PUT 요청

PUT은 특정 리소스 전체를 교체할때 사용한다. PUT 요청 시에는 setRequestHeader 메서드를 사용하여 요청 몸체에 담아 서버로 전송할 페이로드의 MINE 타입을 지정해야 한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <pre></pre>
    <script>
      const xhr = new XMLHttpRequest();
      //todos 리소스에서 id로 todo를 특정하여 id를 제외한 리소스 전체를 교체
      xhr.open("PUT", "./todos/4");

      xhr.setRequestHeader("content-type", "application/json");

      //HTTP 요청 전송
      xhr.send(JSON.stringify({ id: 4, content: "React", completed: true }));

      xhr.onload = () => {
        if (xhr.status === 200) {
          document.querySelector("pre").textContent = xhr.response;
        } else {
          console.error("Error", xhr.status, xhr.statusText);
        }
      };
    </script>
  </body>
</html>

[
  {
    "id": 1,
    "content": "HTML",
    "completed": true
  },
  {
    "id": 2,
    "content": "CSS",
    "completed": false
  },
  {
    "id": 3,
    "content": "JavaScript",
    "completed": true
  },
  {
    "id": 4,
    "content": "React",
    "completed": true
  },
  {
    "id": 5,
    "content": "c#",
    "completed": false
  },
  {
    "id": 6,
    "content": "c",
    "completed": false
  }
]

44.3.7 PATCH 요청

특정 리소스의 일부를 수정할 때 사용한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <pre></pre>
    <script>
      const xhr = new XMLHttpRequest();
      xhr.open("PATCH", "./todos/4");
      xhr.setRequestHeader("content-type", "application/json");
      xhr.send(JSON.stringify({ completed: false }));

      xhr.onload = () => {
        if (xhr.status === 200) {
          document.querySelector("pre").textContent = xhr.response;
        } else {
          console.error("Error", xhr.status, xhr.statusText);
        }
      };
    </script>
  </body>
</html>

{
  "id": 4,
  "content": "React",
  "completed": false
}

44.3.8 DELETE 요청

todos 리소스에서 id를 사용하여 todo를 삭제한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <pre></pre>
    <script>
      const xhr = new XMLHttpRequest();
      xhr.open("DELETE", "./todos/4");
      //http 요청 전송
      xhr.send();

      xhr.onload = () => {
        if (xhr.status === 200) {
          document.querySelector("pre").textContent = xhr.response;
        } else {
          console.error("Error", xhr.status, xhr.statusText);
        }
      };
    </script>
  </body>
</html>

[
  {
    "id": 1,
    "content": "HTML",
    "completed": true
  },
  {
    "id": 2,
    "content": "CSS",
    "completed": false
  },
  {
    "id": 3,
    "content": "JavaScript",
    "completed": true
  },
  {
    "id": 5,
    "content": "c#",
    "completed": false
  },
  {
    "id": 6,
    "content": "c",
    "completed": false
  }
]