React+Mock API - Concurrently

Why?

• React와 Mock API를 구동하기 위한 서버가 다르기 때문에 json-server나 node.js로 구축한 서버를 동시에 실행 시키려면 각각 다른 명령 프롬프트에서 실행 시켜야 한다!
• 예를 들어 아래처럼 각각 다른 프로젝트를 열어서 실행시켜야 한다..ㅠㅠ

// 리액트 프로젝트에서
yarn start

// mock api를 사용하는 프로젝트에서
yarn json-server --watch db.json --port 5008

• 하지만 concurrently를 사용하면 한 터미널에서 서버 두개를 한번에 실행 시킬 수 있다!

사용법

• 리액트 설치

yarn create react-app test

• json-server 설치

yarn add json-server

• concurrently 설치

yarn add concurrently

• db 파일 만들기. 이름은 아무거나 상관없지만 db.json을 예시로 만들자

db.json

{
    "people": [
        {
            "id": 1,
            "age": 25,
            "height": 179
        },
        {
            "id": 2,
            "age": 27,
            "height": 181
        },
        {
            "id": 3,
            "age": 19,
            "height": 190
        },
        {
            "id": 4,
            "age": 35,
            "height": 171
        },
        {
            "id": 5,
            "age": 22,
            "height": 179
        }
    ]
}

• pakage.json 파일에 json-server 실행 명령어를 추가한 후 concurrently를 이용해 리액트 실행 명령어와 json-server 실행 명령어 추가하기. 나는 dev로 명령어를 지정했다!

"scripts": {
    "start": "react-scripts start",
    ...
    "server-start": "yarn json-server --watch db.json --port 5008",
    "dev": "concurrently \"yarn start\" \"yarn server-start\""
}

• 이제 yarn dev 명령어를 이용하면 json-server와 react 프로젝트가 동시에 구동된다!