React
React : json-server
고래고래00
2024. 6. 10. 20:16
json-server 개념
- json-server란, DB와 API 서버를 생성해주는 패키지
- 백엔드에서 실제 DB와 API 서버가 구축될 때 까지
프론트엔드 개발에 임시적으로 사용할 mock data를 생성하기 위해 사용 - json-server를 통해서 프론트엔드에서는 백엔드가 하고 있는 작업을 기다리지 않고,
프론트엔드의 로직과 화면을 구현 할 수 있어 효율적으로 협업 가능
Supabase, Firebase는 REST API를 사용하지 않고 기본 제공 API를 사용
실무에서는 대부분 REST API 사용 => json-server가 실무적으로 더 도움이 될 수 있음
json-server 설치
yarn add json-server
yarn add json-server -D (개발 환경인 경우, -D 옵션을 함께 입력)
json-server 사용
json-server 실행
json-server가 간단한 패키지이긴 하나, 말그대로 (간이 백엔드) 서버
=> 리액트와는 별개로 따로 실행
=> 리액트도 실행해야 하고, json-server로 시작도 해야함
=> 리액트와 json-server가 서로 통신
루트 경로에 db.json 파일 생성하고 아래 처럼 작성
{
"todos": [],
"users": []
}
터미널
yarn json-server db.json --port 4000
db.json 파일을 db로 설정해 4000 포트에서 서버를 시작
todos에 데이터를 임시로 하나 추가
{
"todos": [
{
"id": 1,
"title": "json-server",
"content": "json-server를 배워봅시다."
}
],
"users": []
}
그리고 Endpoints의 주소(http://localhost:4000/todos)로 이동하면 아래와 같이 데이터 확인 가능