프로젝트 소개 및 목표

React + Node.js 풀스택 앱 배포하기는 프론트엔드부터 백엔드, 그리고 실제 프로덕션 환경까지 전체 개발 사이클을 경험할 수 있는 실전 프로젝트입니다. 이 가이드를 통해 React로 만든 클라이언트 애플리케이션과 Node.js/Express 백엔드 API를 통합하고, Docker 컨테이너화를 거쳐 AWS EC2 또는 Vercel, Heroku 같은 클라우드 플랫폼에 배포하는 전 과정을 배우게 됩니다. 단순히 로컬 환경에서 개발하는 것을 넘어, 실제 사용자가 접근할 수 있는 웹 애플리케이션을 완성함으로써 포트폴리오에 즉시 활용할 수 있는 실무 경험을 쌓을 수 있습니다.

필요한 기술 스택

이 프로젝트를 성공적으로 완성하기 위해서는 다음과 같은 기술 스택이 필요합니다:

• 프론트엔드: React 18+, React Router, Axios, TailwindCSS 또는 Material-UI
• 백엔드: Node.js 18+, Express.js, MongoDB 또는 PostgreSQL
• 배포 도구: Docker, Nginx, PM2
• 클라우드 플랫폼: AWS EC2, Vercel, Heroku, 또는 DigitalOcean
• 버전 관리: Git, GitHub
• 추가 도구: Postman (API 테스트), dotenv (환경변수 관리)

프로젝트 셋업

프로젝트를 시작하기 전에 개발 환경을 구축해야 합니다. 먼저 Node.js와 npm이 설치되어 있는지 확인하세요. 루트 디렉토리에 fullstack-app 폴더를 생성하고, 내부에 client(React)와 server(Node.js) 폴더를 분리하여 구성합니다. 이러한 모노레포 구조는 프론트엔드와 백엔드를 독립적으로 개발하면서도 하나의 프로젝트로 관리할 수 있게 해줍니다.

mkdir fullstack-app
cd fullstack-app
mkdir client server

# React 앱 생성
cd client
npx create-react-app .

# Express 서버 초기화
cd ../server
npm init -y
npm install express mongoose dotenv cors
npm install --save-dev nodemon

프로젝트 루트에 .gitignore 파일을 생성하여 node_modules, .env, build 폴더를 제외하고, GitHub 리포지토리를 초기화합니다.

단계별 구현 과정

1단계: Express 백엔드 API 구축

먼저 server/index.js 파일을 생성하여 기본 Express 서버를 설정합니다. RESTful API 원칙에 따라 사용자 인증, 데이터 CRUD 기능을 구현합니다.

// server/index.js
const express = require('express');
const cors = require('cors');
const mongoose = require('mongoose');
require('dotenv').config();

const app = express();
const PORT = process.env.PORT || 5000;

// 미들웨어
app.use(cors());
app.use(express.json());

// MongoDB 연결
mongoose.connect(process.env.MONGODB_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
})
.then(() => console.log('MongoDB 연결 성공'))
.catch(err => console.error('MongoDB 연결 실패:', err));

// 기본 라우트
app.get('/api/health', (req, res) => {
  res.json({ status: 'OK', message: '서버가 정상 작동 중입니다' });
});

// 사용자 라우트 예시
const userRoutes = require('./routes/users');
app.use('/api/users', userRoutes);

app.listen(PORT, () => {
  console.log(`서버가 포트 ${PORT}에서 실행 중입니다`);
});

server/routes/users.js에 사용자 관련 API 엔드포인트를 구현합니다:

// server/routes/users.js
const express = require('express');
const router = express.Router();
const User = require('../models/User');

// 모든 사용자 조회
router.get('/', async (req, res) => {
  try {
    const users = await User.find();
    res.json(users);
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
});

// 사용자 생성
router.post('/', async (req, res) => {
  const user = new User({
    name: req.body.name,
    email: req.body.email,
  });
  
  try {
    const newUser = await user.save();
    res.status(201).json(newUser);
  } catch (error) {
    res.status(400).json({ message: error.message });
  }
});

module.exports = router;

2단계: React 프론트엔드 개발

클라이언트 측에서 백엔드 API와 통신하는 컴포넌트를 작성합니다. client/src/App.js를 수정하여 사용자 목록을 표시하고 새 사용자를 추가하는 기능을 구현합니다.

// client/src/App.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import './App.css';

const API_URL = process.env.REACT_APP_API_URL || 'http://localhost:5000/api';

function App() {
  const [users, setUsers] = useState([]);
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [loading, setLoading] = useState(false);

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

  const fetchUsers = async () => {
    setLoading(true);
    try {
      const response = await axios.get(`${API_URL}/users`);
      setUsers(response.data);
    } catch (error) {
      console.error('사용자 목록 조회 실패:', error);
    }
    setLoading(false);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await axios.post(`${API_URL}/users`, { name, email });
      setName('');
      setEmail('');
      fetchUsers();
    } catch (error) {
      console.error('사용자 추가 실패:', error);
    }
  };

  return (
    

      
풀스택 사용자 관리 시스템
      
      

         setName(e.target.value)}
          required
        />
         setEmail(e.target.value)}
          required
        />
        사용자 추가
      

      {loading ? (
        
로딩 중...
      ) : (
        

          {users.map(user => (
            

              {user.name} - {user.email}
            
          ))}
        
      )}
    
  );
}

