-
HTTP의 장점을 최대한 활용할 수 있는 아키텍처로서 REST가 소개되었고, 이는 HTTP 프로토콜을 의도에 맞게 디자인하도록 유도하고 있다. -
REST의 기본 원칙을 성실히 지킨 서비스 디자인을
RESTful이라고 표현한다.- 즉, REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처고,
REST API는 REST를 기반으로 서비스 API를 구현한 것을 의미한다.
- 즉, REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처고,
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/144.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>
열심히 하고싶은 사람