[모던 자바스크립트 Deep Dive] - 44 REST API

• REST의 기본원칙을 성실히 지킨 서비스 디자인을 "RESTful"이라고 표현
• REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍쳐
• REST API는 REST를 기반으로 서비스 API를 구현한 것을 의미

---

44.1 REST API의 구성

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

44.2 REST API 설계 원칙

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

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

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

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

< 주요 HTTP 요청 메서드 5가지 >

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

리소스에 대한 행위는 HTTP 요청 메서드를 통해 표현하며, URI에 표현하지 않는다.
(ex. 리소스 취득은 GET, 리소스 삭제는 DELETE)

# bad
GET /todos/delete/1

#good
DELETE /todos/1

---

44.3 JSON Server를 이용한 REST API 실습

44.3.1 JSON Server 설치

JSON Server는 json파일을 사용하여 가상 REST API 서버를 구축할 수 있는 툴이다.
먼저 터미널에서 아래와같이 입력하여 설치를 진행한다.

 $ mkdir json-server-exam && cd json-server-exam
 $ npm init -y
 $ npm install json-server--save-dev

44.3.2 db.json 파일 생성

프로젝트 루트폴더(/json-server-exam)에 다음과 같이 db.json파일을 생성한다.

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

44.3.3 JSON Server 실행

JSON Server를 실행하고, db.json파일의 변경을 감지하기위해 watch옵션을 추가

## 기본 포트(3000) 사용 / watch 옵션 적용
$ json-server--watch db.json

기본포트는 3000이며, 포트를 변경하려면 port옵션을 추가한다.

## 포트변경/ watch 옵션 적용
$ json-server--watch db.json --port 5000

위와같이 명령어를 입력하는 번거롭기 때문에, package.json파일의 scripts를 다음과 같이 수정한 후, npm start명령어를 통해 실행할 수도 있다.

 {
 "name": "json-server-exam",
 "version":"1.0.0",
 "scripts" :{
 	"start": "json-server --watch db.json"
 },
 "deDependencies": {
 	"json-server": "^0.16.1"
	 }
 }

44.3.4 GET 요청

• JSON Server의 루트폴터에 public 폴더를 생성하고 JSON Server를 중단한 후 재실행한다.
• public 폴더에 get_index.html을 추가
• script안에 아래의 예제와같이 추가
• 브라우저에서 http://localhost:3000/get_index.html 로 접속
  

//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.err('Erro', xhr.status, xhr.statusText);
     }
  };
  

---

• todos 리소스에서 id를 사용하여 특정 todo를 취득(retrieve)한다.

• public폴더에 get_retrieve.html을 추가

• script에 아래와같은 코드 추가

• 브라우저에서 http://localhost:3000/get_retrieve.html로 접속

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

  44.3.5 POST 요청

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

• public 폴더에 post.html을 추가

• 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:5, 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 요청

• PUT은 특정 리소스 전체를 교체할 때 사용한다.
• PUT 요청 시에는 setRequestHeader 메서드를 사용하여 요청 몸체에 담아 서버로 전송할 페이로드의 MIME 타입을 지정해야 한다.

다음 예제에서는 todos리소스에서 id로 todo를 특정하여 id를 제외한 리소스 전체를 교체한다.

• public 폴더에 put.html을 추가
• 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.stringfy({ 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);
    }
};

44.3.7 PATCH 요청

• PATCH는 특정 리소스의 일부를 수정할 때 사용한다.
• PATCH는 요청 시에는 setRequestHeader 메서드를 사용하여 요청 몸체에 담아 서버로 전송할 페이로드의 MIME 타입을 지정해야 한다.

다음 예제에서는 todos리소스에서 id로 todo를 특정하여 completed만 수정한다.

• public 폴더에 aptch.html을 추가
• 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.stringfy({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);
    }
};

44.3.7 DELETE 요청

다음 예제에서는 todos리소스에서 id를 사용하여 todo를 삭제한다.

• public 폴더에 delete.html을 추가
• script에 아래와같이 작성
• 브라우저에서 접속

// XMLHttpRequest 객체 생성 
const xhr = new XMLHttpRequest();

//HTTP 요청 초기화
// todos 리소스에서 id로 todo를 특정하여 completed만 수정
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);
    }
};