[React] JSON-Server에서 JSON 파일 여러 개 사용하기

https://velog.io/@oksk6681/React-json-server

위의 글을 통해서 JSON-server를 통해서 RESTFUL API에 대해 사용법을 배워봤다.

json-server --watch ./src/db/data.json --port 3001

위와 같은 명령어를 통해서 하나의 JSON 파일을 개방할 수 있었다.

하지만, 여러 개의 db를 사용하고 싶은 경우에 어떻게 사용해야 할지에 대한 궁금증이 들었다.

그래서 알아본 결과 추천해준 방법은 이러했다.

🤖 : "병합해서 사용해. 하나의 파일로!"

과정을 알아보자!

[1] JSON 데이터를 읽어와 병합한다.
[2] 병합된 데이터를 새로운 JSON 파일로 저장한다.
[3] json-server를 사용하여 이 병합된 JSON 파일을 서버로 실행한다.

1. 프로젝트 구조

프로젝트_폴더/
├── src/
│   ├── db/
│   │   ├── schedule.json
│   │   ├── user.json
│   │   └── score.json
│   └── merge.js
└── package.json

2. merge.js 파일 작성

const fs = require('fs');
const path = require('path');

// JSON 파일 경로
const schedulePath = path.join(__dirname, 'db', 'schedule.json');
const userPath = path.join(__dirname, 'db', 'user.json');
const scorePath = path.join(__dirname, 'db', 'score.json');

// JSON 파일 읽기
const scheduleData = JSON.parse(fs.readFileSync(schedulePath, 'utf8'));
const userData = JSON.parse(fs.readFileSync(userPath, 'utf8'));
const scoreData = JSON.parse(fs.readFileSync(scorePath, 'utf8'));

// 병합된 데이터 생성
const mergedData = {
  schedule: scheduleData,
  users: userData,
  scores: scoreData
};

// 병합된 데이터를 새로운 JSON 파일로 저장
const outputPath = path.join(__dirname, 'db', 'db.json');
fs.writeFileSync(outputPath, JSON.stringify(mergedData, null, 2));

console.log('JSON 파일이 성공적으로 병합되었습니다.');

3. 병합 스크립트 실행

node src/merge.js

4. json-server 실행

json-server --watch ./src/db/db.json --port 3001

이렇게 하면! 여러 개의 json 파일을 병합하여 사용할 수 있게 된다.

단, 하나의 파일이 생성된다는 점에서는 아쉬운 부분이기도 하지만, 그래도 axios 연습하거나 db 접근 연습 시에는 도움이 될듯 하다.