풀스택,프론트 프로젝트로 완성하는 방법 이해하기

풀스택

 

프로젝트 예시 3가지로 배우는 풀스택 구조

풀스택 개발은 프론트엔드와 백엔드를 모두 이해하고 다루는 개발 방식입니다. 하지만 단순히 두 영역을 연결하는 것만으로는 충분하지 않습니다. **실제 프로젝트를 통해 어떤 식으로 구조를 설계하고 구현하는지가 핵심**입니다. 이번 글에서는 초보자도 이해하기 쉬운 **세 가지 풀스택 프로젝트 예시를 통해 구조와 흐름을 완벽하게 정리**해봅니다.

“풀스택은 넓게가 아니라, 얇게라도 ‘끝까지’ 완주하는 것이 먼저입니다.” – 현직 스타트업 CTO 인터뷰

예시 1. 간단한 메모앱 (React + Express + MongoDB)

가장 기본적인 풀스택 프로젝트는 **메모 작성 기능**입니다. 프론트는 React, 백엔드는 Express, 데이터베이스는 MongoDB를 사용합니다.

프론트 코드 예시 (React)

// App.js
import { useState } from 'react';
function App() {
  const [note, setNote] = useState('');
  const handleSave = async () => {
    await fetch('/api/notes', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ text: note })
    });
  };
  return (
    <div>
      <input value={note} onChange={(e) => setNote(e.target.value)} />
      <button onClick={handleSave}>저장</button>
    </div>
  );
}
  

백엔드 코드 예시 (Express)

// server.js
const express = require('express');
const mongoose = require('mongoose');
const app = express();
app.use(express.json());

mongoose.connect('mongodb://localhost:27017/memo');

const Note = mongoose.model('Note', { text: String });

app.post('/api/notes', async (req, res) => {
  const note = new Note({ text: req.body.text });
  await note.save();
  res.sendStatus(200);
});

app.listen(3001, () => console.log('Server running'));
  

예시 2. 회원가입 & 로그인 시스템 (Vue + Node.js + MySQL)

사용자 인증 기능은 대부분의 서비스에서 기본입니다. 이번 예시는 Vue를 프론트, Node.js와 MySQL을 백엔드 구조로 구성합니다.

“회원가입 로직 하나에도 프론트, 백엔드, DB가 유기적으로 맞물려야 합니다.” – 프리랜서 백엔드 개발자

백엔드 코드 예시 (Node + MySQL)

// signup.js
const express = require('express');
const mysql = require('mysql2');
const bcrypt = require('bcrypt');
const app = express();

app.use(express.json());
const conn = mysql.createConnection({ user:'root', database:'userdb' });

app.post('/signup', async (req, res) => {
  const { id, password } = req.body;
  const hash = await bcrypt.hash(password, 10);
  conn.query('INSERT INTO users (id, password) VALUES (?, ?)', [id, hash]);
  res.send('가입 완료');
});
  

예시 3. 실시간 채팅 앱 (Next.js + Socket.IO + Redis)

마지막 예시는 실시간 통신이 중요한 채팅 애플리케이션입니다. 클라이언트는 Next.js, 서버는 Socket.IO, Redis를 통해 메시지를 브로드캐스팅합니다.

서버 코드 예시 (Socket.IO + Redis)

const { createServer } = require('http');
const { Server } = require('socket.io');
const redis = require('redis');
const pub = redis.createClient();
const sub = redis.createClient();

const httpServer = createServer();
const io = new Server(httpServer, { cors: { origin: '*' } });

io.on('connection', socket => {
  socket.on('chat', msg => {
    pub.publish('chat', msg);
  });
});

sub.subscribe('chat');
sub.on('message', (_, msg) => {
  io.emit('chat', msg);
});

httpServer.listen(3002);
  

주요 풀스택 구조 비교 도표

프로젝트 유형	프론트	백엔드	DB/기술
메모앱	React	Express	MongoDB
회원가입 시스템	Vue	Node.js	MySQL
채팅 앱	Next.js	Socket.IO	Redis