[Dseok의 코딩스터디] React.js와 Express.js 연결하기 | 프론트엔드 & 백엔드 통합

📌 개요

React.js(프론트엔드)와 Express.js(백엔드)를 연결하는 방법을 단계별로 설명합니다.
기본적인 개념과 프로젝트 폴더 구조, 설정 방법, API 요청 처리 방식까지 모두 다룹니다.

react.js

📌 1. 프로젝트 폴더 구조

React와 Express를 함께 사용하려면 아래와 같은 폴더 구조로 설정하는 것이 일반적입니다.

/my-app
 ├── /client  (React 프로젝트)
 ├── /server  (Express 프로젝트)
 ├── package.json

• /client → React 프론트엔드 (React 앱이 들어감)
• /server → Express 백엔드 (API 서버 구현)
• package.json → 전체 프로젝트 관리

 

📌 2. 프로젝트 생성

✅ 1) 프로젝트 폴더 생성 및 이동 (Windows)

mkdir my-app
cd my-app

✅ 2) Express 서버 설치 (Windows)

mkdir server
cd server
npm init -y
npm install express cors dotenv

✅ 3) React 프로젝트 설치 (Windows)

cd ..
npx create-react-app client

 

📌 3. Express 서버 설정

✅ 1) Express 서버 코드 작성 (server/index.js)

const express = require("express");
const cors = require("cors");
const app = express();
const PORT = 5000;

app.use(cors()); // CORS 문제 해결
app.use(express.json()); // JSON 데이터 처리

// 간단한 API 엔드포인트
app.get("/api/message", (req, res) => {
  res.json({ message: "React와 Express가 연결되었습니다!" });
});

app.listen(PORT, () => {
  console.log(`✅ 서버 실행 중: http://localhost:${PORT}`);
});

✅ 2) 서버 실행 (Windows)

cd server
node index.js

• 서버가 http://localhost:5000/api/message에서 실행됩니다.

 

📌 4. React에서 Express API 호출

✅ 1) React에서 API 요청 (client/src/App.js)

import { useEffect, useState } from "react";

function App() {
  const [message, setMessage] = useState("");

  useEffect(() => {
    fetch("http://localhost:5000/api/message")
      .then((response) => response.json())
      .then((data) => setMessage(data.message));
  }, []);

  return (
    <div>
      <h1>React와 Express 연결</h1>
      <p>{message}</p>
    </div>
  );
}

export default App;

✅ 2) React 실행 (Windows)

cd client
npm start

 

📌 5. 프록시 설정 (CORS 문제 해결)

프록시를 설정하면 React에서 fetch("http://localhost:5000/api/message") 대신
fetch("/api/message")로 더 깔끔하게 요청할 수 있습니다.

✅ 1) client/package.json에 프록시 추가

"proxy": "http://localhost:5000"

이제 React에서 API 요청을 할 때 fetch("/api/message")로 사용 가능합니다.

 

📌 6. React와 Express 함께 실행하기 (동시 실행)

React와 Express를 동시에 실행하려면 concurrently 패키지를 사용하면 편리합니다.

cd my-app
npm install concurrently

✅ 1) package.json 수정 (my-app/package.json)

"scripts": {
  "start": "concurrently \"npm run server\" \"npm run client\"",
  "server": "node server/index.js",
  "client": "npm start --prefix client"
}

✅ 2) 프로젝트 실행 (Windows)

npm start

이제 npm start 한 번으로 React와 Express가 동시에 실행됩니다.

 

📌 마무리 🎯

1. Express 서버를 만들고 /api 엔드포인트 설정
2. React에서 Express API를 fetch()로 호출
3. CORS 문제를 해결하기 위해 cors 패키지 사용
4. 프록시 설정으로 API 호출 단순화
5. concurrently를 사용하여 React & Express 동시 실행

react.js