[React] 백엔드와 프론트엔드를 동시에 실행시키는 방법 | 분리된 백엔드와 프론트엔드 폴더

협업을 할때나 개인 프로젝트를 진행할 때, 프론트엔드 폴더와 백엔드 폴더를 따로 두고 작업하는 경우가 많다.

이렇게 되면 프로그램을 실행시킬 때, 백엔드 서버를 먼저 실행시키고 프론트엔드 서버를 실행시켜 확인하는 작업이 필요하다.

 

사실 개발을 하면서는 크게 불편함을 느끼지는 않지만, 이것을 github-pages에 배포할때처럼 백엔드 서버를 따로 두지않고 배포를 할때에는 문제가 생기게 된다.

 

프론트앤드와 백엔드를 함께 실행시키는 방법은 다음과 같다.

 

 1. 'concurrently' 설치하기

npm install concurrently --save

 

2. package.json- scripts 수정하기

before : 

"start": "react-scripts start",

after : 

"start": "concurrently \"react-scripts start\" ",

 

3. 백엔드 폴더를 다음과 같이 수정하기

"start": "concurrently \"react-scripts start\" \"cd {백엔드 폴더 위치} && nodemon start\"",

 

4. 이제 백엔드와 프론트엔드가 순차적으로 실행되는 모습을 확인할 수 있다!

npm start

 

 

 

reference

How to run Front End and Backend together in React.js and Express.js with 'concurrently' package