- REST의 기본원칙을 성실히 지킨 서비스 디자인을 "RESTful"이라고 표현
- REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍쳐
- REST API는 REST를 기반으로 서비스 API를 구현한 것을 의미
44.1 REST API의 구성
| 구성요소 | 내용 | 표현방법 |
|---|---|---|
| 자원 | 자원 | 엔드포인트(URI) |
| 행위 | 자원에 대한 행위 | HTTP 요청 메서드 |
| 표현 | 자원에 대한 행위의 구체적 내용 | 페이로드 |
44.2 REST API 설계 원칙
- URI는 리소스를 표현해야 한다.
리소스를 식별할 수 있는 이름은 도앗보다는 명사를 사용한다.
#bad
GET /getTodos/1
GET /todos/show/1
#good
GET /todos/1
- 리소스에 대한 행위는 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/144.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-dev44.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);
}
};
FE Developer