[Node js] JSON-server와 lowdb로 CRUD 구현 해보기

첫 리액트 프로젝트에서 프론트엔드 인원으로만 진행하게 되었는데 CRUD 구현이 필요한 프로젝트인 만큼 BE 구현을 어떻게 할지가 고민이었다. 아무래도 2주 간 React 초기 학습과 개발을 동시에 진행해야 하다 보니 실제 BE 구현까지 해내기에는 시간이 상당히 촉박하다는 판단하에 간단하게 REST API Mock 서버를 구축할 수 있는 JSON-server와 JSON 파일을 쉽게 저장할 수 있는 nodejs 기반 DB인 lowdb를 사용하여 CRUD를 구현했다. GET/POST 요청은 물론, PUT, PATCH, DELETE 요청도 가능하니 간단하게 CRUD 기능을 추가하고 싶을 때 활용하면 좋을 조합이다.

---

우선 node js가 설치 되지 않았다면 필수적으로 설치 해야하니.. 설치 후 아래 내용을 진행하면 된다.

JSON-Server

Get a full fake REST API with zero coding in less than 30 seconds🔥 (seriously)

JSON-Server 설치

npm install json-server --save-dev

lowdb

lowdb 란?

lowdb는 JSON을 기반으로 동작하는 쉽고, 간편한 데이터 베이스이다.

lowdb 설치

npm install lowdb

db.json 파일 생성

프로젝트 루트에 db.json 파일을 생성한다. 이 db.json 파일은 데이터베이스 역할을 할 것이다. CRUD 작업이 용이하도록 프로젝트 목적에 맞는 json 데이터를 작성한다.

Server.js 파일 작성

Json Server 생성 및 lowdb 연동을 위한 Server.js 코드는 아래와 같다. 필요에 따라 미들웨어를 추가하거나 Custom 라우터를 작성해주면 되겠다.

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

// db.json를 조작하기 위해 lowdb 사용
const low = require("lowdb");
const FileSync = require("lowdb/adapters/FileSync");
const adapter = new FileSync("db.json");
const db = low(adapter);

// Set default middlewares (logger, static, cors and no-cache)
server.use(middlewares);
server.use(jsonServer.bodyParser); // body 작성이 필요한 요청에 사용될 미들웨어
/*-------------여기에 Custom 라우터를 작성해준다-------
.
.
.
-------------------------------------------*/
// Use default router
server.use(router);

server.listen(5000, () => {
  console.log("JSON Server is running");
});

요청/응답 방법

Client 요청 예시(React axios 이용)

await axios.delete(
      "/요청 URI입력"
    );

Delete 처리 예시 코드

server.delete("URI 입력", (req, res) => {
  // 요청 query가 있다면 객체 분해 할당으로 재정의
  const { columnId 등.... } = req.query;
  db.get("JSON 객체에서 찾는 Key")
    .find(찾는 조건식 입력)
    .get("내부에 있는 객체에서 items, name 등의 key로 접근해야하는 경우 get으로 해당 Key에 대한 값을 찾음")
    .remove(삭제 조건식 입력)
    .write(); //적용 
  res.send(db.get("URI 입력").value()); // 클라이언트 단으로 요청에 대한 응답을 보내줌
});

ID 생성하기

lowdb는 기본적으로 ID를 자동으로 부여하는 기능이 없기 때문에 Create, Update 시 랜덤한 ID를 생성해야 한다면 shortid를 적용하면 된다.

short id 설치하기

npm install -s shortid

Server.js에 적용하기

Server.js 상단에 short id를 불러오는 코드를 작성한다.

const shortid = require("shortid");

랜덤 ID 생성하기

아래와 같은 방법으로 생성한 랜덤 ID를 id 값으로 넣어주면 끝~!🌝

shortid.generate()

참고
https://poiemaweb.com/json-server
https://www.opentutorials.org/course/3410
https://www.npmjs.com/package/json-server