[모던 자바스크립트 Deep Dive]44장 REST API

Posted Sep 30, 2022

By your_full_name 9 min read

REST(REpresentational State Transfer)
- HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처
  - HTTP의 장점을 최대한 활용할 수 있는 아키텍처로서 소개되었다.
  - HTTP 프로토콜을 의도에 맞게 디자인하도록 유도한다.
- REST를 기반으로 구현한 서비스 API ⇒ REST API

44.1 REST API의 구성

REST는 자체 표현 구조(self-descriptiveness)로 구성되어 REST API만으로 HTTP 요청의 내용을 이해할 수 있다.

구성 요소	내용	표현 방법
자원(resource)	자원	URI(엔드포인트)
행위(verb)	자원에 대한 행위	HTTP 요청 메서드
표현(representations)	자원에 대한 행위의 구체적 내용	페이로드

44.2 REST API 설계 원칙

1. URI는 리소스를 표현해야 한다.

# bad
GET /getTodos/1
GET /todos/show/1

#good
GET /todos/1

URI는 리소스를 표현하는 데 중점을 두어야 한다.
- 이름에 행위에 대한 표현이 들어가서는 안 된다.
리소스를 식별할 수 있는 이름은 동사보단 명사를 사용한다.

2. 리소스에 대한 행위는 HTTP 요청 메서드로 표현한다.

# bad
GET /todos/delete/1

# good
DELETE /todos/1

HTTP 요청 메서드: 클라이언트가 서버에 요청의 종류와 목적을 알리는 방법

목적 ⇒ 리소스에 대한 행위

HTTP 요청 메서드	종류	목적	페이로드
GET	index/retrieve	모든/특정 리소스 취득	X
POST	create	리소스 생성	O
PUT	replace	리소스 전체 교체	O
PATCH	modify	리소스 일부 수정	O
DELETE	delete	모든/특정 리소스 삭제	X

44.3 JSON Server를 이용한 REST API 실습

44.3.1 JSON Server 설치

npm(node package manager)
- 자바스크립트 패키지 매니저
- Node.js에서 사용할 수 있는 모듈을 패키지화하여 모아둔 저장소
- 패키지 설치 및 관리를 위한 CLI 제공

44.3.2 `db.json` 파일 생성

생략

44.3.3 JSON Server 실행

package.json 파일의 scripts를 수정하여 npm start 명령으로 간단하게 실행할 수 있다.

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

44.3.4 GET 요청

모든 todo 취득

  
<!DOCTYPE html>
<html>
<body>
  <pre></pre>
  <script>
    // XMLHttpRequest 객체 생성
    const xhr = new XMLHttpRequest();

    // HTTP 요청 초기화
    // todos 리소스에서 모든 todo를 취득(index)
    xhr.open('GET', '/todos');

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

    // load 이벤트는 요청이 성공적으로 완료된 경우 발생한다.
    xhr.onload = () => {
      // status 프로퍼티 값이 200이면 정상적으로 응답된 상태다.
      if (xhr.status === 200) {
        document.querySelector('pre').textContent = xhr.response;
      } else {
        console.error('Error', xhr.status, xhr.statusText);
      }
    };
  </script>
</body>
</html>

특정 todo 취득

  
<!DOCTYPE html>
<html>
  <body>
    <pre></pre>
    <script>
      // XMLHttpRequest 객체 생성
      const xhr = new XMLHttpRequest();

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

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

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

44.3.5 POST 요청

POST 요청 시에는 setRequestHeader 메서드를 사용해 페이로드의 MIME 타입을 지정해야 한다.

  
<!DOCTYPE html>
<html>
  <body>
    <pre></pre>
    <script>
      // XMLHttpRequest 객체 생성
      const xhr = new XMLHttpRequest();

      // HTTP 요청 초기화
      // todos 리소스에 새로운 todo를 생성
      xhr.open("POST", "/todos");

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

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

      // load 이벤트는 요청이 성공적으로 완료된 경우 발생한다.
      xhr.onload = () => {
        // status 프로퍼티 값이 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 요청 시에는 setRequestHeader 메서드를 사용해 페이로드의 MIME 타입을 지정해야 한다.

  
<!DOCTYPE html>
<html>
  <body>
    <pre></pre>
    <script>
      // XMLHttpRequest 객체 생성
      const xhr = new XMLHttpRequest();

      // HTTP 요청 초기화
      // todos 리소스에서 id로 todo를 특정하여 id를 제외한 리소스 전체를 교체
      xhr.open("PUT", "/todos/4");

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

      // HTTP 요청 전송
      // 리소스 전체를 교체하기 위해 페이로드를 서버에 전송해야 한다.
      xhr.send(JSON.stringify({ id: 4, content: "React", completed: true }));

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

44.3.6 PATCH 요청