Vibe coding

08강. 풀스택 프로젝트 도전

🎯 학습 목표

  • React 프런트엔드와 Node.js API로 구성된 풀스택 구조를 이해한다.
  • Windows에서 프런트·백엔드 개발 환경을 함께 셋업한다.
  • 프런트와 백엔드를 연결해 데이터를 주고받는 흐름을 구현한다.
  • 여러 폴더에 걸친 프로젝트를 Claude와 함께 관리한다.

📖 개념 설명

이번 강에서는 한 단계 도약해 풀스택 애플리케이션을 만듭니다. 풀스택이란 사용자가 보는 화면(프런트엔드, 여기서는 React)과 데이터를 처리하는 서버(백엔드, 여기서는 Node.js/Express API)를 모두 포함하는 구조입니다.

풀스택 프로젝트는 폴더가 둘 이상으로 나뉘고, 두 프로세스를 동시에 실행해야 하므로 초보자에게 진입 장벽이 있습니다. 하지만 Claude는 폴더 구조 제안부터 양쪽 코드 생성, 그리고 둘을 연결하는 fetch 호출까지 한 번에 도와줄 수 있어, 이 장벽을 크게 낮춰줍니다.

핵심 개념은 ‘API를 통한 통신’입니다. 프런트엔드는 백엔드의 특정 주소(예: http://localhost:3001/api/todos)에 요청을 보내고, 백엔드는 데이터를 JSON으로 응답합니다. 개발 중에는 두 서버가 다른 포트에서 도므로 CORS(교차 출처) 설정이 필요할 수 있습니다.

여기서 잠깐, 왜 프런트엔드와 백엔드를 나누는지 생각해 봅시다. 화면을 그리는 일과 데이터를 안전하게 보관·처리하는 일은 성격이 다릅니다. 프런트엔드는 사용자 경험과 반응성에 집중하고, 백엔드는 데이터의 신뢰성·보안·여러 사용자 처리에 집중합니다. 둘을 분리하면 각자 독립적으로 개발·배포·확장할 수 있고, 같은 백엔드 위에 웹·모바일 등 여러 프런트엔드를 올릴 수도 있습니다. 이 구조를 이해하면 앞으로 더 큰 시스템을 설계할 때 큰 도움이 됩니다.

풀스택을 처음 다룰 때 가장 헷갈리는 부분이 ‘어느 코드가 어디서 도는가’입니다. React 코드는 사용자의 브라우저에서 실행되고, Express 코드는 서버에서 실행됩니다. 둘은 같은 컴퓨터의 다른 포트일 뿐, 서로 다른 실행 환경입니다. 이 경계를 명확히 인식하면 “왜 브라우저 콘솔에서 서버 변수에 접근이 안 되지?” 같은 혼란을 피할 수 있습니다.

💻 실습

먼저 백엔드 API를 셋업합니다.

# 백엔드 폴더 생성
mkdir C:devfullstack-todo
cd C:devfullstack-todo
mkdir server
cd server
npm init -y
npm install express cors

Claude에게 간단한 API를 요청합니다.

// server/index.js — Claude가 생성하는 Express API 예시
const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());
app.use(express.json());

let todos = [{ id: 1, text: '첫 할 일', done: false }];

app.get('/api/todos', (req, res) => res.json(todos));

app.post('/api/todos', (req, res) => {
  const todo = { id: Date.now(), text: req.body.text, done: false };
  todos.push(todo);
  res.status(201).json(todo);
});

app.listen(3001, () => console.log('API on http://localhost:3001'));

다음으로 프런트엔드(React)를 셋업합니다.

# 프로젝트 루트로 돌아가 React 앱 생성
cd C:devfullstack-todo
npm create vite@latest client -- --template react
cd client
npm install
npm run dev

두 서버를 각각 다른 PowerShell 창에서 실행한 뒤, Claude에게 연결을 요청합니다.

> client의 App.jsx에서 http://localhost:3001/api/todos 를 fetch로 불러와
> 목록으로 보여주고, 입력창으로 POST 추가가 되게 연결해줘.

⚠️ Windows 환경 주의사항

  • 프런트와 백엔드를 동시에 실행하려면 PowerShell 창 두 개가 필요합니다. Windows Terminal의 분할 창(Alt+Shift+D)을 활용하세요.
  • 포트가 이미 사용 중이라는 오류가 나면 netstat -ano | findstr :3001로 점유 프로세스를 찾아 종료하세요.
  • Windows 방화벽이 localhost 통신을 막는 경우는 드물지만, 첫 실행 시 허용 팝업이 뜨면 ‘허용’을 누르세요.
  • 경로에 한글이나 공백이 있으면 일부 빌드 도구가 실패할 수 있으니 영문 경로를 사용하세요.

💡 팁

  • “먼저 폴더 구조와 실행 순서를 설명해줘”로 전체 그림을 잡고 시작하세요.
  • 한쪽이 안 되면 “백엔드만 단독으로 테스트할 방법을 알려줘”처럼 범위를 좁혀 디버깅하세요.
  • CORS 에러가 나면 에러 메시지를 그대로 전달하면 Claude가 백엔드 설정을 고쳐줍니다.
  • 두 서버를 한 명령으로 띄우고 싶다면 concurrently 패키지 설정을 요청하세요.