[React] Node 서버와 React 연동하기

1. cra로 이미 리액트 프로젝트 생성 완료
2. 서버 프로젝트 생성 완료
3. 노드 서버/리액트 서버 따로 동작
   -> 이 세 가지를 전제두고 글을 작성한다.

Proxy를 사용하는 이유

1. 보통은 보안과 성능을 위해 사용
2. React에서는 개발시 사용하는 주소와 실제 배포용 주소가 달라져 하드코딩을 하면 바꾸기 번거롭기 때문도 있다.
   • proxy 설정을 해주면 base url은 생략하고 코드를 짤 수 있다.
     -> 즉, proxy를 설정해놓은 코드 한 줄만 바꾸면 된다.

서버와 리액트 연동하기

setupProxy.js

1. 리액트_프로젝트/src 아래에 setupProxy.js 파일을 생성한다.
2. npm install http-proxy-middleware로 모듈을 설치한다.
3. setupProxy.js 내용 작성

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

module.exports = (app) => {
    app.use(
        createProxyMiddleware('/api', {
            target: 'http://localhost:5000/', // 노드 서버 주소
            changeOrigin: true
        })
    )
}

• target: axios.get('/api/login')으로 요청 시 앞에 붙을 base url
• changeOrigin: 대상 서버 구성에 따라 호스트 헤더가 변경

여기까지 설정해주면 설정 완료!

+) cra로 리액트 프로젝트를 생성한 경우, package.json에 proxy: ~를 설정해주는 방법도 있다.

간단한 테스트

Node.js로 아주 간단한 서버를 하나 만들어서 테스트를 해볼 수 있다.
1. 노드_프로젝트/index.js파일을 하나 만든다.
2. npm install cors로 모듈을 설치한다.
3. index.js 파일 내용 작성

// 노드_프로젝트/index.js
const express = require('express');
const app = express();
const cors = require('cors');

app.use(cors()); 

app.get('/api', async (req, res) => {
    res.send('hello world');
})

app.listen(5000); // React가 3000번 포트를 사용하므로 다른 포트를 지정해주는게 좋다.

• CORS(Corss-Origin Resource Sharing): 자신이 속하지 않은 다른 도메인/프로토콜/포트에 있는 리소스를 요청하는 HTTP의 요청 방식이다.
  cors 모듈의 자세한 사용법은 여기서 확인할 수 있다.

4. npm install axios로 패키지를 설치한다.
5. 리액트_프로젝트/src/App.js에 테스트 코드를 작성한다.

// 리액트_프로젝트/src/App.js
import axios from "axios";
import {useEffect} from "react";

function App() {
  const sendRequest = async() => {
    const res = await axios.get('/api');
    console.log(res.data);
  };

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

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

export default App;

6. Node.js와 React 서버를 둘 다 실행 시킨다.
   
   콘솔창에 제대로 찍히는 것을 확인하면 연결 성공!