이전 2개의 글에서 express 서버를 구축하고 monogoDB를 서버에 연결하여 간단한 CRUD 기능을 구현했었습니다.
이번 글에서는 React 프로젝트를 생성하고 React와 express를 연동해보겠습니다.
react-client폴더는 리액트 프로젝트 폴더입니다. 그리고 server 폴더는 express 서버 폴더입니다.
루트 폴더의 yarn init 명령어로 package.json 생성하였습니다.
그리고 커맨드를 동시에 실행하게 도와주는 concurrently 패키지를 설치했습니다.
$ yarn add concurrently --dev사용법은 아래와 같습니다.
--kill-others-on-fail : 커맨드 중 하나라도 오류가 발생하면 모두 종료 시키는 옵션.
"scripts": {
"server": "cd server && nodemon server",
"client": "cd react-client && yarn start",
"start": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
},
루트 폴더 경로에서 yarn start 명령어를 작성하면 리액트 서버와 express 서버가 동시에 실행됩니다.
리액트 서버에서 express 서버에 요청보내기
리액트 서버에서 express 서버에 요청을 보내기 위해서는 proxy를 설정해주어야 합니다.
react프로젝트의 package.json에 아래와 같이 코드를 추가합니다.
"proxy": "http://localhost:4000/"이제 클라이언트에서 POST /posts 방식으로 요청을 보내면
POST http://localhost:4000/posts 로 요청됩니다.
