React.js 와 Express 명령어 하나로 실행하기

최근 토이프로젝트를 위해 새로운 프로젝트를 생성할 필요가 생겨졌다.
어떤 구성으로 해볼까 고민하다가 예전에 공부만 해보고 프로젝트로 제대로 사용해보지 못한 React를 사용해보기로 했다.

본 블로그도 Gatsby로 만들어서 기본적으로 React문법을 따르지만 기본적인것만 사용하기에..

React.js프로젝트를 생성하면서 TypeScript도 함께 세팅해보기로 한다.

CRA(Create-React-App) 설치

우선 Create-React-App을 설치한다.

Copy

$npx create-react-app frontend --scripts-version=react-scripts-ts 
$cd frontend
$npm start

프로젝트명을 frontend라고 단순히 지었다. 필자는 보통 프로젝트 폴더 내에 backend, frontend, api 등으로 명명하곤 한다.

localhost:3000을 통해 페이지를 확인해본다.

Express 설치

backend부분은 Node.js 사용을 위하여 Express를 설치해본다.

참고 게시글

Copy

npm install express-generator -g
express --ejs backend #express-generator를 이용해 express 프로젝트를 생성한다
cd backend
npm install
npm start # 서버 가동

아주 간단하게 FrontEnd와 BackEnd의 프로젝트 설정이 끝이났다. 각각 폴더에 가서 npm start를 해주면 내용 확인이 가능하다.

이제 우리는 하나의 프로젝트 실행을 위해 npm start를 두번이나 해줘야하는 불편함이 생겼다!

이것을 하나의 명령어로 둘 다 실행해보자.

Concurrently 를 이용한 프로젝트 일괄 실행하기

Concurrently npmjs

설치방법은 간단하다.

Copy

npm install concurrently --save

으로 설치가 가능하며 root폴더에서 다음과 같이 package.json을 설정해준다

Copy

"scripts": {
    "start": "concurrently \"npm run backend\" \"npm run frontend\"",
    "backend": "cd backend && npm start",
    "frontend": "cd frontend && npm start"
  },

위와같이 scripts를 설정해주면 npm run start명령어 하나도 2개의 프로젝트 실행이 가능하다.