React 클라이언트와 서버(Node.js) 연동

React프로젝트에 설치된 서버와 React로 구성된 화면단을 연결해보겠습니다.

연결확인을 위해 서버에서 만들어둔 샘플text를 App.js에서 요청시 해당경로를 통해 화면에서 보여주도록 하겠습니다.

 

 

eject실행하기

eject는 해당프로젝트에 숨겨져있던 모든 설정들을 밖으로 추출해주는 명령어입니다.

eject를 실행하면 webpack과 babel등 프로젝트에 의존된 수많은 설정들이 package.json에 등록됩니다. 

 

npm run eject

yarn eject

 

한번 실행하면 되돌릴 수 없으니 eject를 원하는게 확실한지 확인하는 메시지가 나옵니다. y를 눌러 계속 진행합니다.

 

 

 

GIT에 커밋되지 않은 changes들 commit하기

저의 경우 git저장소로 등록된 프로젝트폴더에 커밋되지 않은 파일들이 있어 진행이 중단되었습니다.

이런 경우 커밋을 먼저하고 다시 'npm run eject'를 실행합니다.

 

 

 

 

eject가 완료되면 성공적으로 추출되었다는 메시지와 함께 'config'와 'scripts' 디렉토리가 추가됩니다.

 

 

이 때 config폴더안에 'webpack.config.dev.js'이 들어있을 경우(React 이전 버전) 추가 세팅들이 필요할 수 있습니다. 저는 해당하지 않아서 추가 세팅은 pass했습니다.

 

 

 

 

클라이언트요청을 받기위한 server.js세팅

화면단에서 /hello경로로 데이터요청(by Port번호 4000)시 'Hello react'라는 메시지를 보내기 위한 코드입니다.

 

const express = require('express');
const app = express();
const PORT = process.env.PORT || 4000;

app.get('/hello', (req, res) => {
    res.send({ hello : 'Hello react' });
})

app.listen(PORT, () => {
    console.log(`Server On : http://localhost:${PORT}/`);
})

 

 

 

 

Axios모듈을 활용한 http요청(웹서버와 통신)

HTTP통신을 위해 요즘 많은 장점으로 인기있는 Axios라이브러리를 사용해보겠습니다. 

 

npm install axios

yarn add axios

 

axios를 설치한 뒤 App.js를 수정합니다. 아래 코드는 화면이 처음 mount(랜더링)되었을 때 _getHello를 실행하여 axios를 통해 '/hello'경로로 ajax통신요청을 합니다. 그럼 응답받은 hello데이터를 setState하여 화면을 다시 랜더링하게 됩니다.

 

import React, { Component } from 'react';
import axios from 'axios';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hello : '',
    }
  }

  componentDidMount() {
    this._getHello();
  }

  _getHello = async() => {
    const res = await axios.get('/hello');
    this.setState({ hello : res.data.hello })
  }

  render() {
    return(
      <>
        <h3> {this.state.hello} - connected to server</h3>
      </>
    )
  }
}

export default App;

 

 

 

데이터요청을 위한 Port설정

서버에 데이터요청시 사용할 port를 package.js 하단에 추가해줍니다. (proxy정보를 지정해주지 않으면 React와 백엔드서버 중 어디와 통신해야할지 알 수 없기 때문에 기본적으로 React포트인 3000으로 요청을 보내게 됩니다.)

 

"proxy": "http://localhost:4000"

 

 

 

브라우저에서 확인하기

정상적으로 동작하는지 확인하기위해 서버와 클라이언트를 각각 실행해줍니다.

server경로로 이동하여 'node server.js'를 실행하고 프로젝트폴더로 돌아와 'npm start' 또는 'yarn start'를 실행합니다.

node server.js

'Hello react'라는 메시지가 정상적으로 출력되었습니다.