proxy 설정

브라우저에서 host나 port가 다른 백엔드 서버로 API 요청 시 proxy를 설정해줘야 한다.

• React와 Express 연동하기
  express를 추가할 때

npm add express --save

--save 옵션은 package.json의 dependency 항목에 모듈을 추가한다는 의미.
다른곳으로 프로젝트 이동, 공유할때 node_modules 폴더 같이 옮길 필요 없이 package.json의 dependency 항목 보고 npm이 자동으로 다운하기 때문.

import React from 'react';
import logo from './logo.svg';
import './App.css';
// App.js
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            username:null
        };
    }

  render() {
    const {username} = this.state;
    return (
        <div className="App">
          <header className="App-header">
            {username ? `Hello ${username}` : 'Hello World'}
          </header>
        </div>
    );
    ;
  }
}

export default App;

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

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

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

클라이언트에서 이 데이터를 받아와야 함.
App.js에 componentDidMount()를 추가한다.

import React from 'react';
import logo from './logo.svg';
import './App.css';
// App.js
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            username:null
        };
    }

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

  render() {
    const {username} = this.state;
    return (
        <div className="App">
          <header className="App-header">
            {username ? `Hello ${username}` : 'Hello World'}
          </header>
        </div>
    );
    ;
  }
}

export default App;

• client와 server 한번에 start
  이전엔 client는 npm start로, server는 node servers/server 로 실행을 했었다.
  npm-run-all 을 사용하면 둘을 동시에 실행시킬 수 있다.

npm install npm-run-all --save

설치 후 package.json을 수정한다.

기존 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"
  },
...

• http-proxy-middleware 모듈
  client의 src폴더 아래 setupProxy.js 를 생성한다.
  https://github.com/bluesun147/Customer-Management

// setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');

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

위 프로젝트의 경우 클라이언트인 3000포트(http://localhost:3000/)에서 서버인 5000포트(http://localhost:5000/api/customers)의 데이터를 받아와야 하는 상황.