React + express 연동설정. 처음부터 따라하기 2

 

이전 글을 안보신 분들은 보고 오세요~

2020/01/17 - [React,Node,js] - React + express 연동설정. 처음부터 따라하기

React + express 연동설정. 처음부터 따라하기

 

이번 포스트에서 할것은 저번 글에 이어서

• client 와 server 한번에 start
• cors 제거 (경우에 따라 사용)

 

우선 npm-run-all 을 설치합니다.

npm install npm-run-all --save

프로젝트 root 폴더에서 package.json 을 열어서 수정합니다.

기존에

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},

이 부분을 아래와 같이 변경합니다.

  "scripts": {
    "start": "npm-run-all --parallel start:**",
    "start:client": "react-scripts start",
    "start:server": "node ./servers/server.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

이게 끝입니다. 이제 react 시작하는것처럼 하면 서버까지 실행됩니다.

root 폴더에서 react 시작하는것처럼 npm 으로 시작합니다.

C:\dev\nodeProjects\cs-test>npm start

> cs-test@0.1.0 start C:\dev\nodeProjects\cs-test
> npm-run-all --parallel start:**


> cs-test@0.1.0 start:client C:\dev\nodeProjects\cs-test
> react-scripts start


> cs-test@0.1.0 start:server C:\dev\nodeProjects\cs-test
> node ./servers/server.js

express is running on 3001

그럼 react 페이지가 뜨고 Hello bryan 이뜹니다.

 

Proxy 사용

또 한가지. server url 호출하는 부분을 좀 더 보기좋게 해보겠습니다.

App.js 에서 componentDidMount() 기존에

    componentDidMount() {
        fetch('http://localhost:3001/api')
            .then(res=>res.json())
            .then(data=>this.setState({username:data.username}));
    }

여기에서 url 대신

    componentDidMount() {
        fetch('api')
            .then(res=>res.json())
            .then(data=>this.setState({username:data.username}));
    }

이렇게 사용하도록 하겠습니다. client 와 server 의 도메인이 같은데 full url 보단 저게 깔끔하죠.

그리고 domain을 설정 파일로 관리하면 서버가 변경되었을 때 편하겠죠.

 

proxy 설정을 하겠습니다.

http-proxy-middleware 를 먼저 설치합니다.

npm install http-proxy-middleware --save

그리고 src 폴더 아래에 setupProxy.js 를 생성합니다.

const proxy = require('http-proxy-middleware');

module.exports = function(app){
  app.use(
      proxy('/api', {
          target: 'http://localhost:3001/',
          changeOrigin: true
      })
  )
};

추가! 1.0.0 버전부터 위처럼 사용하면 안되고 아래와 같이 사용하세요.

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app){
  app.use(
      createProxyMiddleware('/api', {
          target: 'http://localhost:3001/',
          changeOrigin: true
      })
  )
};

proxy ---> createProxyMiddleware 로 변경

 

servers/server.js 에서는 cors 를 사용하지 않아도됩니다.
( 외부에서 접근가능하게 하려면 주석치지 마시고요~)

const express = require('express');
const app = express();
// const cors = require('cors');
const bodyParser = require('body-parser');
const port =process.env.PORT || 3001;

// app.use(cors());

app.use(bodyParser.json());
app.use('/api', (req, res)=> res.json({username:'bryan'}));

app.listen(port, ()=>{
    console.log(`express is running on ${port}`);
})

 

Ctrl+C 로 npm 종료 후 npm start 로 다시 시작.

"Hello bryan" 이 뜹니다.

(참고로 웹브라우저에 http://localhost:3000/api 를 입력하면 http://localhost:3001/api 를 호출한 결과를 보여줍니다.)

 

서버쪽에 더많은 api를 만들기위해 server.js 에 route 를 적용합니다.

servers 폴더 아래 routes 폴더를 만들고 index.js 를 만듭니다.

const express = require('express');
const router = express.Router();

router.get('/', (req, res)=>res.json({username:'bryan~~~'}));

module.exports = router;

그리고 server.js 를 수정합니다.

const express = require('express');
const app = express();
// const cors = require('cors');
const bodyParser = require('body-parser');
const port =process.env.PORT || 3001;
const route = require('./routes/index');

// app.use(cors());

app.use(bodyParser.json());
app.use('/api', route); // app.use('/api', (req, res)=> res.json({username:'bryan'}));

app.listen(port, ()=>{
    console.log(`express is running on ${port}`);
})

여기서 /api 로오는것은 route 에서 처리하도록 하고

index.js 에서 router.get('/',...)  으로 되어있죠. /api/ 다음으로 뒤에 오는것을 index.js 에서 정의하면 됩니다.

 

예를 들어서 

index.js 에 아래와 같이 route 를 하나 더 추가합니다.

const express = require('express');
const router = express.Router();

router.get('/', (req, res)=>res.json({username:'bryan~~~'}));
router.get('/group', (req, res)=>res.json({username:'dev group. bryan'}));

module.exports = router;

그리고 App.js 에서 api/group 으로 호출합니다.

    componentDidMount() {
        fetch('api/group')
            .then(res=>res.json())
            .then(data=>this.setState({username:data.username}));
    }

 

결과는 뭐 잘 나오죠 ㅎㅎ

 

이제 막 확장 할 수 있는 느낌이 오시나요?ㅎㅎ

시간나면 DB 연결도 쓰겠습니다.