# React와 Node.js연동

# 연동 과정

# 1. node express 설치

yarn add express

# 2. 프로젝트 root 경로에 server 디렉토리와 server.js 생성

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

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

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

const PORT = 3001;
app.listen(PORT, () => console.log('Node.js Server is running on port 3001'));

서버 생성 코드이다. 포트번호는 충돌을 피하기 위해 3001번으로 할당하였으며 '/api'의 경로 요청을 라우팅해주었다.

# 3. server 디렉토리에 routes 디렉토리 생성 후 index.js 파일 생성

// server/routes/index.js
const express = require('express');

const router = express.Router();

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

module.exports = router;

# 4. proxy 설정을 위한 모듈 설치

yarn add http-proxy-middleware

# 5. src 디렉토리 안에 setupProxy.js 파일 생성

// src/setupProxy.js
const proxy = require('http-proxy-middleware');

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

설정된 프록시는 클라이언트 사이드에서 Node.js 서버 사이드인 http://localhost:3001/api로의 요청을 처리하여 서버 데이터를 가져올 수 있도록 해준다.