[Node.js] express를 backend로 하는 Create-react-app

1. 개발환경 세팅

이번 프로젝트에서 Node.js에서 많이 사용하는 프레임워크인 Express로 백엔드를 구성하고 Create-react-app으로 프론트를 구성해보려고 한다. 이번 포스팅에서는 Express 앱을 만들고 react앱과 서버를 연결해주려고 한다.

프로젝트의 전체 폴더 안에 back와 front폴더를 각각 나눠주고, back 폴더에는 express, front폴더에는 react 앱을 세팅해준다.

2. Express Generate 로 express 앱 만들기

Express-generator는 Express 환경을 간단하게 구축해주는 npm이다.

따라서 사용하면 쉽게 Node.js 개발을 할수 있다는 장점이 있다.

express-generator를 설치해서 Express App을 만든다. 설치는 아래와 같다.

$ npm install -g express-generator
# or:  yarn global add express-generator

그리고 express app을 만들어준다. (폴더이름을 back로 지정함) 아래와 같이 입력하면 backend라는 폴더가 만들어지고, 폴더 안에 express가 생성된다.

$ express back

• express-generator 명령으로 바로 만들고싶다면 아래와 같이 입력하는 방법도 있다.
• npx express-generator back

이제 해당 경로로 들어가서 npm install을 하고 npm start로 앱을 실행시킨다.

$ cd back
$ npm install   # or yarn
$ npm start

브라우저에서 http://localhost:3000/ 로 이동하면 앱이 잘 작동되는것을 볼 수 있다.

 

3. Create-reate-app 생성하기

따로 포스팅을 정리해 놓은 적이 있으니 여길 참고하자.

app을 생성할 때 폴더 이름을 front로 주었다.

$ create-react-app client

 

4. Express API에서 새 경로 주기

위에서 React-creat-app에서 만들어준 서버 역시 포트번호가 3000번이어서, 처음에 만든 express 서버와 경로가 겹친다. 나중에 두 앱을 동시에 실행시켜야하므로 이를 위해 서버의 포트번호를 바꿔주도록 한다.

bin폴더의 www파일에서 변경한다. 포트번호는 뭐든 상관없다.

var port = normalizePort(process.env.PORT || '3001');
app.set('port', port);

아니면 앱을 실행할 떄마다 터미널에 아래의 명령어를 사용해준다.

$ PORT=3001 node bin/www
# window user: set PORT=3001&&node bin/www

그게 번거롭다면 package.json의 script의 npm start명령으로 설정해줘도 된다.

"scripts": {
"start": "set PORT=3001&&nodemon ./bin/www"
},

nodemon

nodemon은 서버의 코드가 바뀔 때마다 자동으로 서버를 재시작해주는 모듈이다.

개발환경에서만 사용할 것이므로 devDpendency에 설치하도록한다.

 

5. Express API와 React 클라이언트 연결하기

front 폴더 안의 React app의 package.json 파일의 script 섹션 아래 proxy를 새롭게 추가해준다.

*Proxy : 서버와 클라이언트 사이에 중계기로서 대리로 통신을 수행하는 것

proxy에 적을 포트는 express 서버가 실행되는 포트이다.

"scripts": {
	"start": "react-scripts start",
	"build": "react-scripts build",
	"test": "react-scripts test",
	"eject": "react-scripts eject"
},
"proxy": "<http://localhost:3001>",

이렇게 하면 리액트 앱이 보내는 요청이 proxy에 명시한 server주소를 가리키게된다.

pakage.json ⇒ “proxy” : “http://localhost:3001”
React App calls ⇒ http://localhost:3000/api/users Server call ⇒ http://localhost:3001/api/users

 

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