nhyunzi
[ 모던 자바스크립트 Deep Dive ] 44 REST API 본문
- 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를 구현한다.
# 나쁜 예시
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-dev44.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>