44장 REST API

* 아래 내용은 이웅모 저자님의  모던 자바스크립트 Deep Dive 책(위키북스)을 정리한 내용입니다.

   저작권에 문제가 된다면 삭제하도록 하겠습니다.

 

 

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

 

REST API의 구성

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

 

REST API 설계 원칙

가장 중요한 기본원칙은 두 가지다. 

 

⓵ URI는 리소스를 표현해야 한다. 리소스를 식별할 수 있는 이름은 동사보다는 명사를 사용한다.

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

#good
GET /todos/1

 

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

# bad
GET /todos/delete/1

# good
DELETE /todos/1

 

REST API 실습

실습에 사용할 JSON 데이터

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

 

GET 요청

리소스 요청

const xhr = new XMLHttpRequest();

// todos 리소스에서 모든 todo를 취득(index)
xhr.open('GET', '/todos');	// /todos/1 로 지정하면 1번 ID 데이터를 받아온다

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);
  }
};

 

POST 요청

새로운 리소스 생성

const xhr = new XMLHttpRequest();

// todos 리소스에 새로운 todo를 생성
xhr.open('POST', '/todos');

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

// 새로운 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);
  }
};

 

PUT 요청

특정 리소스 전체 교체

const xhr = new XMLHttpRequest();

// todos 리소스에서 id로 todo를 특정하여 id를 제외한 리소스 전체를 교체
xhr.open('PUT', '/todos/4');

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

// 리소스 전체를 교체하기 위해 페이로드를 서버에 전송해야 한다.
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);
  }
};

 

PATCH 요청

특정 리소스 일부 수정

const xhr = new XMLHttpRequest();

// todos 리소스의 id로 todo를 특정하여 completed만 수정
xhr.open('PATCH', '/todos/4');

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

// 리소스를 수정하기 위해 페이로드를 서버에 전송해야 한다.
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);
  }
};

 

DELETE 요청

id를 사용하여 todo 삭제

const xhr = new XMLHttpRequest();

// 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);
  }
};

 

 

 

 

Reference

- 이웅모 ,  모던 자바스크립트 Deep Dive , 위키북스 , 2020