React 와 Node.js 연동하기

직접 API 구현해서 사용하고 싶으신 분들은 Node.js로 빠르게 서버 열고 테스트 해보시면 좋을 것 같습니다!

노드는 노드서버로, 리액트는 CRA를 통해서 리액트 서버로 따로 돌리는 방법입니다.
(노드 서버로 리액트를 돌리고 싶다면 다음 포스팅에 따로 작성하겠습니다.)

front 폴더와 back 폴더를 나눠서 각자 관리하도록 하겠습니다.

⚙️ React 설정

1. 먼저 CRA로 리액트앱을 생성해주세요!

   npx create-react-app myreact

2. 만들어진 myreact/src에 setupProxy.js 파일을 추가합니다.
   그리고 아래 코드를 입력해주세요.
   target은 node server를 입력하시면 되는데, 저는 8080 포트로 노드서버를 열 예정입니다.

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

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

⚙️ Node.js 설정

1. 원하시는 경로에 폴더를 하나 만들어주세요. 여기서는 mynode 라는 폴더명을 사용하겠습니다.

2. mynode폴더 하위에 package.json 을 생성합니다.

   cd mynode
   npm init

3. dependency를 설치합니다.

   npm install express
   npm install cors
   // 서버를 분리해서 구성하므로 CORS 패키지를 설치해야합니다.

4. server.js 파일을 생성하고 아래 코드를 넣어주세요

//server.js
const express = require('express');
const path = require('path');
const cors = require('cors');
const app = express();

const server = require('http').createServer(app);

app.use(cors()); // cors 미들웨어를 삽입합니다.

app.get('/', (req,res) => { // 요청패스에 대한 콜백함수를 넣어줍니다.
  res.send({message:'hello'});
});

server.listen(8080, ()=>{
  console.log('server is running on 8080')
})

5. 서버를 구동시킵니다.

   node server.js
   or
   nodemon server.js

• nodemon 으로 실행시키면, 파일을 수정 후 저장할 때마다 서버가 자동으로 재구동 됩니다.
  
• 포트번호를 바꾸시면 꼭 리액트 폴더의 setupProxy.js 로 가셔서 target을 바꿔주세요.

🚀 테스트

잘 들어오는지 간단하게 확인해보겠습니다.

먼저 axios 패키지를 설치해주세요.

npm install axios

//App.js

import './App.css';
import axios from 'axios';
import React,{useState,useEffect} from 'react';

function App() {

  const sendRequest = async() => {
    const response = await axios.get('http://localhost:8080');
    console.log(response);
    console.log(response.data);
  };

  useEffect(()=>{
    sendRequest();    
  });

  return (
    <div className="App">      
    </div>
  );
}

export default App;

잘 들어오네요!
혹시 안되신다면 node서버가 켜져있는지 꼭 확인해주세요