[json-server] 프론트엔드 연습용 백엔드 데이터가 필요하다면!

 

많은 프론트엔드 공부를 하는 분들이 초반에는 html, css, javascript 위주로 공부를 하다가, 나중에는 데이터를 다루게 되는 공부를 하게 된다.

그런데 이 때 백엔드 지식이 아직 준비되어있지 않은 경우 데이터를 어디서 사용해야할지 고민하게 된다.

주로 APIs를 불러와서 사용하는 경우가 있는데, 이 외에 서버처럼 사용하는 경우 또한 연습을 할 수 있으면 좋을 것이다!

 

이렇게 백엔드 지식 없이 백엔드를 사용하여 프론트엔드를 연습해 볼 수 있는 것이 바로 json-server 이다.

 

ref: https://www.npmjs.com/package/json-server

---

우선 CRA를 통해서 리액트를 설치해준다.

그리고 json-server와 concurrently를 설치해준다.

yarn add json-server concurrently

 

설치가 완료 되었으면 root에서 db.json을 만들어주고 임시 데이터를 만들어준다.

나의 임시데이터 예시는 아래와 같다.

// db.json

{
  "logs": [
    {
      "id": 1,
      "message": "Hello I am Patrick",
      "attention": false,
      "date": "2021-10-12",
      "tech": "Patrick KIM"
    },
    {
      "id": 2,
      "message": "Hi My Name is Angelo",
      "attention": true,
      "date": "2021-12-03",
      "tech": "Angelo PARK"
    },
    {
      "id": 3,
      "message": "What's up! I'm Daniel",
      "attention": false,
      "date": "2021-03-21",
      "tech": "Daniel LEE"
    }
  ],
  "techs": [
    {
      "id": 1,
      "firstName": "Patrick",
      "lastName": "KIM"
    },
    {
      "id": 2,
      "firstName": "Angelo",
      "lastName": "PARK"
    },
    {
      "id": 3,
      "firstName": "Daniel",
      "lastName": "Lee"
    },
    {
      "fistName": "Maria",
      "lastName": "JOON",
      "id": 4
    }
  ]
}

 

 

자, 그리고 package.json으로 가서 scripts를 두 가지 추가 할 것이다.

첫 번째는 json-server를 위한 것이고, 또 하나는 concurrently 즉, 서버와 프론트를 한번에 돌리기 위한 것을 지정해줄 것이다.

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
    
    "json-server": "json-server --watch db.json --port 5000",
    "dev": "concurrently \"yarn start\" \"yarn json-server\"",
  },

 

이렇게 해놓으면 yarn dev를 통해서 서버와 프론트를 한번에 작동시킬 수 있다.

 

그렇다면 서버가 어떻게 되고 있는지 한번 살펴보자!

postman을 이용해서 확인해볼 것이다.

앞서 db.json에 logs와 techs 라는 이름으로 임시 데이터를 넣어놨기 때문에 http://localhost:5000/logs 혹은 http://localhost:5000/techs 라는 URI를 GET에 요청 해보면 우리가 지정한 것이 그대로 출력되게 된다.

 

GET 뿐 아니라 POST도 가능하다.

http://localhost:5000/techs에 POST 요청을 해보자.

우선 POST를 눌러준 뒤, 아래 이미지와 같이 Header에 들어가 KEY는 Content-Type, VALUE는 application/json 라고 지정해보자.

그리고 Body로 들어가서 raw를 눌러주고, JSON을 설정해준 뒤, 추가 할 것을 입력해보자.

나의 경우 아래와 같이 입력을 했고, 그 결과는 아래와 같다.

보다시피 id가 자동으로 지정된다.

 

잘 설정이 되었는지 확인하기 위해서 techs에 다시 GET 요청을 해보면, 아까와 달리 4개가 되어있는 것을 볼 수 있다.

수정도 가능할까? 물론이다!!

이번에는 PUT을 해보도록 하자!

http://localhost:5000/techs/4 라고 하여, 금방 만들었던 Maria JOON에서 Maria라는 부분만 수정해보겠다.

이렇게 Jennifer로 이름이 바뀌는 것을 볼 수 있고, 다시 GET으로 돌아가서 확인해봐도 여전히 수정이 잘 되어있는 것을 볼 수 있다.

 

마지막은 삭제이다.

내가 원하는 수정과 동일하게 삭제하고 싶은 아이디를 마지막에 넣으면 된다.

제일 마지막에 추가 하고 수정한 Id 4를 삭제해보자.

이렇게 빈 오브젝트가 나오는 것을 볼 수 있고, 역시 GET 요청을 해보면 삭제 된 것을 확인할 수 있다!!