React + Nodejs 서버 연동하기 (초보용)

일단 제 i18n 코드에다가 Nodejs 서버를 연동해보겠습니다. 일단

보내기라는 버튼을 누르면 서버와 통신을 해서 서버에서 data를 던진 값을 보내기 옆에 출력하는 것을 해보겠습니다.

일단 front쪽 코드는 

   <button className='button' onClick={(e) => { this.onClickBtn() }}> 보내기 </button>
    <div> 서버에서 온 값 : {this.state.message} </div>

이렇게 버튼을 달아주고 이벤트 핸들러를 달아줬습니다. 그리고 상단 state 에 message:"" 라는 변수를 선언해줬습니다.

 

그리고 이벤트 핸들러인 onClickBtn 함수를 만들어줍니다.

  onClickBtn = async () => { 
    const data = await new Photo().getData();
    console.log('data : ', data);
    this.setState({ message: data.data });
  }

 

상단에 import 하는 부분에서 

import Server from 'server/server';

서버쪽이랑 통신하는 컴포넌트를 import 해줍니다.

 

import axios from "axios";

const ServerUrl = "http://192.168.0.69:5000/";


class Server {

  getData() {
      return new Promise(async(resolve, reject) => {
          try {
            let data = await axios.get(ServerUrl);
            resolve(data);

          } catch(e) {
            reject(e);
          }
      })
  }
}

export default Server;

 

 let data = await axios.get(ServerUrl); 
 resolve(data);

라는 코드로 data값을 받아옵니다.

여기까지가 front 코드였습니다.

 

이제 server 쪽 코드를 보겠습니다.

 

var express = require('express')
const cors = require("cors");
const app = express();

var whiteList = [
    "http://localhost:3000"
]

app.use(cors(whiteList));

app.get('/', function(req, res) { 
    res.send('서버에서 값이 왔어요~~!');
});

app.listen(5000, ()=> { 
    console.log(' 서버가 열렸다아아아아!!');
})

아주 간단하죠

 

get으로 front에 값을 날려주고 

listen은 포트 번호를 지정해주는 것 입니다.

그리고 cors 라는 것으로 permit 해줄 url을 적어줍니다 ! 

여기까지 벡엔드 코드입니다.

 

이제 실행을 시켜볼까요 ? 

서버를 키고

front 에서 버튼을 눌러봅니다 !

서버에서 온 값 : {this.state.message} 이 우리가 서버에서 설정해준 data 서버에서 값이 왔어요~~! 로 들어간 것을 확인할 수 있습니다

 

감사합니다 :) 

틀렸거나 이상한 부분은 지적해주시면 감사하겠습니다 ! 아직저도 초보라서 쓴 피드백은 환영입니다 :) :)