리액트와 Node.js 연동해보기

1. CRA 를 통해서 리액트 폴더 만들어주기

npx create-react-app reactnode

2. CORS 문제 해결을 위해 src폴더 안에 setupProxy.js 만들어주기

npm install http-proxy-middleware

// src/setupProxy.js 파일

const {createProxyMiddleware} = require('http-proxy-middleware');

module.exports = function(app){
  app.use(
    createProxyMiddleware("/",{
      target:"http://localhost:3000", // 노드와 연결할 포트번호
      changeOrigin:true,
    })
  )
}

3. 서버 폴더 따로 만들어주고, express 설치후 셋팅

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

app.use(cors());
app.set("port", process.env.PORT || 3000);

app.get("/", (req, res) => {
  res.send({ message: "하이" });
});

app.listen(app.get("port"), () => {
  console.log(app.get("port"), "번 포트에서 대기중");
});

4. 리액트 코드 내에서 app.js에서 설정해놓은 res값 가져오기

import { useEffect } from "react";

function App() {
  const sendRequest = async () => {
    const res = await await fetch("http://localhost:3000/");
    const data = await res.json();

    console.log(data);
  };

  useEffect(() => {
    sendRequest();
  }, []);

  return <div className="App">gkdl</div>;
}

export default App;