JSON-SERVE!

프로젝트 진행중에 fake-server중에 가장 간편하게 사용할 수 있는 라이브러리를 찾았다.

$ npm install json-server --save-dev

설치해주고, src폴더 밖에 0000.json 파일을 만든다

나는 test.json으로 만들었다

//test.json//
{
  "read": [
    {
      "stockName": "삼성전자",
      "price": "62,600",
      "diffAmount": "▼ 1,100",
      "dayRange": "-1.73%",
      "updateAt": "2023.02.18 19:50:02"
    },
    {
      "stockName": "SK하이닉스",
      "price": "92,000",
      "diffAmount": "▼ 900",
      "dayRange": "-0.97%",
      "updateAt": "2023.02.18 19:50:02"
    },
    {
      "stockName": "NAVER",
      "price": "215,500",
      "diffAmount": "▼ 5,000",
      "dayRange": "-2.27%",
      "updateAt": "2023.02.18 19:50:02"
    },
    {
      "stockName": "카카오",
      "price": "63,300",
      "diffAmount": "▼ 900",
      "dayRange": "-1.40%",
      "updateAt": "2023.02.18 19:50:02"
    },
    {
      "stockName": "카카오",
      "price": "63,300",
      "diffAmount": "▼ 900",
      "dayRange": "-1.40%",
      "updateAt": "2023.02.18 19:50:02"
    }
  ],

  "detail": [
    {
      "stockName": "삼성전자",
      "price": "62,600",
      "diffAmount": "▼ 1,100",
      "dayRange": "-1.73%",
      "marketPrice": "62,900",
      "highPrice": "63,300",
      "lowPrice": "62,400",
      "tradingVolume": "10,675,131",
      "updateAt": "2023.02.18 19:50:02"
    },
    {
      "stockName": "SK하이닉스",
      "price": "92,000",
      "diffAmount": "▼ 900",
      "dayRange": "-0.97%",
      "marketPrice": "91,400",
      "highPrice": "92,700",
      "lowPrice": "90,900",
      "tradingVolume": "1,591,533",
      "updateAt": "2023.02.18 19:50:02"
    },
    {
      "stockName": "NAVER",
      "price": "215,500",
      "diffAmount": "▼ 5,000",
      "dayRange": "-2.27%",
      "marketPrice": "216,000",
      "highPrice": "219,000",
      "lowPrice": "212,000",
      "tradingVolume": "901,801",
      "updateAt": "2023.02.18 19:50:02"
    },
    {
      "stockName": "카카오",
      "price": "63,300",
      "diffAmount": "▼ 900",
      "dayRange": "-1.40%",
      "marketPrice": "63,000",
      "highPrice": "64,400",
      "lowPrice": "62,400",
      "tradingVolume": "1,573,691",
      "updateAt": "2023.02.18 19:50:02"
    },
    {
      "stockName": "카카오",
      "price": "63,300",
      "diffAmount": "▼ 900",
      "dayRange": "-1.40%",
      "marketPrice": "63,000",
      "highPrice": "64,400",
      "lowPrice": "62,400",
      "tradingVolume": "1,573,691",
      "updateAt": "2023.02.18 19:50:02"
    },
    {
      "stockName": "카카오",
      "price": "63,300",
      "diffAmount": "▼ 900",
      "dayRange": "-1.40%",
      "marketPrice": "63,000",
      "highPrice": "64,400",
      "lowPrice": "62,400",
      "tradingVolume": "1,573,691",
      "updateAt": "2023.02.18 19:50:02"
    },
    {
      "stockName": "카카오",
      "price": "63,300",
      "diffAmount": "▼ 900",
      "dayRange": "-1.40%",
      "marketPrice": "63,000",
      "highPrice": "64,400",
      "lowPrice": "62,400",
      "tradingVolume": "1,573,691",
      "updateAt": "2023.02.18 19:50:02"
    },
    {
      "stockName": "카카오",
      "price": "63,300",
      "diffAmount": "▼ 900",
      "dayRange": "-1.40%",
      "marketPrice": "63,000",
      "highPrice": "64,400",
      "lowPrice": "62,400",
      "tradingVolume": "1,573,691",
      "updateAt": "2023.02.18 19:50:02"
    }
  ]
}

맡은 모듈의 백엔드 담당자분께 넘어오는 데이터 형식을 받고

채워 넣어준 다음, 터미널에서 test.json 데이터를 바탕으로 서버를 스타트해준다

json-server --watch test.json --port 5173

\{^_^}/ hi!

  Loading test.json
  Done

  Resources
  http://localhost:5173/read
  http://localhost:5173/detail

  Home
  http://localhost:5173

정상적으로 작동되었을 때, 이런식으로 나온다

데이터도 잘 받아진다!

json-server의 좋은점은 설정해둔 API_URL만 바꿔주면

실제 프로젝트에 그대로 적용이 가능하다는 점이다