json-server 사용하기

이지·2024년 6월 15일

json-server

JSON 파일을 기반으로 한 가상의 REST API 서버를 빠르게 만들 수 있어 프론트엔드 개발자들이 백엔드가 완성되기 전에 모의 데이터를 이용해 개발 및 테스트를 할 수 있습니다.

설치

sudo npm i -g json-server

😂 ERROR

기존에 global로 설치하는 것이 아닌 프로젝트에서 로컬로 설치했더니 GET, POST는 잘 진행되지만 DELETE, PATCH 등의 경우 NOT FOUND 에러가 발생하였고 정확한 원인은 찾지 못했지만 global로 새로 설치를 하고나서 해결할 수 있었습니다.

➕ 계속 진행하면서 server.js를 사용해서 json-server를 커스텀할 수 있도록 했는데 아래와 같은 에러가 발생했습니다. ES Module에서 require를 지원하지 않는데 server.js에서 require 구문을 사용해서 생긴 문제인 것 같습니다.

ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and '/package.json' contains "type": "module". 
To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

시도한 것들 (But, 해결안됨)
require -> import 구문으로 변경
package.json에서 type: "module" -> "commonjs"
.js -> .cjs

🔨 해결

npm install -g json-server@0.17.4

결과적으로는 json-server@0.17.4버전으로 재설치하여 해결할 수 있었습니다.
해당 버전은 stable 버전으로 위의 명령어로 설치 후 진행에 문제가 있다면 stable 버전 설치하여 진행해보시는 것도 좋을 것 같습니다.
json-server GitHub 참고

실행

실행 전 db 준비

제가 사용한 db.json의 일부입니다.

Dummy Data 만들 때 활용하면 좋은 라이브러리 -> faker
chatGPT한테 key, value에 대해 요구 사항을 말하고 faker로 만들어달라고 하면 쉽게 더미 데이터를 만들 수 있습니다.

db.json

{
  "reviews": [
    {
      "id": 1,
      "title": "나무 커피",
      "author": "익명의 작성자1",
      "password": "774968",
      "createdDate": "2023-09-27T08:39:24.386Z",
      "modifiedDate": "2024-06-12T18:03:42.318Z",
      "rating": 5,
      "isLiked": true,
      "content": "디저트가 진짜 맛있어요. 소금빵 꼭 드세요! 빵 먹으러 꼭 다시 갈거에요.",
      "address": "고창구 53848 잠실읍",
      "tag": [
        "WITH_BEST_DESSERT"
      ]
    },
    ...
  	}
  ],
    "comments": [
    {
      "id": 1,
      "reviewId": 1,
      "author": "댓글작성자1",
      "password": "1234",
      "createdDate": "2024-01-01T11:00:00Z",
      "modifiedDate": "2024-06-12T19:50:09.937Z",
      "content": "정말 유익한 리뷰였어요!",
      "rating": 4.5
    },
    ...
    }
  ]
}

json-server 실행

json-server --watch db.json
json-server --watch db.json --port 3001 -> 원하는 포트로 서버를 실행하고 싶을 때 사용

서버를 간편하게 실행하고 싶다면 package.json에서 아래와 같이 명령어를 설정해주면 됩니다.
"scripts": {
    ...
	"start-json-server": "json-server --watch db.json --port 3001",
}
npm run start-json-server
(실행시키면 다음과 같이 터미널에 출력됩니다)

postman으로 테스트하기

저는 postman을 활용해서 api 요청 테스트를 진행하였습니다.

filter, sort와 같은 기능도 구현 가능합니다. (json-server GitHub Routes 설명 참고)

커스텀하기

json-server의 기본 기능으로만 구현할 수 없는 기능의 경우 커스텀이 가능합니다.

server.js는 프로젝트의 루트 위치에 생성
커스텀 시 noder server.js로 서버 실행하기 ⭐️

기본 코드

server.js

const path = require("path");

const jsonServer = require("json-server");
const server = jsonServer.create();
const router = jsonServer.router(path.join(__dirname, "db.json"));
const middlewares = jsonServer.defaults();

server.use(middlewares)
server.use(router)

server.listen(3001, () => {
  console.log('JSON Server is running')
})

검색

GET /reviews?q=keyword

위와 같이 검색하게 되면 전체 데이터를 검색하게 됩니다.

특정 키의 값으로만 검색을 하고 싶어 다음과 같이 커스텀을 진행하였습니다.

server.get("/search", (req, res) => {
  const searchKeyword = req.query.searchKeyword;
  const db = router.db;
  const reviews = db.get("reviews").filter((review) => {
    if (review.title.includes(searchKeyword)) {
      return review;
    }
  });

  res.json(reviews);
});