React / json-server 로 쉽고 빠르게 API , server 만들기

프론트엔드 개발연습을 할 때에 백엔드까지 개발하는것은 번거롭다.. 

json-server를 사용하면 3분만에 임시서버를 만들 수 있다.

 

프로젝트 최상위 루트에 api를 만들어준다.

 

data.json 

{
    "carList": [
      {
        "id": 1,
        "name": "올 뉴 투싼",
        "price": "78000",
        "manufacture": "17년식",
        "imageURL": "/images/car-tucson.png",
        "discount":"20%"
      },
      {
        "id": 2,
        "name": "코나",
        "price": "65000",
        "manufacture": "19년식",
        "imageURL": "/images/car-kona.png",
        "discount":"20%"
      },
      {
        "id": 3,
        "name": "셀토스",
        "price": "69000",
        "manufacture": "18년식",
        "imageURL": "/images/car-seltos.png",
        "discount":"30%"
      },
      {
        "id": 4,
        "name": "쏘렌토",
        "price": "83000",
        "manufacture": "16년식",
        "imageURL": "/images/car-sorento.png",
        "discount":"22%"
      },
      {
        "id": 5,
        "name": "스포티지",
        "price": "74000",
        "manufacture": "21년식",
        "imageURL": "/images/car-spotage.png",
        "discount":"13%"
      },
      {
        "id": 6,
        "name": "쏘렌토",
        "price": "83000",
        "manufacture": "16년식",
        "imageURL": "/images/car-sorento.png",
        "discount":"24%"
      },
      {
        "id": 7,
        "name": "스포티지",
        "price": "74000",
        "manufacture": "21년식",
        "imageURL": "/images/car-spotage.png",
        "discount":"24%"
      }
    ]
  }

아래 명령어로 바로 서버를 실행할 수 있다.

npx json-server ./data.json --port 4000

 

\{^_^}/ hi!

  Loading ./data.json
  Done

  Resources
  http://localhost:4000/carList

  Home
  http://localhost:4000

 

하지만 배포할 때는 express처럼 index.js를 만들어 줘야한다.

로컬에서 연습한 후에 헤로쿠에 해보았다. 

다음 포스팅에 써 볼 예정이다.

 

서버가 잘 열렸는지 확인해보자.

다행히 잘나온다. 굳!