rustandbone Developer

모던 JS deep dive 2회차 챕터 44 REST API

29 Mar 2024

모던 JS deep dive 2회차

44. REST API

REST(REpresentational State Transfer)는 로이 필딩의 2000년 논문에서 처음 소개. 웹이 HTTP를 제대로 사용하지 못하고 있는 상황을 보고 HTTP의 장점을 최대한 활용할 수 있는 아키텍처로서 REST를 소개하고 HTTP 프로토콜을 의도에 맞게 디자인하도록 유도함. REST의 기본 원칙을 성실히 지킨 서비스 디자인을 RESTful이라고 표현함.

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

44.1 REST API의 구성

REST API는 자원(resource), 행위(verb), 표현(representations)의 3가지 요소로 구성. 자체 표현 구조(self-descriptiveness)로 구성되어 REST API만으로 HTTP 요청의 내용을 이해할 수 있음

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

44.2 REST API 의 설계 원칙

  1. 가장 중요한 기본 원칙
  2. URI 는 리소스를 표현하는데 집중하기
  3. 행위에 대한 정의는 HTTP 요청 메서드를 통해서 하기

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

URI는 리소스를 표현하는 데 중점을 두어야 함. 리소스를 식별할 수 있는 이름은 동사보다는 명사를 사용.

# BAD
GET / getTodos/1

# GOOD
GET / todos/1

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

HTTP 요청 메서드는 클라이언트가 서버에게 요청의 종류와 목적을 알리는 방법. 5가지 요청 메서드를 사용하여 CRUD를 구현.

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

44.3.4 GET 요청

todos 리소스에서 모든 todo를 취득(index).

JSON Server 의 루트 폴더에 public 폴더를 생성하고 JSON Server 를 중단한 후 재실행한다. 그리고 public 폴더에 get_index.html을 추가하고 브라우저에서 http:/localhost:3000/get_index.html로 접속.

~44-03~

<!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>

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

44.3.5 POST 요청

todos 리스트에 새로운 todo 생성.
setRequestHeader 메서드를 사용하여 요청 몸체에 담아 서버로 전송할 페이로드의 MIME 타입을 지정.

public 폴더에 post.html 을 추가하고 브라우저에서 http://localhost:3000/post.html로 접속한다.

<!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>

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

44.3.6 PUT 요청

PUT은 특정 리소스 전체를 교체할 때 사용. todos 리소스에서 id로 todo를 특정하여 id를 제외한 리소스 전체를 교체. PUT 요청 시, setRequestHeader 메서드를 사용하여 요청 몸체에 담아 서버로 전송할 페이로드의 MIME 타입을 지정.

public 폴더에 put.html을 추가하고 브라우저에서 http://localhost:3000/put.html로 접속.

<!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>

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

44.3.7 PATCH 요청

PATCH는 특정 리소스의 일부를 수정할 때 사용. 다음 예제에서는 todos 리소스의 id로 todo를 특정하여 completed만 수정. PATCH 요청 시에는 setRequestHeader 메서드를 사용하여 요청 몸체에 담아 서버로 전송할 페이로드의 MIME 타입을 지정.

public 폴더에 patch.html을 추가하고 브라우저에서 http://localhost:3000/patch.html로 접속.

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

      // HTTP 요청 초기화
      // todos 리소스의 id로 todo를 특정하여 completed만 수정
      xhr.open("PATCH", "/todos/4");

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

      // HTTP 요청 전송
      // 리소스를 수정하기 위해 페이로드를 서버에 전송해야 한다.
      xhr.send(JSON.stringify({ completed: false }));

      // 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>

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

44.3.8 DELETE 요청

todos 리소스에서 id를 사용하여 todo 삭제.
public 폴더에 delete.html을 추가하고 브라우저에서 http://localhost:3000/delete.html로 접속.

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

      // HTTP 요청 초기화
      // todos 리소스에서 id를 사용하여 todo를 삭제한다.
      xhr.open("DELETE", "/todos/4");

      // 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>

{}

Related posts