[React] express 를 이용하여 서버사이드렌더링 - 떽떽대는 개발공부

 

 

오늘은 front-end(Client) 와 back-end(Server) 를 분리하여 편리하게 개발하기 위해 서버사이드렌더링을 해 보았다.

먼저 express 를 install 한다.

npm install express --save

 

서버 사이드 렌더링의 경우 Cross-Origin Resource Sharing(CORS) 오류가 발생하는데, 이를  해결을 위해 cors 를 install 한다.

npm install cors --save

 

Client와 Server 사이의 중계기 역할인 프록시(Proxy) 사용을 위해  http-proxy-middleware'를 install 한다.

npm install http-proxy-middleware --save

 

이제, 아래와 같이 server, routes 디렉토리를 생성해준다.

server.js 와 index.js 에 코드를 입력한다.

server/server.js

const express = require('express');
const app = express();
const api = require('./routes/index');

// Cross-Origin Resource Sharing(CORS) 오류 해결을 위해 사용
const cors = require('cors');
app.use(cors());

app.use('/api', api);

// client서버는 3000
// 충돌하지 않도록 다른 번호 할당
const port = 3002;
app.listen(port, () => console.log(`Node.js Server is running on port ${port}...`));

 

server/routes/index.js

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

router.get('/', (req, res) => {
    res.send({title: 'hello react!'});
});

module.exports = router;

 

3002 포트의 서버가 잘 구동되는 지 확인한다.

node ./server/server.js

3002 포트가 잘 구동 된다면 이제 front-end 에서 back-end 연결을 위해 setProxy.js 파일을 생성한다.

src/setProxy.js

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

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

 

실제 데이터를 잘 받아오는 지 확인하기 위해 App.js 에서 서버로 요청을 보내본다.

src/App.js

import React, { Component } from 'react';

class App extends Component {
  constructor(props){
    super(props);

    this.state = {
      title: ''
    };
  }

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

  render(){
    return (
      <div className="App">
        111111
        {this.state.title !== '' ? <h1>{this.state.title}</h1> : <h1>loading...</h1>}
      </div>
    )
  }
}

export default App;

 

새로운 터미널을 하나 추가하여 react 의 서버도 구동해본다.

npm run start

 

이상이 없다면 아래와 같이 서버사이드 렌더링이 완료 되었다.