[React.js] Client와 Server를 동시에 시작할 수 있는 모듈

서버와 클라이언트를 같이 만들 경우에는 서버/클라이언트를 독립적으로 실행해 줘야 한다.

서버 cmd 창에서 스크립트 치고, 클라이언트 cmd 창에서 스크립트를 치기 귀찮았는데 동시에 실행할 수 있는 모듈이 있었다.

바로 'Concurrently'라는 모듈이다.

npm install concurrently --save

위와 같은 명령어로 모듈을 설치한 다음, 최상위에 있는 pakage.json에서 스크립트를 작성한다.

나의 React 폴더는 아래와 같은 구조로 되어 있다.

 

- client

- server

- pakage.json 

 

pakage.json

...
"scripts": {
	"start" : "node server/index.js"
    ...
 }

client/pakage.json

...
"scripts: {
	"start: "react-scripts start"
    ...
}

동시에 실행하려면 최상위 pakage.json에서 아래와 같은 스크립트를 추가해 준다.

...
 "scripts": {
    "start": "node server/index.js",
    "dev": "concurrently \"npm start backend\" \"npm run start --prefix client\""
  }

concurrently 는 "concurrently \"command1 arg\" \"command2 arg\"" 과 같은 형식으로 사용한다.

이렇게 스크립트를 작성한 다음 npm run dev를 입력하면 서버와 클라이언트가 동시에 실행되는 것을 볼 수 있다.