json-server 사용법

react를 개발하다 보면 영속성을 위해 데이터베이스가 필요한 경우가 있다. 직접 데이터베이스를 설치해서 사용해도 되지만 backend 기능을 직접 개발하지 않고 간단히 데이터를 json으로 저장할 수 있는 json-server를 사용하면 편리하다. 물론 프로덕션으로 사용하기에는 무리가 있지만 개발 전용으로 테스트하기에는 불편함이 없다.

json-server를 설치하고 사용하는 방법을 알아보자.

1. 설치 방법

1) json 서버 설치

json-server를 설치하기 위해서 아래 명령어를 사용한다.

$ npm install json-server

현재 시점에 1.x버전에 문제가 생겨서 0버전을 사용하여 설치하였다.

$ npm install json-server@0

2) db.json 파일 생성

다음은 프로젝트 루트 디렉토리에 db.json파일을 생성한다. 단순히 텍스트 파일이다. 실제 데이터가 저장될 파일이다.

db.json에 아래와 같이 내용을 저장한다.

{
  "book": []
}

book의 내용을 배열로 저장하겠다는 의미가 된다.

3) JSON-Server 실행

package.json파일을 열어서 script에 아래 내용을 추가한다.

{
  "scripts": {
    "start": "...",
    "server": "json-server -p 3001 --watch db.json",
    ...
  },
}

json-server를 3001번 포트로 실행을 하고 db.json에 파일을 저장하겠다는 것을 나타낸다.

4) 명령어 실행

다음 json-server를 실행한다.

$ npm run server

2. 사용방법

1) db.json 파일 설명

[db.json]

{
  "book": []
}

db.json 파일에 대해 설명을 하자면 books는 books 목록을 저장할 것이라고 json-server에게 알려주는 것이다. 그리고 배열은 book 객체가 추가되는 공간이다.

2. API 사용법

book 생성

POST http://localhost:3001/books
content-Type: application/json

{
    "title": "Harry Potter"
}

book을 생성할 때는 POST를 통해 생성을 한다. id값이 자동으로 생성이 된다.

추가되면 아래와 같은 형식이 될 것이다.

{
  "books": [
    {
      "id": 1,
      "title": "Harry Potter"
    }
  ]
}

다음으로 목록, 수정, 삭제는 다음과 같다.

books 목록

GET http://localhost:3001/books

books 수정

PUT http://localhost:3001/books/1
content-Type: application/json

{
    "title": "Dark Tower"
}

books 삭제

GET http://localhost:3001/books/1

정리하자면 아래와 같다.

기능	URL	Method	Request Body	Response Body
Create book	localhost:3001/books	POST	{ "title": "Harry Potter" }	{ "id": 1, "title": "Harry Potter" }
Get All Books	localhost:3001/books	GET		[{ "id": 1, "title": "Harry Potter" }]
Update Book	localhost:3001/books/1	PUT	{ "id": 1, "title": "New Title" }	{ "id": 1, "title": "New Title" }
Delete Book	localhost:3001/books/1	DELETE		{ "id": 1, "title": "Harry Potter" }

3. javascript에서 사용

이제 API를 통해 react에서 http 호출을 사용하면 된다.

예) books 등록

fetch('http://localhost:3001/books', {
  "method": "POST",
  "headers": {
    "content-Type": "application/json"
  },
  "body": JSON.stringify({"title": "Harry Potter"})
})

실행을 할 때 아래 오류가 나오는 경우가 있다.

Details: RequestError: connect ECONNREFUSED 127.0.0.1:3001

이런 경우에는 package.json 파일에 아래와 같이 변경하고 재시작하자.
{
  "server": "json-server -p 3001 --watch db.json --host 127.0.0.1"
}