[React] json-server

json-server

json-server 는 내부적으로 lowdb 라는 단순한 데이터베이스를 이용하며 최소한의 REST API를 기본 지원함.

연습을 위해서 프런트엔드 프로젝트에서 실무와 비슷한 느낌으로 하기 위하여 가짜 API 서버를 만듦. 사용하면 json 파일 하나만 있으면 연습용 서버를 쉽게 구성 할 수 있음.

참고로 프로덕션에서 사용하기위하여 만들어진것이 아니기 때문에 이 서버를 사용하여 실제 프로젝트를 개발 하면 안됨.

📌가짜 API 서버 열기

data.json

{
  "days": [
    {
      "id": 1,
      "day": 1
    },
    {
      "id": 2,
      "day": 2
    },
    {
      "id": 3,
      "day": 3
    },
    {
      "day": 4,
      "id": 4
    }
  ],
  "words": [
    {
      "id": 1,
      "day": 1,
      "eng": "book",
      "kor": "책",
      "isDone": true
    },
    {
      "id": 3,
      "day": 2,
      "eng": "car",
      "kor": "자동차",
      "isDone": false
    },
    {
      "id": 5,
      "day": 3,
      "eng": "school",
      "kor": "학교",
      "isDone": false
    },
    {
      "id": 6,
      "day": 3,
      "eng": "pencil",
      "kor": "연필",
      "isDone": false
    },
    {
      "day": "3",
      "eng": "window",
      "kor": "창문",
      "isDone": false,
      "id": 7
    },
    {
      "day": "3",
      "eng": "house",
      "kor": "집",
      "isDone": false,
      "id": 8
    },
    {
      "day": "2",
      "eng": "mouse",
      "kor": "쥐",
      "isDone": false,
      "id": 9
    },
    {
      "day": "4",
      "eng": "monkey",
      "kor": "원숭이",
      "isDone": false,
      "id": 10
    },
    {
      "day": "4",
      "eng": "apple",
      "kor": "사과",
      "isDone": false,
      "id": 11
    },
    {
      "day": "3",
      "eng": "apple",
      "kor": "사과",
      "isDone": false,
      "id": 12
    }
  ]
}

👉 json-server 전역으로 설치

npm install -g json-server

👉 설치 후 DB로 사용할 JSON 파일이 있는 위치로 이동하여, 해당 data를 load

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

👉 REST API

API & REST & REST API 란?

---

✍ 참고 : https://hanamon.kr/rest-api/

기능	method
Create	생성(POST)
Read	조회(GET)
UPdate	수정(PUT)
Delete	삭제(DELETE)

👉 custom Hooks 사용

useFetch.js

import { useEffect, useState } from "react";

function useFetch(url) {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch(url)
      .then(res => {
        return res.json();
      })
      .then(data => {
        setData(data);
      });
  }, [url]);
  return data;
}

export default useFetch;

Day.js

import { useParams } from "react-router-dom";
import useFetch from "../hooks/useFetch";
import Word from "./Word";

function Day() {
  const { day } = useParams();
  const words = useFetch(`http://localhost:3001/words?day=${day}`);

  return (
    <>
      <h2>Day {day}</h2>
      <table>
        <tbody>
          {words.map((word) => (
            <Word word={word} key={word.id} />
          ))}
        </tbody>
      </table>
    </>
  );
}

export default Day;

DayList.js

import { Link } from "react-router-dom";
import useFetch from "../hooks/useFetch";

function DayList() {
  const days = useFetch("http://localhost:3001/days");

  return (
    <ul className="list_day">
      {days.map((day) => (
        <li key={day.id}>
          <Link to={`/day/${day.day}`}>Day {day.day}</Link>
        </li>
      ))}
    </ul>
  );
}

export default DayList;