json-server (1) json-server 사용하기

json-server는 아주 짧은 시간에 REST API를 구축해주는 라이브러리입니다.

하지만, REST API 서버의 기본적인 기능을 대부분 갖추고 있습니다만, 프로덕션 전용은 아닙니다.

저는 프론트앤드 공부하는 도중에 데이터를 저장할 서버의 필요성을 느꼈기 때문에 이용하였습니다.

 

1. 설치하기

json-server를 설치해봅시다.

(yarn global add json-server를 해도 되지만, 만약 nvm을 사용하는 경우에는 제대로 작동하지 않을 수 있다.)

$ npm i -g json-server
또는
$ yarn global add json-server

설치가 완료되었다면 디렉터리를 만들어 그 안에 db.json이라는 파일을 만들어야 합니다.

제 db.json의 파일 내용은 다음과 같습니다.

db.json

{
  "tableName": [
    {
      "id": "1",
      "name": "첫번째 이름",
      "title": "첫번째 제목"
    }
   ]
}

그 다음, 만든 디렉터리에서 다음 명령어로 서버를 실행해야 합니다.

$ json-server --watch db.json --port 3001

 리액트 개발서버의 기본 포트가 3000이기 때문에 port를 3001로 하였습니다.

 

  \{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3001/tableName1
  http://localhost:3001/tableName2

정상적으로 작동하면 다음과 같이 연결이 되었다고 나오며, db.json안의 table들을 보여줍니다.

 

이제, REST API 서버가 열렸습니다.

 

2. 기본 작업 해보기

저는 HTTP Client 도구인 포스트맨(postman)을 설치하였고, 이곳에서 crud 작업을 해 보았습니다.

 

http://localhost:3001/tableName의 요청을 GET으로 선택을 하게 된다면, 해당 table안에 있는 데이터들이 json배열 형태로 출력되게 됩니다.

 

요청을 하는 방식은 주소 옆에 호출 방식을 선택할 수 있습니다.

또 한, json-server를 시작한 bash에서 요청 history를 한 번에 볼 수 있습니다.

(성공, 실패 여부와 함께 걸리는 시간이 같이 나오게 됩니다.)

 

GET /patient 200 3.322 ms - -

 

json-server의 select/insert/delete/update 는 다음과 같습니다. get/post/delete/patch 

 

그 외 검색조건이나 body 설정 등은 다음 참고자료에서 확인하시면 됩니다.

참고로, delete, update는 조건을 id를 기준으로 하기 때문에, 만약 내가 쓸 테이블의 pk가 id가 아니더라도

json-server에서는 id로 사용해야 합니다. 

저는 delete, update를 할 때 조건문을 주어서 여러 개를 같이 변경시키고 싶었지만 기능을 제공해주지 않았기 때문에 forEach문을 통해 여러 번 fetch작업을 하였습니다.

 

참고자료

https://redux-advanced.vlpt.us/3/01.html

3-1. json-server 이해하기 · GitBook

https://github.com/typicode/json-server

GitHub - typicode/json-server: Get a full fake REST API with zero coding in less than 30 seconds (seriously)

 

3. front-end에서 적용하기

front-end에서 다음과 같이 작성합니다.

저는 react를 사용한 경우입니다.

 

1. get방식의 경우

fetch('http://localhost:3001/tableName',
            {method:'GET',headers:{'Content-Type':'application/json'},})
          .then(res=>res.json())
          .then(data=> console.log(data))
          .catch(error => console.error('Error:', error));

response객체로부터 json을 가져오기 위해서 json() 메서드를 사용할 필요가 있습니다.

data는 response가 json형태로 만들어진 형태로, 이곳에서 다음 작업을 진행할 수 있습니다.

 

fetch() 참고자료

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

Using Fetch - Web API | MDN

2. post 방식의 경우

  let newData = {
    "title":"hello",
    "name":"world!"
  }
  
  fetch(`http://localhost:3001/tableName`,
  {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(newData)})
  .catch(error => console.error('Error:', error));

 

tableName의 테이블에 

{ "id":"1", "title":"hello", "name":"world!" }

의 newData가 들어간 것을 json-server의 db.json에서 바로 확인할 수 있습니다.

 

3. delete 방식의 경우

fetch(`http://localhost:3001/tableName/1`,
      {method:'DELETE',headers:{'Content-Type':'application/json'},})
      .catch(error => console.error('Error:', error))

 

tableName의 다음으로 delete 하고 싶은 id를 입력하면

json-server의 db.json에서 tableName 테이블에서 id가 1인 data가 없어진 것을 확인할 수 있습니다.

 

4. patch 방식의 경우

let data = {
	"title":"helloworld!"
}

fetch(`http://localhost:3001/tableName/1`,
    {method:'PATCH',headers:{'Content-Type':'application/json'},body:JSON.stringify(data)})
    .then(res=>res.json())
    .catch(error => console.error('Error:', error));

 

tableName의 다음으로 update 하고 싶은 id를 입력하면

json-server의 db.json에서 tableName 테이블에서 id가 1인 data의 title 이 "helloworld!"로 변경된 것을 확인할 수 있습니다.

 

간단하게 구현하려는 경우 이 정도만 숙지를 하시면 구현함에 있어서 어려움은 없을 것입니다.

더 많은 기능들은 참고자료로 링크해둔 것들을 참조하시면 됩니다.