export default App;

3단계: 환경변수 설정

보안과 유연한 배포를 위해 환경변수를 활용합니다. server/.env 파일을 생성합니다:

MONGODB_URI=mongodb+srv://username:[email protected]/dbname
PORT=5000
NODE_ENV=production

client/.env 파일도 생성합니다:

REACT_APP_API_URL=http://localhost:5000/api

4단계: Docker 컨테이너화

프로젝트 루트에 Dockerfile을 생성하여 멀티스테이지 빌드를 구현합니다:

# 클라이언트 빌드 스테이지
FROM node:18-alpine AS client-build
WORKDIR /app/client
COPY client/package*.json ./
RUN npm ci
COPY client/ ./
RUN npm run build

# 서버 스테이지
FROM node:18-alpine
WORKDIR /app
COPY server/package*.json ./
RUN npm ci --only=production
COPY server/ ./
COPY --from=client-build /app/client/build ./public

EXPOSE 5000
CMD ["node", "index.js"]

docker-compose.yml로 개발 환경을 간편하게 관리할 수 있습니다:

version: '3.8'
services:
  app:
    build: .
    ports:
      - "5000:5000"
    environment:
      - MONGODB_URI=${MONGODB_URI}
      - NODE_ENV=production
    depends_on:
      - mongo
  
  mongo:
    image: mongo:6
    ports:
      - "27017:27017"
    volumes:
      - mongo-data:/data/db

volumes:
  mongo-data:

테스트 및 배포

로컬 테스트

배포 전에 로컬에서 Docker 이미지를 빌드하고 테스트합니다:

docker-compose up --build

브라우저에서 http://localhost:5000에 접속하여 애플리케이션이 정상 작동하는지 확인합니다.

AWS EC2 배포

AWS EC2 인스턴스를 생성하고 SSH로 접속한 후, Docker와 Docker Compose를 설치합니다. GitHub에서 코드를 클론하고 환경변수를 설정한 뒤 배포합니다:

# EC2 인스턴스에서 실행
git clone https://github.com/your-username/fullstack-app.git
cd fullstack-app

# 환경변수 파일 생성
echo "MONGODB_URI=your_mongodb_uri" > server/.env

# Docker 컨테이너 실행
docker-compose up -d

# Nginx 리버스 프록시 설정 (선택사항)
sudo apt install nginx
sudo nano /etc/nginx/sites-available/default

Vercel 배포 (프론트엔드)

React 앱을 Vercel에 배포하는 것도 간단합니다. Vercel CLI를 사용하거나 GitHub 연동으로 자동 배포를 설정할 수 있습니다:

cd client
npx vercel --prod

Heroku 배포 (백엔드)

백엔드 API는 Heroku에 배포할 수 있습니다:

cd server
heroku create your-app-name
git push heroku main
heroku config:set MONGODB_URI=your_mongodb_uri

React + Node.js 풀스택 앱 배포하기 과정에서 CORS 설정, HTTPS 인증서 (Let’s Encrypt), 모니터링 도구 설정도 중요합니다.

마무리 및 확장 아이디어

이제 React + Node.js 풀스택 앱 배포하기 프로젝트를 성공적으로 완성했습니다! 이 프로젝트를 기반으로 다음과 같은 기능을 추가해볼 수 있습니다:

• JWT 기반 사용자 인증 및 권한 관리
• WebSocket을 활용한 실시간 채팅 기능
• Redis 캐싱으로 API 성능 최적화
• CI/CD 파이프라인 구축 (GitHub Actions, Jenkins)
• Elasticsearch를 활용한 고급 검색 기능
• GraphQL API로 전환하여 데이터 fetching 최적화

이 프로젝트는 포트폴리오에 추가하기에 완벽하며, 실무에서 요구되는 풀스택 개발 역량을 증명할 수 있습니다. 지속적으로 기능을 추가하고 리팩토링하면서 실력을 향상시켜보세요!