Written by Wayne
on 

[Javascript]REST API

웹 개발자 필수! restful API




REST API 구성

REST의 기본 원칙을 지킨 서비스 디자인을 “RESTful”이라고 한다. REST API는 자원, 행위, 표현의 3가지 요소로 구성된다.



REST API 설계 원칙

REST에서 가장 중요한 원칙은 URI는 리소스를 표현하는데 집중하고 행위에 대한 정의는 HTTP 요청 메서드를 통해한다는 것이다.

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

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

# bad

GET /getTodos/1
GET /todos/show/1

# good

GET /todos/1


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

즉, 리소스에 대한 행위는 URI에 표현하지 않는다.

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


# bad

GET /todos/delete/1

# good

DELETE /todos/1



RESTful API 코드 예시

1. GET

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

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


2. POST

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


3. PUT

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


4. PATCH

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


5. DELETE

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

Reference

모던 자바스크립트 deep dive
MDN REST API