[React] json-server

백엔드에서 서버를 만들고, DB를 추가해주는 방식으로 데이터에 대한 CRUD를 할 수 있지만, 백엔드가 없는 경우에 json파일을 통해 목업데이터를 사용하는 방식을 사용할 수 있었다.

json-server라는 패키지를 통해서 포트를 한 개 개방하여 해당 포트로 api를 호출할 수 있는 구조로 구성되어 있었다.

[1] json-server 설치

npm install -g json-server

위의 명령어를 터미널에 입력하여 패키지를 설치해준다.

[2] json-server 연결

위와 같은 구조로 폴더와 파일을 위치시킨다.

json파일의 내부에 json 형태의 데이터를 추가해준다. (위의 예시는 users 정보를 저장하는 방식으로 작성했다.)

json-server --watch ./src/db/data.json --port 3001

위의 명령어를 터미널에 입력하여 json-server와 파일을 연결시켜 포트를 개방한다.

localhost:3001/users와 같은 url을 입력하여 접근해보면 json 파일에 저장되어 있는 내용들을 확인할 수 있다.

이는 마치 서버에서 api 링크를 통해 데이터를 확인하는 것과 유사하다.

이제 json 파일을 json-server를 통해서 확인할 수 있게 되었다.
그 다음으로 해야 할 부분은 axios를 연결해서 get / post / delete에 대한 부분을 구현하면 된다.

보러가기