프로젝트 소개 및 목표

React + Node.js 풀스택 앱 배포하기는 프론트엔드부터 백엔드, 그리고 실제 배포까지 전체 개발 프로세스를 경험할 수 있는 실전 프로젝트입니다. 이 가이드를 통해 React로 사용자 인터페이스를 구축하고, Node.js와 Express로 RESTful API 서버를 만들며, MongoDB를 활용한 데이터베이스 연동, 그리고 실제 프로덕션 환경에 배포하는 전 과정을 단계별로 익힐 수 있습니다. 포트폴리오로 활용할 수 있는 완성도 높은 웹 애플리케이션을 직접 만들어보며, 취업과 실무에 필요한 핵심 기술들을 마스터할 수 있습니다.

필요한 기술 스택

이 프로젝트를 완성하기 위해 필요한 기술 스택은 다음과 같습니다. 프론트엔드는 React 18, React Router, Axios를 사용하고, 백엔드는 Node.js, Express.js, MongoDB와 Mongoose를 활용합니다. 배포를 위해서는 Vercel(프론트엔드), Render 또는 Railway(백엔드), MongoDB Atlas(데이터베이스)를 사용하며, 개발 환경에서는 npm, Git, VS Code가 필요합니다. 모든 도구는 무료로 시작할 수 있어 누구나 쉽게 따라할 수 있습니다.

프로젝트 셋업

먼저 프로젝트 디렉토리를 생성하고 프론트엔드와 백엔드를 분리하여 구성합니다. 터미널에서 작업 디렉토리를 만들고 Git 저장소를 초기화합니다. 백엔드 폴더에서는 npm을 통해 Express, Mongoose, CORS, dotenv 등의 패키지를 설치하고, 프론트엔드는 Create React App 또는 Vite를 사용하여 React 프로젝트를 생성합니다. 환경변수 파일(.env)을 설정하여 데이터베이스 연결 정보와 API 엔드포인트를 관리하며, .gitignore 파일을 통해 node_modules와 환경변수 파일이 Git에 포함되지 않도록 설정합니다. 초기 구조를 잘 잡아두면 이후 개발과 배포가 훨씬 수월해집니다.

단계별 구현 과정

1단계: 백엔드 API 서버 구축

Node.js와 Express를 사용하여 RESTful API 서버를 구축합니다. 먼저 기본적인 서버 파일을 생성합니다:

// server.js
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
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));

// 라우트 설정
const taskRoutes = require('./routes/tasks');
app.use('/api/tasks', taskRoutes);

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

다음으로 MongoDB 스키마와 모델을 정의합니다:

// models/Task.js
const mongoose = require('mongoose');

const taskSchema = new mongoose.Schema({
  title: {
    type: String,
    required: true,
    trim: true
  },
  description: {
    type: String,
    trim: true
  },
  completed: {
    type: Boolean,
    default: false
  },
  createdAt: {
    type: Date,
    default: Date.now
  }
});

module.exports = mongoose.model('Task', taskSchema);

API 라우트를 구현하여 CRUD 기능을 제공합니다:

// routes/tasks.js
const express = require('express');
const router = express.Router();
const Task = require('../models/Task');

