💻Json-Server

🐥json-server란 ?

간단하게 DB와 API 서버를 생성해주는 패키지
(실제 BE와 협업하기 전 사용하는 mock data=fake data )

JSON : JavaScript Object Notation
자바스크립트 객체 문법에 토대를 둔, 문자 기반의 데이터 교환 형식

예시
(자바스크립트의 원시 자료형인 문자열, 숫자, 불리언을 가질 수 있고 중첩된 계층 구조 또한 가질 수 있습니다.) 작은 따옴표를 사용할수는 없음

{
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower",
  "active": true,
  "members": [
    {
      "name": "Molecule Man",
      "age": 29,
      "secretIdentity": "Dan Jukes",
      "powers": [
        "Radiation resistance",
        "Turning tiny",
        "Radiation blast"
      ]
    },
    {
      "name": "Madame Uppercut",
      "age": 39,
      "secretIdentity": "Jane Wilson",
      "powers": [
        "Million tonne punch",
        "Damage resistance",
        "Superhuman reflexes"
      ]
    },
    {
      "name": "Eternal Flame",
      "age": 1000000,
      "secretIdentity": "Unknown",
      "powers": [
        "Immortality",
        "Heat Immunity",
        "Inferno",
        "Teleportation",
        "Interdimensional travel"
      ]
    }
  ]
}

JSON → 문자열 형태 → 서버 - 클라이언트 간 데이터 전송 시 사용해요.

하지만, 다음 두 경우를 위해 파싱(parsing) 과정이 필요합니다.

1. JS 객체를 JSON 형태로 전송
2. JSON 형태를 JS 객체 형태로 사용

# stringify()

자바스크립트 객체 → JSON 문자열 변환. 네트워크를 통해 객체를 JSON 문자열로 변환할 때 주로 사용합니다

# parse()

JSON 문자열 → 자바스크립트 객체 변환. 네트워크 통신의 결과를 통해 받아온 JSON 문자열을 프로그램 내부에서 사용하기 위해 JS 객체로 변환할 때 사용.

기본세팅

🐥 json 설치

npm install -g json-server
yarn add json-server

🐥 db.json 파일 만들기

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

넣어주기

🐥 Start JSON Server

yarn json-server --watch db.json --port 4000
json-server --watch db.json --port 4000

포트 번호는 직접 지정해줄수 있음

로컬 호스트에서 직접 db값을 확인하거나 Api를 확인 할 수 있다 !

📋레퍼런스
https://www.npmjs.com/package/json-server