Notice

Recent Posts

Recent Comments

Link

« 2025/02 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

Tags more

Archives

Today

Total

관리 메뉴

꿈꾸는 개발자

44장 REST API 본문

JS DeepDive

44장 REST API

rickysin 2023. 1. 31. 14:37

로이 필딩이 HTTP의 장점을 최대한 활용할 수 있는 아키텍처로서 REST(Representational State Transfer)를 소개함 → 웹이 HTTP의 장점을 최대로 살리고 있지 못 했음 → HTTP 프로토콜을 의도에 맞게 디자인하도록 유도함
REST의 기본 원칙을 성실히 지킨 서비스 디자인을 “RESTful”이라 표현함!
REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처
REST API는 REST를 기반으로 서비스 API를 구현한 것

44.1. REST API의 구성

REST API는 자원, 행위, 표현 (3가지)로 구성됨
REST는 자체 표현 구조로 구성되어 REST API만으로 HTTP 요청의 내용을 이해할 수 있음
페이로드에 대한 추가적 정보:

https://melonicedlatte.com/web/2020/01/14/205200.html

페이로드(payload)란? 개념 설명 - Easy is Perfect

페이로드(payload)는 전송되는 데이터를 의미합니다. 데이터를 전송할 때, 헤더와 메타데이터, 에러 체크 비트 등과 같은 다양한 요소들을 함께 보내어, 데이터 전송의 효율과 안정성을 높히게 됩

melonicedlatte.com

44.2. REST API 설계 원칙

가장 중요한 두 가지 기본 원칙

URI 리소스를 표현해야 한다

리소스를 식별할 수 있는 이름은 동사보다는 명사를 사용해야 함
이름에 get 같은 행위에 대한 표현이 들어가면 안 됨

나쁜 예시
GET /getTodos/1
GET /todos/show/1

좋은 예시
GET /todos/1

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

HTTP 요청 메서드는 클라이언트가 서버에게 요청의 종류와 목적(리소스에 대한 행위)을 알리는 방법
주로 5가지 요청 메시지(GET, POST, PUT, PATCH, DELETE 등)를 사용하여 CRUD를 구현
- CRUD: Create, Read, Update, Delete ⇒ 소프트웨어에서 대부분 데이터처리를 위해 사용하는 4가지 기능을 의미
리소스에 대한 행위는 HTTP 요청 메서드를 통해 표현하며 URI에 표현하지 않음
예를 들어 리소스를 취득하는 경우에는 GET, 리소스를 삭제하는 경우에는 DELETE를 사용하여 리소스에 대한 행위를 명확히 표현

//Bad
GET /todos/delete/1

//Good
DELETE /todos/1

44.3 JSON Server를 이용한 REST API 실습

44.3.4 GET 요청

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

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

<!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 타입을 지정해야 함!
- MIME타입: 클라이언트에게 전송된 문서의 다양성을 알려주기 위한 매커니즘(출처: MDN) ⇒ 브라우저에 확장자는 의미가 없기 때문에 리소스를 내려 받을 때 해야할 기본 동작이 무엇인지 결정하기 위해 대게 MIME 타입을 사용함 ex) text, image, audio,

MIME 타입 - HTTP | MDN

<!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 PUT 요청

PUT 특정 리소스 전체를 교체할 때 사용! 해당 예제에서는 id로 todo를 특정하여, id를 제외한 리소스 전체를 교체한다.

<!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.7 PATCH 요청 && Delete 요청

PATCH는 특정 리소스의 일부를 수정할 때 사용함!
특정/모든 리소스를 삭제할 때 delete를 사용!

Code 출처:

https://github.com/wikibook/mjs

GitHub - wikibook/mjs: 《모던 자바스크립트 Deep Dive》 예제 코드

《모던 자바스크립트 Deep Dive》 예제 코드. Contribute to wikibook/mjs development by creating an account on GitHub.

github.com

'JS DeepDive' Related Articles

38장 브라우저의 렌더링 과정 2023.01.31