[React&Node] React, Node 연동 및 동시에 실행하기

 

React와 Node 연동하기

React와 Node 연동하기 위해 다음 블로그 글을 참고했다. 여러 블로그글을 봤지만 해당 블로그가 제일 간단하고 쉽게 되어있기때문에 그대로 링크를 첨부했다.

https://hello-bryan.tistory.com/121

React + express 연동설정. 처음부터 따라하기

 

React와 Node 동시에 실행하기

위 블로그를 따라서 React와 Node를 쉽게 연동할 수 있다. 하지만 여전히 서버와 프론트를 따로 따로 실행해야하는데, 설정을 통해서 한번에 두 가지를 동시에 실행시키는 방법을 알아보고자 한다.

 

concurrently package 설치

우선 프로젝트 루트 폴더에 concurrently package를 설치해야한다.

npm i -D concurrently

 

package.json 파일을 수정

그 다음으론 package.json 파일을 수정해야한다. 우선 package.json에 앞서 설치한 concurrently 패키지 정보가 들어있는지 확인한 후, scripts 부분에 다음과 같이 작성해준다.

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "server": "nodemon server/server.js",
    "client": "npm start",
    "dev":"concurrently \"npm run server\" \"npm run client\"",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

작성한 부분은 "server", "client", "dev" 부분이다. server에는 server를 시작하는 명령어를, client에는 client를 시작하는 명령어를 적어주고, dev 부분에는 server와 client를 동시에 실행시켜 줄 수 있는 명령어를 적는다.

 

동시 실행

npm run dev

 다음 명령어를 입력하면, 서버와 프론트가 동시에 실행되는 것을 확인할 수 있다.