JSON-server로 프론트 단에서 백엔드 API 테스트 해 보기

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

json-server

 

 

json-server는 프론트 환경에서 서버로부터 데이터를 fetching하거나 하는 등의 API 테스트를 해보기 위해서  백엔드 환경을 추가로 구축하는 귀찮음을 덜어준다.

 

프로젝트 디렉터리에 설치해주자.

yarn add json-server

 

 

그리고 package.json 파일의 script 태그에 한 줄 작성해준다.

 

"serve-json": "json-server --watch db.json --port 4000"

이제부터 yarn serve-json 명령어로 4000번 포트에서 db.json을 조회할 수 있고 db.json의 변경도 감지한다는 뜻이다.

 

로컬에 작성한 json 데이터

http://localhost:4000/superheroes

 

이제 서버로 지정한 4000번 포트 http://localhost:4000/superheroes로 API 호출을 하면 잘 작동하는 것을 확인할 수 있다.

 

프론트단에서 백엔드 API 호출 테스트를 할 때 아주 유용할 듯하다.