json-server 간단 예제

FE(Front End) 단에서 개발을 할 때, REST API 를 이용해서 데이터를 주고 받아야 하는 상황이 발생합니다.

 

데이터베이스, 백엔드 서버를 설정하고 제대로 통신을 하면 되지만, 간단하게 테스트용으로 사용할 때 좋은 라이브러리가 있습니다.

 

json-server 라는 라이브러리입니다.

 

json 파일에 데이터를 저장해두면, 라이브러리가 알아서 해당 데이터에 걸맞게 REST API를 열어줍니다.

 

react, vue 등 플랫폼 상관없이 통신만 가능하다면 사용 가능합니다.

 

---

* 필자 개발 환경: vue + axios(npm i axios)

 

환경 설정 방법

1) command/terminal에 아래의 명령어로 json-server 라이브러리를 자신의 FE 폴더에서 설치

만약, npm이 없는 경우 node.js 설치하고 진행

npm i json-server

 

2) command/terminal에 아래의 명령어로 데이터를 저장할 json 파일 생성(db.json)

json-server --watch db.json

생성된 db.json 파일

 

현재 생성된 db.json 파일에 객체가 posts, comments, profile 이 있으며, 이 3개에 접근이 가능.

아래 이미지처럼, 라이브러리가 자동으로 posts, comments, profile 의 REST API 를 자동으로 생성

 

필자는 db.json 파일에 users 추가

 

사용 방법

• GET: 조회
  이번 포스팅에서는 간단하게 조회만 해봤는데 sort / paging 등 다양한 기능도 제공하니 해당 사이트에서 예제 참고
  (맨 하단에 해당 사이트 링크 기재)
• POST : 등록
• PUT : 전체 수정
• PATCH : 부분 수정
• DELETE : 삭제

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

 

 

INSERT

INSERT 코드

김멍목 INSERT

김멍목 추가 확인

 

 

SELECT

기본 예제로 == 조건으로 확인.

해당 소스에는 없지만 like 기능이 있어서 더욱 편하게 사용 가능.

SELECT 코드

 

UPDATE

UPDATE 코드

ID: 2의 name을 갓멍목으로 UPDATE

id 2. 갓멍목 확인

 

 

 

DELETE 

DELETE 코드

id 2 삭제

id 2 삭제 확인

 

 

화면 및 전체 소스코드 git 주소

https://github.com/ksm1538/hello-json-server

GitHub - ksm1538/hello-json-server

 

 

json-server Page

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

json-server