json-server 설치 및 데이터 호출해보기

백엔드 지식이 없거나 구축하기가 번거울 때, 간단하게 서버와 연동해서 테스트를 하고자 한다면  json-server를 설치해 사용해 볼 수 있다.

json-server란?

실제 배포할 서비스용(프로덕션)이 아니라 로컬에서 혼자 연습할 때 사용하기 좋은 기본적인 Rest Api의 기능은 다 가지고 있는 라이브러리이다.

json-server 설치방법

1. npm을 이용해 설치

   npm install -g json-server

2. 데이터베이스 역할을 할 db.json 파일 생성

   {
     "todos": [
       {
         "id": 1,
         "content": "HTML",
         "completed": true
       },
       {
         "id": 2,
         "content": "CSS",
         "completed": false
       },
       {
         "id": 3,
         "content": "Javascript",
         "completed": true
       }
     ],
     "users": [
       {
         "id": 1,
         "name": "Lee",
         "role": "developer"
       },
       {
         "id": 2,
         "name": "Kim",
         "role": "designer"
       }
     ]
   }

3. json-server 실행

   json-server --watch db.json

   기본 포트는 3000이다 포트를 변경하려면(예를 들면 4000으로) port 옵션을 추가한다.

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

순서대로 진행했을 경우, 터미널에는 아래와 같은 화면이 나오고

터미널에 나온 링크를 ctrl누르고 클릭하면 아래와 같은 화면을 볼 수 있다.

Fetch API를 이용해 json-server 서버의 데이터 호출해보기

프론트앤드 서버통신과 관련된 부분을 공부중이었기에 Fetch API를 이용해 데이터 호출해봤다.

Fetch API 란?

원격 API를 간편하게 호출할 수 있도록 브라우저에서 제공하며 Promise를 가지고 있다.

Fetch API 로 호출하기

fetch("http://localhost:3000/todos") // 접근하고자 하는 url 입력
    .then((response) => response.json()) // JSON 응답을 네이티브 JavaScript 객체로 파싱
    .then((json) => console.log(json)); // 결과 처리

정리

json-server는 쉽게 RESTful한 Server를 구축주는 라이브러리로 GET, POST, DELETE 등 여러 Method를 지원하기 때문에 사용법을 잘 익혀 사용하면 좋다.

기타

간단하게 언급한 Fetch API로 서버의 데이터 추가, 수정 삭제도 가능하다. 나중에 추가로 정리해야 겠다.

json-server를 찾아보면서 보니 json-server와 함께 포스트맨(postman) 사용해 요청을 날리고 응답받던데 같이 알아두면 좋을 것 같다.

참고자료

JSON Server | PoiemaWeb

fetch API

[자바스크립트] fetch() 함수로 원격 API 호출하기