React json-server

Json Server

npm i json-server

가짜 DB와 API 서버를 생성해주는 패키지

왜 씀

실제 서버의 개발 또는 프로덕션 환경의 api를 사용하여 프론트엔드 개발이 힘들다.

서버에의 의존성을 줄이고 독립적으로 api가 있는 것 처럼 mocking하고 이를 사용함으로써

프론트엔드 개발을 독립적으로 가능하게 해준다,

시작하기

가짜이지만 api 호출과 응답을 가능하게 해주는 서버가 있는 것임.

따라서 리액트 앱과 별개로 서버를 실행시켜줘야 한다.

db.json 파일을 만들어 db 스키마 같이 사용할 수 있다.

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

Mock Service Worker와의 차이

백엔드 공부를 했었어서 api mocking의 필요성을 어느정도 알고 있어서

msw를 공부했던 적이 있었다.

msw의 경우는 json-server처럼 하나의 서버를 띄워서 사용하는 것은 아니었고

실제 서버 api 엔드포인트에 요청을 하게끔 구성해두고 이를 네트워크 상에서 중간에 가로채서

정의해둔 가짜 응답데이터를 건네주는 방식이었다.

따라서 가짜 서버로 요청할 수 있게 엔드포인트를 교체해주는 작업이 필요없었다.

msw가 개발 런타임환경에서 구동할 수 있는지는 모르겠지만 테스팅 환경에 적합했던 것 같다.

단점은 조금 어려웠던 점인 것 같다.

json-server는 사용도 쉬워보이고 배포환경으로도 가짜서버를 띄워서 사용도 가능하다는 점이 좋은 것 같다!