React App과 Express 연동

이 포스트는 Dave Ceddia blog에 포스팅된 내용을 참고하였습니다.

https://daveceddia.com/create-react-app-express-backend/

React App은 create-react-app 패키지를 사용하게 된 이후 비약적으로 편리하게 프로젝트를 생성할 수 있게 되었습니다. 이전에는 프로젝트 생성부터 webpack 설정까지 개발자가 직접해야했던 여러 작업들을 압축하여 create-react-app이라는 명령어 하나로 처리할 수 있게 되었습니다. 덕분에 frontend에 해당하는 영역은 손쉽게 처리가 가능해졌지만, backend는 분명 다른 영역이고, 이부분을 어떻게 처리해야하는지 고민이 되기 마련입니다.

Dave Ceddia blog의 포스팅에서는 frontend와 backend 두 개의 프로젝트를 하나의 root로 묶어서 관리하는 방식으로 이를 해결하고자 하는 모습을 보입니다. 그래서 포스팅 제목도 Create React App with an Express Backend 입니다. 앞서 말한대로 분리된 두 개의 프로그램을 하나의 root에서 관리하고, 프로그램은 각각 실행시키되 React app을 backend 프록시로 연결시킴으로써 React app이 request를 날릴때 backend 프로그램과 동일한 port를 사용하고 있는듯이 작동하게 합니다. 완벽하게 하나의 프로그램으로 작동하는 것은 아니지만 개발단계에서 이러한 설정을 가져가는 것만으로도 관리의 편의성 및 일관성, 통합성 등의 측면에서 추천할만한 방식이라고 생각됩니다. 이 형태로 프로젝트를 구축하는 방법 또한 굉장히 간단합니다.

Express Backend를 구성하기 위해서 먼저 express-generator를 설치합니다. 이미 Node.js 및 npm 등이 설치되어 있는 상태임을 가정하고 작성하도록 하겠습니다.

npm install -g express-generator

or 

yarn global add express-generator

위의 명령어 중 본인이 설치하시기 편한쪽을 선택해서 설치하시기 바랍니다. 설치가 완료되고 나면 본인이 원하는 directory로 위치하신 후 express backend 프로젝트를 생성합니다.

express react-backend

위 명령어를 실행하시면 자동으로 react-backend라는 폴더명으로 express backend의 기본적인 프로젝트가 생성됩니다. 다시 react-backend 폴더에 접근하여 필요한 package들을 설치해줍니다.

cd react-backend

npm install

위와 같이 실행하게 되면 실행가능한 backend 프로그램이 완성됩니다. 실행프로그램은 react-backend/bin 아래에 있는 www입니다. 

var port = normalizePort(process.env.PORT || '3000');

www의 소스를 보면 15번째 라인에 위와 같이 port를 설정해주는 부분이 나옵니다. nomalizePort 함수는 입력된 값에 대한 유효성 검증하는 함수이므로 실제로 port 값을 결정하는 것은 process.env.PORT || '3000' 라는 부분임을 알수 있습니다. 기본적으로 process.env는 서버가 동작하는 OS의 환경변수를 사용하는 것으로 만일 우리가 리눅스 기준으로 PORT=3001 을 입력하고 프로그램을 시작하거나 Windows 기준 set PORT=3001이라는 변수 설정 후 프로그램을 시작하면 프로그램이 실행되면서 port 3001을 사용할 것임을 알 수 있습니다. 그래서 포스팅에서는 PORT=3001 node bin/www 의 명령어로 실행하도록 한 것입니다. 저는 그냥 굳이 이런 식으로 실행시킬 필요가 없다고 생각해서 port 값을 설정하는 15번째 라인에 있는 '3000' 이라는 값을 '3001'로 변경하였습니다. 프로그램은 3001 port에서 이상없이 실행되었습니다.

이렇게 Express backend를 구축하고 나면 React App을 생성할 차례입니다. React app은 앞서 말씀드린대로 create-react-app을 이용합니다. create-react-app 도 express-generator와 같이 npm을 이용해서 설치해줍니다.

npm install -g create-react-app

위 명령어를 실행시키고 앞서 생성한 react-backend 폴더에 들어가셔서 React App 프로젝트를 생성합니다.

create-react-app client

명령어를 실행하시면 react-backend 폴더 아래 client라는 폴더가 생성되면서 React App project가 생성됩니다.

마지막으로 React App project에서 proxy를 설정합니다. client 폴더에는 package.json 파일이 있는데, 파일에는 사용하는 react, react-dom 등에 대한 dependency가 정의되어 있고,  프로그램이 실행될때 사용되는 script도 정의되어 있습니다. 그러면 scripts 아래에 proxy라는 item을 아래와 같이 추가해줍니다.

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:3001"
}

proxy를 추가함으로써 React App은 실제 3000번 port에서 작동중임에도 불구하고 호출은 Express backend가 존재하는 3001번 port로 호출하게 됩니다. 이렇게 하는 이유는 cross-origin-resource-sharing 문제를 피하기 위함입니다. CORS는 나중에 다시 포스팅하도록 하겠습니다.

이제 실제 개발환경은 세팅이 모두 끝났습니다. sample 프로그램을 테스트해보고 싶으시다면 상단에 있는 url에 접속하셔서 users.js, App.js 등의 소스코드 등을 복사하셔서 테스트해보시기 바랍니다. 저는 개인적으로 정상적으로 잘 작동하는 것을 확인하였습니다.

비록 react-backend와 client 두 경로에서 각각 node bin/www와 npm start로 작동시켜야한다는 불편함과 완전히 통합된 프로그램이 아니라는 한계는 존재하지만 충분히 편의를 제공하는 방식이라고 생각됩니다. 두 개의 프로젝트를 각각 실행시켜야하는 것은 어디까지나 개발단계에서 이뤄지는 방식이며 실제로 운영단계에서는 React.js로 만들어진 프로그램을 빌드하여 Backend 프로젝트 내 경로에 위치시켜 client에게 전달하는 방식으로 구성하시면 운영단계에서는 통합된 하나의 프로그램으로서 작동하게 됩니다. React App과 Express 연동이 어려우셨던 분들이 게시다면 참고하시기 바랍니다.