프로젝트 소개 및 목표

React + Node.js 풀스택 앱 배포하기는 현대 웹 개발의 핵심 역량을 습득할 수 있는 실전 프로젝트입니다. 프론트엔드는 React로, 백엔드는 Node.js와 Express로 구축하여 완전한 풀스택 애플리케이션을 만들고, 이를 실제 서버에 배포하는 전 과정을 경험하게 됩니다. 이 프로젝트를 통해 클라이언트-서버 아키텍처의 이해, RESTful API 설계, 데이터베이스 연동, 그리고 실제 배포 환경 구성까지 실무에서 필요한 모든 기술을 배울 수 있습니다. 포트폴리오로도 활용 가능한 완성도 높은 애플리케이션을 만들어보세요.

필요한 기술 스택

이 프로젝트를 진행하기 위해서는 다음과 같은 기술 스택이 필요합니다. 프론트엔드는 React 18+, React Router, Axios를 사용하며, 백엔드는 Node.js, Express, MongoDB 또는 PostgreSQL을 활용합니다. 개발 도구로는 npm 또는 yarn, Git이 필요하며, 배포를 위해 Heroku, Vercel, 또는 AWS EC2를 사용할 수 있습니다. 기본적인 JavaScript, ES6+ 문법, 그리고 비동기 프로그래밍에 대한 이해가 있다면 더욱 수월하게 진행할 수 있습니다.

프로젝트 셋업

먼저 작업 디렉토리를 생성하고 프로젝트를 초기화합니다. 루트 폴더에서 클라이언트와 서버 폴더를 분리하여 관리하는 것이 좋습니다. 다음 명령어로 프로젝트 구조를 만듭니다:

mkdir fullstack-app
cd fullstack-app
mkdir client server

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

# 클라이언트 초기화
cd ../client
npx create-react-app .
npm install axios react-router-dom

package.json 파일을 수정하여 개발 환경을 설정하고, 환경 변수를 위한 .env 파일을 생성합니다. Git 저장소를 초기화하고 .gitignore 파일에 node_modules, .env를 추가하여 민감한 정보가 업로드되지 않도록 합니다.

단계별 구현 과정

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

Express 서버의 기본 구조를 만들어봅시다. server/index.js 파일을 생성하고 다음 코드를 작성합니다:

const express = require('express');
const cors = require('cors');
const dotenv = require('dotenv');

dotenv.config();

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

// 미들웨어
app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// 기본 라우트
app.get('/api', (req, res) => {
  res.json({ message: '풀스택 앱 API 서버가 실행 중입니다!' });
});

// 사용자 API 라우트
app.get('/api/users', (req, res) => {
  const users = [
    { id: 1, name: '김철수', email: '[email protected]' },
    { id: 2, name: '이영희', email: '[email protected]' }
  ];
  res.json(users);
});

app.post('/api/users', (req, res) => {
  const { name, email } = req.body;
  const newUser = {
    id: Date.now(),
    name,
    email,
    createdAt: new Date()
  };
  res.status(201).json(newUser);
});

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

2단계: 데이터베이스 연결

MongoDB를 사용한다면 mongoose를 통해 데이터베이스에 연결합니다. server/models/User.js 파일을 생성합니다:

const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
  name: {
    type: String,
    required: true,
    trim: true
  },
  email: {
    type: String,
    required: true,
    unique: true,
    lowercase: true
  },
  createdAt: {
    type: Date,
    default: Date.now
  }
});

module.exports = mongoose.model('User', userSchema);

그리고 index.js에 데이터베이스 연결 코드를 추가합니다:

const mongoose = require('mongoose');

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

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

client/src/App.js를 수정하여 백엔드 API와 통신하는 React 애플리케이션을 만듭니다:

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 [formData, setFormData] = useState({ name: '', email: '' });
  const [loading, setLoading] = useState(false);

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

  const fetchUsers = async () => {
    try {
      setLoading(true);
      const response = await axios.get(`${API_URL}/users`);
      setUsers(response.data);
    } catch (error) {
      console.error('사용자 조회 실패:', error);
      alert('사용자 목록을 불러오는데 실패했습니다.');
    } finally {
      setLoading(false);
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post(`${API_URL}/users`, formData);
      setUsers([...users, response.data]);
      setFormData({ name: '', email: '' });
      alert('사용자가 추가되었습니다!');
    } catch (error) {
      console.error('사용자 추가 실패:', error);
      alert('사용자 추가에 실패했습니다.');
    }
  };

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  return (
    

      

        
React + Node.js 풀스택 앱
      
      
      

        

          
새 사용자 추가
          

            
            
            추가하기
          
        

        

          
사용자 목록
          {loading ? (
            
로딩 중...
          ) : (
            

              {users.map(user => (
                

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

export default App;

4단계: 환경 변수 설정

보안을 위해 환경 변수를 사용합니다. server/.env 파일을 생성합니다:

PORT=5000
MONGODB_URI=mongodb://localhost:27017/fullstack-app
NODE_ENV=development

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

REACT_APP_API_URL=http://localhost:5000/api

테스트 및 배포

React + Node.js 풀스택 앱 배포하기 과정의 마지막 단계입니다. 먼저 로컬에서 테스트합니다. 터미널을 2개 열어 각각 서버와 클라이언트를 실행합니다:

# 터미널 1: 서버 실행
cd server
npm run dev

# 터미널 2: 클라이언트 실행
cd client
npm start

배포는 여러 방법이 있습니다. Heroku 배포의 경우, 루트에 package.json을 만들고 heroku-postbuild 스크립트를 추가합니다. server/index.js에 정적 파일 서빙 코드를 추가합니다:

// 프로덕션 환경에서 React 빌드 파일 서빙
if (process.env.NODE_ENV === 'production') {
  app.use(express.static(path.join(__dirname, '../client/build')));
  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, '../client/build/index.html'));
  });
}

Heroku CLI로 배포합니다:

heroku create my-fullstack-app
git add .
git commit -m "Initial deployment"
git push heroku main
heroku open

Vercel + Railway 배포도 추천합니다. 프론트엔드는 Vercel에, 백엔드는 Railway에 배포하여 분리된 환경을 구축할 수 있습니다.

마무리 및 확장 아이디어

React + Node.js 풀스택 앱 배포하기 프로젝트를 완성했습니다! 이제 다음 기능을 추가해보세요: JWT 인증 시스템, 파일 업로드 기능, 실시간 채팅(Socket.io), 페이지네이션, 검색 기능, Redux 상태 관리, TypeScript 마이그레이션, Docker 컨테이너화 등입니다. CI/CD 파이프라인을 구축하면 자동 배포도 가능합니다. 이 프로젝트는 포트폴리오에 추가하기 좋으며, 실무 개발 경험을 쌓는 데 큰 도움이 됩니다. 계속해서 기능을 확장하고 최적화하면서 실력을 키워나가세요!