React & Node.js 연결

Node.js 서버 설정:

먼저, Node.js 서버를 설정해야 한다. Express.js를 사용하여 간단한 서버를 먼저 만든다.

# Express 설치
npm init
npm install express

---

// server.js
const express = require('express');
const path = require('path');
const app = express();
const PORT = process.env.PORT || 3001;

// 정적 파일 제공 (React 빌드 파일)
app.use(express.static(path.join(__dirname, 'client/build')));

// 모든 경로에 대해 React 앱 제공
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

---

React 앱 생성:

React 앱을 만들기 위해 Create React App을 사용한다.

npx create-react-app client

React 앱에서 서버 호출:

React 앱에서 서버에 데이터를 요청하려면, 예를 들어 Axios 또는 Fetch API를 사용할 수 있다.

cd client
npm install axios

React 컴포넌트에서 서버 호출 예제:

// 예제 컴포넌트 (예: App.js)
import React, { useEffect, useState } from 'react';
import axios from 'axios';

const App = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    // 서버에서 데이터 가져오기
    axios.get('/api/data')
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }, []);

  return (
    <div>
      <h1>Data from Server:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default App;

위의 코드에서 /api/data는 서버의 엔드포인트에 따라 수정해야 한다.

---

서버 및 클라이언트 실행:

터미널에서 다음 명령어로 서버와 클라이언트를 동시에 실행할 수 있다.

npm run start

이제 http://localhost:3000 에서 React 앱을 확인할 수 있다.

서버(Node.js-express)는 http://localhost:3001 에서 실행된다.

서버와 클라이언트가 연동되면 서버에서 클라이언트로 데이터를 전송하거나 다른 통신 작업을 수행한다.

---

추가 구성

프로젝트의 추가 요구 사항이나 보안 및 성능 향상을 위해 설정하는 것으로, 일반적인 추가 구성 몇 가지를 서술한다.

1. CORS (Cross-Origin Resource Sharing) 설정:

서버와 클라이언트 간의 도메인이 다를 경우, 브라우저에서는 보안 정책으로 인해 AJAX 요청이 차단된다.

이를 해결하기 위해 CORS를 활성화할 수 있다. cors 미들웨어를 사용하여 Express 앱에 CORS를 추가할 수 있다.

npm install cors

const cors = require('cors');

// ...

// CORS 활성화
app.use(cors());

---

2. 환경 변수 관리:

민감한 정보(예: API 키, 데이터베이스 연결 문자열)를 코드에 직접 하드코딩하지 않고, 환경 변수를 사용하여 관리하는 것이 좋다.

dotenv 패키지를 사용하여 환경 변수를 로드할 수 있다.

npm install dotenv

// server.js 상단에 추가
require('dotenv').config();

// 사용 예시
const apikey = process.env.API_KEY;

---

3. 보안 강화:

Helmet과 같은 보안 미들웨어를 사용하여 Express 앱의 보안을 강화할 수 있다.

npm install helmet

const helmet = require('helmet');

// ...

// 보안 미들웨어 추가
app.use(helmet());

---

4. HTTPS 사용:

서버가 HTTPS를 지원하면 데이터의 안전성이 향상된다. HTTPS를 설정하려면 SSL/TLS 인증서를 획득하고 서버에 적용해야 한다.

---

5. 클라이언트 빌드 최적화:

실제 프로덕션 환경에서는 React 앱을 최적화하여 성능을 향상시키는 것이 중요하다.

react-scripts build를 사용하여 앱을 빌드하고, 필요에 따라 코드 분할, 미니파이, 번들 최적화 등을 수행할 수 있다.

cd client
npm run build

---

6. 프록시 설정:

개발 환경에서는 서버와 클라이언트를 같은 포트에서 실행할 수 있지만, 프로덕션 환경에서는 서버와 클라이언트가 다른 포트 또는 도메인에서 실행될 수 있다.

이때 클라이언트에서 서버로의 요청을 프록시로 전달할 수 있다.

React 프로젝트의 package.json 파일에 다음과 같이 "proxy" 필드를 추가합니다.

"proxy": "http://localhost:3001"

이렇게 하면 개발 서버에서 프록시가 작동하며, 클라이언트에서 서버로의 요청은 프록시를 통해 전달된다.

---

server.js에 적용한 모습

const express = require("express");
const path = require("path");
const app = express();
const cors = require("cors");
const helmet = require("helmet");
require("dotenv").config();

const PORT = process.env.PORT || 3001;

// CORS 활성화 (보안 미들웨어보다 먼저 선언)
app.use(cors());

// 보안 미들웨어 추가
app.use(helmet());

// 정적 파일 제공 (React 빌드 파일)
app.use(express.static(path.join(__dirname, "client/build")));

// 모든 경로에 대해 React 앱 제공
app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname, "client/build", "index.html"));
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});