json-server 소개
json-server는 코딩 없이 완전한 가짜 REST API를 제공하는 다용도 JavaScript 라이브러리로, 백엔드를 빠르게 모킹해야 하는 프론트엔드 개발자에게 이상적입니다. json-server를 사용하면 몇 분 안에 사용자 정의 JSON 데이터를 제공하는 서버를 구축할 수 있습니다.
json-server 시작하기
설치
npm을 사용하여 json-server를 전역에 설치합니다:
npm install -g json-server
JSON 파일 만들기
db.json이라는 파일을 만들고 샘플 데이터로 채웁니다:
{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}
서버 시작하기
다음 명령으로 json-server를 시작합니다:
json-server --watch db.json
Axios로 서버 운영
Axios는 요청을 하는 데 널리 사용되는 HTTP 클라이언트입니다. json-server와 함께 사용하는 방법은 다음과 같습니다.
Axios로 데이터 가져오기
서버에서 데이터를 검색합니다:
프로젝트에 Axios를 설치합니다:
npm install axiosAxios를 사용하여 GET 요청을 전송합니다:
const axios = require('axios'); axios.get('"http://localhost:3000"/posts') .then(response => { console.log(response.data); }) .catch(error => { console.error('오류!, error); });
Axios로 데이터 추가
새 데이터를 추가합니다:
axios.post('"http://localhost:3000"/posts', {
title: '새 게시물 ',
author: 'Jane Doe'
})
.then(response => {
console.log('만든 게시물: ', response.data);
})
.catch(error => {
console.error('오류!, error);
});
Axios로 데이터 업데이트
기존 데이터를 업데이트합니다:
axios.put('"http://localhost:3000"/posts/1', {
title: '업데이트된 게시물 ',
author: 'John Doe'
})
.then(response => {
console.log('게시물 업데이트:', response.data);
})
.catch(error => {
console.error('오류!, error);
});
Axios로 데이터 삭제하기
데이터를 삭제합니다:
axios.delete('"http://localhost:3000"/posts/1')
.then(response => {
console.log('게시물 삭제됨');
})
.catch(error => {
console.error('오류!, error);
});
결론
json-server를 Axios와 결합하면 프론트엔드 개발자가 백엔드를 빠르게 에뮬레이션할 수 있는 강력하고 유연한 설정이 제공됩니다. 이 접근 방식은 특히 초기 단계나 실제 백엔드가 준비되지 않은 경우 웹 애플리케이션의 개발 및 테스트를 가속화합니다.
English version
Introduction to json-server
json-server는 코딩 없이 완전한 가짜 REST API를 제공하는 다목적 JavaScript 라이브러리로, 빠른 모의 구현이 필요한 프런트엔드 개발자에게 이상적입니다. json-server를 사용하면 몇 분 안에 서버를 설정하여 사용자 정의 JSON 데이터를 제공할 수 있습니다.
Getting Started with json-server
설치
npm을 사용하여 json-server를 전역에 설치합니다.
npm install -g json-server
Creating a JSON File
샘플 데이터로 db.json이라는 파일을 만듭니다.
{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}
Starting the Server
다음으로 json-server를 시작합니다.
json-server --watch db.json
Using the Server with Axios
Axios는 요청을 하는 데 널리 사용되는 HTTP 클라이언트입니다. json-server와 함께 사용하는 방법은 다음과 같습니다.
Axios로 데이터 가져오기
서버에서 데이터를 검색합니다.
프로젝트에 Axios를 설치합니다.
npm install axiosAxios를 사용하여 GET 요청을 합니다.
const axios = require('axios'); axios.get('"http://localhost:3000"/posts') .then(response => { console.log(response.data); }) .catch(error => { console.error('There was an error!', error); });
Adding Data with Axios
'새' 데이터를 추가하려면
axios.post('"http://localhost:3000"/posts', {
title: 'New Post',
author: 'Jane Doe'
})
.then(response => {
console.log('Post created:', response.data);
})
.catch(error => {
console.error('There was an error!', error);
});
Axios로 데이터 업데이트
기존 데이터를 업데이트합니다.
axios.put('"http://localhost:3000"/posts/1', {
title: 'Updated Post',
author: 'John Doe'
})
.then(response => {
console.log('Post updated:', response.data);
})
.catch(error => {
console.error('There was an error!', error);
});
Axios로 데이터 삭제하기
데이터를 삭제하려면
axios.delete('"http://localhost:3000"/posts/1')
.then(response => {
console.log('Post deleted');
})
.catch(error => {
console.error('There was an error!', error);
});
Conclusion
json-server를 Axios와 결합하면 프론트엔드 개발자가 백엔드를 빠르게 모의할 수 있는 강력하고 유연한 설정을 제공합니다. this 접근 방식은 특히 초기 단계 또는 실제 백엔드가 아직 준비되지 않은 경우 웹 애플리케이션의 개발 및 테스트를 가속화합니다. 아직 준비되지 않았습니다.
