리액트 - json-server

json-server란

프론트엔드 개발을 하며 백엔드를 동시에 구축해서 사용하기에는 매우 어렵고 번거로울 것이다.

이를 해결하기 위한 솔루션으로 json-server라는 것이 있는데, 내부적으로 lowdb라는 단순한 데이터베이스를 이용하며 REST API를 지원한다고 한다.

GET, POST, DELETE, PUT 메소드를 지원한다.

(POST, PUT 시에는 헤더에 Content-Type: application/json 작성 필수라고 함)

sqlite보다 더 단순한 db인 것으로 확인되는데,

주의 점으로는 직접 만든 db.json 파일에 직접 데이터를 저장하고 갱신하는 방식이라 앱 재배포시 기존 데이터 전부 날라갈 수 있다고 한다.

json-server 설치 - (단발적으로 진행시 필요 없음. 아래 json-server 실행에서 설명)

npm install json-server --save-dev

데이터베이스 작성

# room.json
{
    "room":
    [
        
    ]
}

# 이름은 자유롭게 설정 가능, 파일 이름도 마찬가지

json-server 실행

npx json-server ./room.json --port 4000

# 실제 room.json 부분은 자신이 만든 json 파일명이 될 것이다.

• 뒤의 포트는 임의로 부여할 수 있음

• npx를 통해 해당 패키지를 단발적으로 설치하고 실행함

[만약 npm으로 설치되어 있는 상황이면?!]

json-server --watch room.json --port 4000

💡

npx는 임시적으로 패키지를 다운받고 실행시켜줄때 사용하는 명령어이다. create-react-app과 같이 단발성으로 끝나는 경우 npx 사용을 권장한다고 한다. json-server 또한 npx를 통해 단발적으로 실행하는 것이 났다고 한다. 하지만 나는 하루에 여러번 실행할거고 앞으로도 자주쓸 것 같기에 json-server 설치 단계를 진행하였다.