44장. REST API

Doozuu·2023년 9월 22일

모던 자바스크립트 Deep Dive

Javascript

목록 보기

82/99

HTTP의 장점을 최대한 활용할 수 있는 아키텍처로서 REST가 소개되었고, 이는 HTTP 프로토콜을 의도에 맞게 디자인하도록 유도하고 있다.

REST의 기본 원칙을 성실히 지킨 서비스 디자인을 RESTful 이라고 표현한다.

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

44.1 REST API의 구성

REST API는 자원, 행위, 표현의 3가지 요소로 구성된다.
REST는 자체 표현 구조로 구성되어 REST API만으로 HTTP 요청의 내용을 이해할 수 있다.

자원: 자원 (URI)
행위 : 자원에 대한 행위 (HTTP 요청 메서드)
표현 : 자원에 대한 행위의 구체적 내용 (페이로드)

44.2 REST API 설계 원칙

REST에서 가장 중요한 기본적인 원칙은 두 가지다.

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

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

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

리소스를 식별할 수 있는 이름은 동사보다는 명사를 사용한다.
따라서 이름에 get 같은 행위에 대한 표현이 들어가서는 안 된다.

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

# 좋은 예시
GET todos/1

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

HTTP 요청 메서드는 클라이언트가 서버에게 요청의 종류와 목적을 알리는 방법이다.
주로 5가지 요청 메서드를 사용하여 CRUD를 구현한다.

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

리소스에 대한 행위는 HTTP 요청 메서드를 통해 표현하며 URI에 표현하지 않는다.

# 나쁜 예시
GET /todos/delete/1

# 좋은 예시
DELETE todos/1

44.3 JSON Server를 이용한 REST API 실습

JSON Server를 사용해 가상 REST API 서버를 구축하여 HTTP 요청을 전송하고 응답을 받을 수 있다.

44.3.1 JSON Server 설치

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

설치 방법

npm install json-server --save-dev

44.3.2 db.json 파일 생성

프로젝트 루트 폴더에 다음과 같이 db.json 파일을 생성한다.
db.json은 리소스를 제공하는 데이터베이스 역할을 한다.

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

44.43.3 JSON Server 실행

터미널에서 다음과 같이 명령어를 입력하여 JSON Server를 실행한다.
JSON Server가 데이터베이스 역할을 하는 db.json 파일의 변경을 감지하게 하려면 watch 옵션을 추가한다.

json-server --watch db.json

위와 같이 매번 명령어를 입력하는 번거로움을 없애기 위해 package.json 파일의 scripts를 다음과 같이 수정할 수 있다.

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

터미널에서 npm start 명령어를 입력하여 JSON Server를 실행한다.

44.3.4 GET 요청

todos 리소스에서 모든 todo를 취득한다.

public 폴더에 get_index.html 을 추가하고 브라우저에서 http://localhost:3000/get_index.html로 접속한다.

<!DOCTYPE html>
<html>
<body>
	<pre></pre>
    <script>
    const xhr = new XMLHttpRequest();

	// HTTP 요청 초기화
    // 모든 todo 취득
	xhr.open('GET', '/todos');
    // 특정 todo 취득
    xhr.open('GET', '/todos/1');

	// HTTP 요청 전송
	xhr.send();
	
	// load 이벤트는 요청이 성공적으로 완료된 경우 발생한다.
	xhr.onload = () => {
  		// 정상적으로 응답이 오면 응답을 객체로 변환한다.
  		if(xhr.response === 200){
    		document.querySelector('pre').textContent = xhr.response;
    	}else{
    		console.log('Error', xhr.status, xhr.statusText);
    	}
	};
  </script>
</body>
</html>

44.3.5 POST 요청

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

public 폴더에 다음 post.html을 추가하고 브라우저에서 http://localhost:3000/post_index.html로 접속한다.

<!DOCTYPE html>
<html>
<body>
	<pre></pre>
    <script>
    const xhr = new XMLHttpRequest();

	// HTTP 요청 초기화
	xhr.open('POST', '/todos');

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

	// HTTP 요청 전송
	xhr.send(JSON.stringify({id: 4, content: 'Angular', completed: false}));
	
	// load 이벤트는 요청이 성공적으로 완료된 경우 발생한다.
	xhr.onload = () => {
  		// 정상적으로 응답이 오면 응답을 객체로 변환한다.
  		if(xhr.status === 200){
    		document.querySelector('pre').textContent = xhr.response;
    	}else{
    		console.log('Error', xhr.status, xhr.statusText);
    	}
	};
  </script>
</body>
</html>

44.3.6 PUT 요청

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

public 폴더에 다음 put.html을 추가하고 브라우저에서 http://localhost:3000/put_index.html로 접속한다.

<!DOCTYPE html>
<html>
<body>
	<pre></pre>
    <script>
    const xhr = new XMLHttpRequest();

	// HTTP 요청 초기화
	xhr.open('PUT', '/todos/4');

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

	// HTTP 요청 전송
	xhr.send(JSON.stringify({id: 4, content: 'React', completed: false}));
	
	// load 이벤트는 요청이 성공적으로 완료된 경우 발생한다.
	xhr.onload = () => {
  		// 정상적으로 응답이 오면 응답을 객체로 변환한다.
  		if(xhr.status === 200){
    		document.querySelector('pre').textContent = xhr.response;
    	}else{
    		console.log('Error', xhr.status, xhr.statusText);
    	}
	};
  </script>
</body>
</html>

44.3.7 PATCH 요청

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

public 폴더에 다음 patch.html을 추가하고 브라우저에서 http://localhost:3000/patch_index.html로 접속한다.

<!DOCTYPE html>
<html>
<body>
	<pre></pre>
    <script>
    const xhr = new XMLHttpRequest();

	// HTTP 요청 초기화
	xhr.open('PATCH', '/todos/4');

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

	// HTTP 요청 전송
	xhr.send(JSON.stringify({completed: true}));
	
	// load 이벤트는 요청이 성공적으로 완료된 경우 발생한다.
	xhr.onload = () => {
  		// 정상적으로 응답이 오면 응답을 객체로 변환한다.
  		if(xhr.status === 200){
    		document.querySelector('pre').textContent = xhr.response;
    	}else{
    		console.log('Error', xhr.status, xhr.statusText);
    	}
	};
  </script>
</body>
</html>

44.3.8 DELETE 요청

public 폴더에 다음 delete.html을 추가하고 브라우저에서 http://localhost:3000/delete_index.html로 접속한다.

<!DOCTYPE html>
<html>
<body>
	<pre></pre>
    <script>
    const xhr = new XMLHttpRequest();

	// HTTP 요청 초기화
	xhr.open('DELETE', '/todos/4');

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

	// HTTP 요청 전송
	xhr.send();
	
	// load 이벤트는 요청이 성공적으로 완료된 경우 발생한다.
	xhr.onload = () => {
  		// 정상적으로 응답이 오면 응답을 객체로 변환한다.
  		if(xhr.status === 200){
    		document.querySelector('pre').textContent = xhr.response;
    	}else{
    		console.log('Error', xhr.status, xhr.statusText);
    	}
	};
  </script>
</body>
</html>