ougi FE

[Library] 🔧 json-server??? 그게 뭐고 어떻게 사용하는건데!! 본문

라이브러리

[Library] 🔧 json-server??? 그게 뭐고 어떻게 사용하는건데!!

ougi 2024. 8. 19. 12:21
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