모던 자바스크립트 Deep Dive 44장 정리 - REST API

Hyodduru ·2022년 11월 6일
0
post-thumbnail

REST(Representational State Transfer)의 기본 원칙을 성실히 지킨 서비스 디자인을 "RESTful"이라고 표현

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

REST API의 구성

REST API는 자원(resource), 행위(verb), 표현(representations)로 구성된다.
REST는 자체 표현 구조(self-de-scriptiveness)로 구성되어 REST API만으로 HTTP 요청의 내용을 이해할 수 있다.

  • 자원(resource) : URI(엔드포인트)
  • 행위(verb) : HTTP 요청 메서드
  • 표현(representations) : 페이로드

REST API 설계 원칙

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

리소스를 식별할 수 있는 이름은 동사보다는 명사를 사용한다.

GET /todos/1

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

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

DELETE /todos/1

JSON Server를 이용한 REST API 실습

JSON Server 설치

JSON Server는 json 파일을 사용하여 가상 REST API 서버를 구축할 수 있는 툴.

db.json 파일 생성

db.json 파일은 리소스를 제공하는 데이터베이스 역할을 한다.

JSON Server 실행

GET 요청

const xhr = new XMLHttpRequest();
xhr.open('GET', '/todos');

xhr.send();

xhr.onload = () => {
	if(xhr.status === 200) {
      document.querySelector('pre').textContext = xhr.response;
    } else {
      console.error('Error', xhr.status, xhr.statusText);
    }
};

POST 요청

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

xhr.open('POST', '/todos');

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

xhr.send(JSON.stringify({id : 4, content : 'Angular');
                         
// 생략 

PUT 요청

특정 리소스 전체를 교체할 때 사용

xhr.open('PUT', '/todos/4');

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

PATCH 요청

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

xhr.open('PATCH', '/todos/4');

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

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

DELETE 요청

xhr.open('DELETE', '/todos/4');

xhr.send();
profile
꾸준히 성장하기🦋 https://hyodduru.tistory.com/ 로 블로그 옮겼습니다

0개의 댓글