json-server
json 파일로 가짜 서버를 구축할 수 있는 라이브러리
프로덕션 전용은 아니며 프로토타입을 만들거나 학습하는 용도로 사용한다.
폴더를 만들고 터미널에서 아래 설치 코드를 입력한다.
json-server
Get a full fake REST API with zero coding in less than 30 seconds. Latest version: 0.17.3, last published: 4 months ago. Start using json-server in your project by running `npm i json-server`. There are 314 other projects in the npm registry using json-ser
www.npmjs.com
npm install -g json-server
설치 후 폴더를 하나 더 생성한 후 db.json이라는 파일을 만든다.
{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}
데이터를 준비했으면 아래 코드로 실행한다.
그럼 아래와 같이 서버가 만들어진다.
json-server --watch db.json
GET
먼저 GET 방식으로 db.json에 있는 posts 데이터를 가져와 보려고 한다.
index.html 파일을 하나 만들어 데이터를 받을 화면을 만들어준다.
GET, POST, PUT, DELETE 모두 진행할 거라 같이 버튼을 만들어줬다.
<body>
<button onclick="getData()">조회</button>
<button onclick="postData()">생성</button>
<button onclick="putData()">수정</button>
<button onclick="deleteData()">삭제</button>
<hr />
<div>
조회 데이터:
<span id="get"></span>
</div>
<div>
생성 데이터:
<span id="post"></span>
</div>
<div>
수정 데이터:
<span id="put"></span>
</div>
<div>
삭제 데이터:
<span id="delete"></span>
</div>function getData() {
fetch('http://localhost:3000/posts')
.then((response) => response.json())
.then((json) => {
const get = document.getElementById('get');
get.innerText = JSON.stringify(json);
});
}
조회 버튼을 누르자 span 태그에 조회하려는 posts의 데이터가 그려졌다.
터미널에서도 뭔가가 작성되었다.
이것은 HTTP 요청과 서버 응답에 관한 정보를 나타내는 로그다.
[HTTP메소드] [요청 경로] [상태 코드] [응답 시간] [바이트 크기]의 형식을 띄고 있다.
즉 나는 GET 메소드를 써 /posts 경로에 해당하는 리소스를 요청했다는 말이다.
(상태 코드는 100번대에서 500번대까지 있는데 이 부분은 다음 게시글에서 설명하겠다.)
POST
POST 메소드는 서버에 새로운 데이터를 생성하기 위해 사용한다.
이번에는 comments 서버에 새로운 데이터를 만들어보려고 한다.
원래는 아래와 같이 데이터가 1개만 있다.
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
]
postData 함수를 작성한다.
위 데이터와 유사하게 새로운 데이터를 만들어보았다.
function postData() {
const comments = {
id: 2,
body: 'summermong',
postId: '2',
};
fetch('http://localhost:3000/comments', {
method: 'POST',
body: JSON.stringify(comments),
headers: {
'content-type': 'application/json; charset=UTF-8',
},
})
.then((response) => response.json())
.then((json) => {
const post = document.getElementById('post');
post.innerText = JSON.stringify(json);
});
}fetch 함수에 내가 보낼 데이터를 적어주었다.
이런 데이터를 comments 서버로 보낼 것이다.
fetch 함수는 파라미터로 2개를 갖는데, 하나는 HTTP 요청을 보낼 서버의 URL이다.
다음 두 번째 인자에는 요청의 세부 옵션을 설정하는 객체를 갖는다.
이 객체에는 method, body, headers, content-type이 들어간다.
- method: POST
- HTTP 요청 메소드를 적어준다. 새로운 데이터를 생성할 것이니 POST로 적었다.
- body: JSON.stringify(comments)
- 주로 POST, PUT, PATCH 등 뭔가 수정하거나 업데이트 할 때 이 부분을 사용한다.
- 일반적으로 JSON, XML, HTML 형식의 데이터를 담아 전송하는데 나는 JSON 형식으로 데이터를 전송했다.
- headers: 'content-type': 'application/json; charset=UTF-8'
- 요청에 대한 부가적인 정보를 담는다.
- 헤더는 키-값 쌍으로 구성된다. content-type은 요청 본문의 데이터 타입을 나타낸다.
이렇게 데이터를 보내 서버에 데이터를 생성하면, 생성한 데이터를 post에 그릴 것이다.
생성 데이터 부분에 새로 만든 데이터가 잘 나왔다.
아까 봤던 로그도 잘 찍혔다.
상태 코드 201번은 Created로, 클라이언트의 요청대로 새로운 리소스가 잘 생성되었다는 뜻이다.
아까 만든 db.json에도 내가 postData 함수 안에 작성한 데이터가 뿅하고 생겼다.
PUT
PUT 메소드는 서버의 리소스를 수정하기 위해 사용한다.
방금 만든 body가 summermong인 데이터를 wintermong으로 수정하려고 한다.
method와 데이터를 그려낼 부분만 수정했다.
function putData() {
const comments = {
id: 2,
body: 'wintermong',
postId: '2',
};
fetch('http://localhost:3000/comments/2', {
method: 'PUT',
body: JSON.stringify(comments),
headers: {
'content-type': 'application/json; charset=UTF-8',
},
})
.then((response) => response.json())
.then((json) => {
const put = document.getElementById('put');
put.innerText = JSON.stringify(json);
console.log(json);
});
}
차례대로 데이터를 조회하고 생성, 수정해보았다.
참고로 데이터의 id는 데이터의 고유한 식별자로 서버에서 데이터를 구분하는 역할을 한다.
따라서 fetch에 적은 주소에서도 id가 2인 데이터를 수정할 거라서 /2가 추가되었다.
보다시피 생성된 summermong 이라는 데이터가 wintermong으로 바뀌었다.
아까 봤던 db.json에서도 summermong이 없어지고 wintermong으로 대체됐다.
로그로 잘 찍혔다.
PUT 말고 PATCH라는 메소드도 있다.
PUT은 전체 리소스를 대체하고, PATCH는 일부 데이터를 수정하는데 사용한다.
아마 지금은 PATCH가 더 맞는 것 같은데...
데이터가 별로 없고 get post put delete만 다뤄보려 한 거라서 일단은 이렇게 했다.
DELETE
DELETE 메소드는 서버의 리소스를 삭제하기 위해 사용된다.
위에서 만들고 수정했던 데이터를 삭제해보겠다.
참고한 영상에서는 무조건 삭제가 되기 때문에 else, catch를 쓰지 않았지만 혹시 몰라 적어봤다.
(아니나 다를까 처음에는 삭제한 데이터를 그 경로에서 그대로 가져오게 해서 오류가 났다.)
function deleteData() {
fetch('http://localhost:3000/comments/2', {
method: 'DELETE',
})
.then((response) => {
if (response.ok) {
console.log('데이터가 성공적으로 삭제되었습니다.');
const remove = document.getElementById('remove');
remove.innerText = '데이터가 성공적으로 삭제되었습니다.';
} else {
console.error('데이터 삭제 실패');
}
})
.catch((error) => {
console.error('네트워크 오류:', error);
});
}
response.ok는 Response 객체의 프로퍼티 중 하나로 상태 코드가 200~299 범위면 true를 반환한다.
(상태 코드 200번대는 대개 성공을 나타내는데 204와 같이 다를 수도 있으니 꼭 추가 확인을 해야 한다.)
그래서 true라면 데이터를 성공적으로 삭제하고, 그렇지 않다면 (200~299 범위가 아니면) 오류를 찍어준다.
console.error라는 건 처음 봤는데, 내장 메서드로 콘솔에 오류를 찍는데 쓰인다고 한다.
그냥 error => console.log(error) 이렇게 쓰려고 했는데 이게 더 나은 것 같다.
아무튼 그래서 200~299번대가 아니거나 아예 response가 없는 경우에는 오류를 찍어주기로 했다.
결과는 성공적으로 삭제 되었다.
차례대로 버튼을 누르면 위와 같이 상태 코드들이 잘 찍힌다.
데이터가 적다면 아래 주소에서 더 많은 더미 데이터를 받아올 수도 있다.
JSON Generator – Tool for generating random data
Generate any random data you want with power of agile templates and save it to our servers for later use.
json-generator.com
혼자서 해봤는데 생각보다 재미있고 서버란 참 신기하다는 생각이 든다...
fetch로 받아오는 프로미스 객체인 response가 어떻게 생겼나 콘솔에 찍어봤다.
참으로 신기하도다...
아무튼 상태 코드나 HTTP 메서드에 대해 더 알아보고 싶고
이런 걸 REST API 서버라고 하는데 무슨 특징이 있고 이게 뭔지도 찾아봐야겠다.
**참고
'👋🏻 JavaScript' 카테고리의 다른 글
| [JS] CSS transition (4) | 2024.10.03 |
|---|---|
| [JavaScript] Package Manager (npm, yarn, pnpm) 이해하기 (1) | 2024.06.22 |
| [JavaScript] 클래스 (1) | 2023.12.21 |