// 모든 작업 조회
router.get('/', async (req, res) => {
  try {
    const tasks = await Task.find().sort({ createdAt: -1 });
    res.json(tasks);
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
});

// 작업 생성
router.post('/', async (req, res) => {
  const task = new Task({
    title: req.body.title,
    description: req.body.description
  });

  try {
    const newTask = await task.save();
    res.status(201).json(newTask);
  } catch (error) {
    res.status(400).json({ message: error.message });
  }
});

// 작업 업데이트
router.put('/:id', async (req, res) => {
  try {
    const task = await Task.findByIdAndUpdate(
      req.params.id,
      req.body,
      { new: true }
    );
    res.json(task);
  } catch (error) {
    res.status(400).json({ message: error.message });
  }
});

// 작업 삭제
router.delete('/:id', async (req, res) => {
  try {
    await Task.findByIdAndDelete(req.params.id);
    res.json({ message: '작업이 삭제되었습니다' });
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
});

module.exports = router;

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

React를 사용하여 사용자 인터페이스를 구축합니다. 먼저 API 통신을 위한 서비스 파일을 작성합니다:

// src/services/api.js
import axios from 'axios';

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

const api = axios.create({
  baseURL: API_URL,
  headers: {
    'Content-Type': 'application/json'
  }
});

export const getTasks = () => api.get('/tasks');
export const createTask = (task) => api.post('/tasks', task);
export const updateTask = (id, task) => api.put(`/tasks/${id}`, task);
export const deleteTask = (id) => api.delete(`/tasks/${id}`);

export default api;

메인 컴포넌트에서 상태 관리와 API 호출을 구현합니다:

// src/App.js
import React, { useState, useEffect } from 'react';
import { getTasks, createTask, updateTask, deleteTask } from './services/api';
import './App.css';

function App() {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState({ title: '', description: '' });
  const [loading, setLoading] = useState(false);

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

  const fetchTasks = async () => {
    try {
      setLoading(true);
      const response = await getTasks();
      setTasks(response.data);
    } catch (error) {
      console.error('작업 조회 실패:', error);
    } finally {
      setLoading(false);
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!newTask.title.trim()) return;

    try {
      await createTask(newTask);
      setNewTask({ title: '', description: '' });
      fetchTasks();
    } catch (error) {
      console.error('작업 생성 실패:', error);
    }
  };

  const handleToggle = async (task) => {
    try {
      await updateTask(task._id, { ...task, completed: !task.completed });
      fetchTasks();
    } catch (error) {
      console.error('작업 업데이트 실패:', error);
    }
  };

  const handleDelete = async (id) => {
    try {
      await deleteTask(id);
      fetchTasks();
    } catch (error) {
      console.error('작업 삭제 실패:', error);
    }
  };

  return (
    

      
할일 관리 앱
      

         setNewTask({ ...newTask, title: e.target.value })}
        />
         setNewTask({ ...newTask, description: e.target.value })}
        />
        추가
      
      {loading ? (
        
로딩중...
      ) : (
        

          {tasks.map(task => (
            

              

                
{task.title}
                
{task.description}
              
              

                 handleToggle(task)}>
                  {task.completed ? '미완료' : '완료'}
                
                 handleDelete(task._id)}>삭제
              
            
          ))}
        
      )}
    
  );
}

export default App;

테스트 및 배포

React + Node.js 풀스택 앱 배포하기의 마지막 단계는 실제 배포입니다. 먼저 MongoDB Atlas에서 무료 클러스터를 생성하고 연결 문자열을 확보합니다. 백엔드는 Render 또는 Railway에 배포하며, GitHub 저장소와 연결하여 자동 배포를 설정합니다. 환경변수에 MONGODB_URI를 설정하고 CORS 설정에 프론트엔드 도메인을 추가합니다. 프론트엔드는 Vercel이나 Netlify에 배포하며, 환경변수에 백엔드 API URL을 설정합니다. 배포 전에는 로컬에서 프로덕션 빌드를 테스트하고, API 엔드포인트가 정상 작동하는지 확인합니다. 배포 후에는 실제 도메인에서 모든 CRUD 기능이 정상 작동하는지 테스트합니다.

마무리 및 확장 아이디어

이제 React + Node.js 풀스택 앱 배포하기 프로젝트가 완성되었습니다! 이를 기반으로 사용자 인증 기능 추가(JWT, Passport.js), 파일 업로드 기능 구현, 실시간 업데이트를 위한 WebSocket 연동, Redux 또는 Context API를 활용한 전역 상태 관리, TypeScript 도입으로 타입 안정성 강화, Docker를 활용한 컨테이너화, CI/CD 파이프라인 구축 등으로 확장할 수 있습니다. 이 프로젝트는 포트폴리오에 추가하기 좋은 실전 경험이며, 실무에서 사용하는 풀스택 개발의 핵심 원리를 모두 담고 있습니다.