[Node.js] Express를 backend로 하는 Create-react-app 시작하기

이번주부터 바닐라코딩에서 백엔드 공부를 시작했다.

Node.js와 MongoDB를 이용하여 여러 가지 과제를 해보는 중인데

처음 접하는거라 어렵긴하지만 프론트에서 api 요청을 보내서 데이터 받아오는 것만 해보다가

직접 백엔드에서 DB에 데이터를 집어넣고 가져오는 작업들을 해보니까 너무 신기하다.

 

 

오늘은 Node.js 사용자들이 많이 사용하는 프레임워크인 Express로 백엔드를 구성하고

Create-react-app으로 프론트단을 구성하는 아주 간단한 방법에 대해 포스팅해보려고 한다.

이 포스팅은 아래 블로그 글을 참고하여 작성했다.

 

 

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

Create React App with an Express Backend

 

---

 

Express Generate하기!

Express만 다운받아서 이것 저것 설정하기에는 많은 시간과 노력이 든다.

만약 간단하게 서버 공부를 위해 테스트 앱을 만들 때

처음부터 하나 하나 다 설정하는데 시간을 많이 투자하고 싶지 않다면

express-generator를 이용하여 빠르게 Express App을 만들 수 있다.

 

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

 

먼저 express-generator를 설치한다.

 

 

$ express backend

 

그리고 원하는 경로에 위 명령어를 실행하면

backend라는 폴더가 만들어지고 그 폴더 안에 express가 생성된다.

 

 

$ cd backend
$ npm install   # or yarn

 

이제 해당 경로로 들어가서 npm install을 하면 끝이다.

 

 

$ PORT=3001 node bin/www

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

 

create-react-app이 localhost:3000 포트를 사용하기 떄문에

서버는 3001포트로 실행하도록 한다.

PORT=3001 혹은 set PORT=3001&&은 환경변수로 적용된다.

 

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

 

앱을 실행할 때마다 터미널에 위 명령어를 사용하면 되는데

그게 번거롭다면 package.json에서 설정해주면 npm start 명령을 실행하면 자동으로 설정된다.

 

나는 nodemon이라는 패키지도 추가로 설치하여 nodemon이 실행하도록 바꿔주었다.

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

nodemon은 개발 환경에서만 사용할것이므로 devDependency에 설치한다.

 

 

 

 

---

 

Create-react-app 생성하기!

express-generator와 비슷하게 React-create-app을 사용하면

매우 쉽게 react project를 시작할 수 있다.

 

$ npm install -g create-react-app

 

먼저 create-react-app을 global로 install한다.

 

 

$ create-react-app client

 

그리고 위 명령어를 치면 client라는 폴더 안에 react app이 만들어진다.

server와 client를 아예 별개로 만들 예정이기 때문에

backend 폴더와 같은 선상에 client 폴더를 만들고 react app을 생성한다.

 

 

 

 

---

 

Express와 create-react-app 연결하기!

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

 

client 폴더 안에 든 React app의 package.json에 "scripts" 섹션 밑에 "proxy"를 추가해준다.

이 때 "proxy"에 적을 포트는 무조건 express 서버가 실행되는 그 포트여야만 한다.

 

이제 리액트 앱이 보내는 요청이 css파일이나 이미지 파일, html파일과 같은 static asset(정적 파일)과 상관없는 요청을 보낸다면 "proxy"에 명시한 server 주소를 가리키게 될 것이다.

 

 

 

 

이제 서버와 클라이언트가 연결되었으니

서버와 DB를 연결해서 무엇이든지 만들 수 있게 되었다!