Notice
Recent Posts
Recent Comments
Link
250x250
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- 프레임 워크
- polling
- 티스토리챌린지
- github
- Pr
- react-query
- useState
- 개발자
- Fe
- frontend
- Study
- 오블완
- next.js
- 비제어
- prettier
- 가을 감성
- Context API
- 코딩 테스트
- react
- form
- js
- 협업
- eslint
- zustand
- CSS
- 개발
- 개발자 도구
- tailwind css
- PullRequest
- package.json
Archives
- Today
- Total
ougi FE
[Library] 🔧 json-server??? 그게 뭐고 어떻게 사용하는건데!! 본문
728x90
오늘은 제가 얼마 전에 간단한 메모 어플리케이션을 만들며 편리하게 사용했던 json-server의 사용법에 대해 다뤄보겠습니다 정말 간단하고 유용해서 다들 사용해봤으면 좋겠습니다 그럼 먼저 json-server가 무엇인지 알아볼까요?
🔧 json-server란?
json-server는 json파일을 활용해사용하여 간단한 시뮬레이션을 위한 REST API Mock server를 구축할 수 있는 툴입니다
서버가 개발되기 전이나 공부를 할 때 사용하기 좋습니다
REST API Mock Server
실제 서버를 대신하여 가상의 API 응답을 제공하는 도구입니다. 이를 통해 개발자는 실제 서버가 준비되기 전에 API를 테스트하거나 프론트엔드 작업을 진행할 수 있습니다. Mock Server는 미리 정의된 가짜 데이터를 사용하여 API 요청에 응답합니다.
🎯 사용법
설치
# npm
npm install json-server
# yarn
yarn install json-server
먼저 json-server를 설치해줍니다
파일 만들기
// example db.json
{
"posts": [
{ "id": 1, "title": "Hello World", "author": "John" }
],
"comments": [
{ "id": 1, "postId": 1, "content": "Nice post!" }
],
"profile": { "name": "John Doe" }
}
데이터를 저장할 json파일을 만들어줍니다
서버 실행하기
json-server --watch 데이터 파일
을 해서 서버를 실행 해줍니다
API 사용 예시
fetch('http://localhost:3000/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
title: 'New Post',
author: 'Jane'
})
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
글을 마치며
이렇게 json-server가 무엇인지와 json-server의 사용법을 알아보았는데요 모두 json-server를 이용해서 더 편리하게 개발을 할 수 있었으면 좋겠습니다
728x90