프론트엔드와 백엔드 — 3계층 아키텍처

웹 앱은 레스토랑과 같은 3계층 구조입니다. 1. 프론트엔드(Frontend) = 홀(손님이 보는 공간) — 브라우저에서 사용자가 직접 보고 만지는 부분. HTML/CSS/JavaScript, 그리고 React, Next.js 같은 프레임워크로 만듭니다. 2. 백엔드(Backend) = 주방(손님 눈에 안 보이는 공간) — 서버에서 데이터를 처리하는 부분. Node.js(Express), Python(FastAPI/Django) 등으로 만듭니다. 3. 데이터베이스(Database) = 식재료 창고 — 모든 데이터가 저장되는 곳. PostgreSQL, MongoDB 등.

React — 페이스북이 만든 프론트엔드 라이브러리. 화면을 컴포넌트(재사용 가능한 UI 조각)로 쪼개서 조립합니다. 버튼, 카드, 헤더 각각이 하나의 컴포넌트입니다. Next.js — React 위에 얹은 풀스택 프레임워크. 프론트엔드와 백엔드를 하나의 프로젝트에서 모두 처리합니다. 서버 사이드 렌더링(SSR), API 라우트, 파일 기반 라우팅 등을 제공합니다. Claude Code로 프로젝트를 시작하면 높은 확률로 Next.js를 추천받습니다. Express — Node.js 위의 백엔드 프레임워크. API 서버를 빠르게 만들 수 있습니다.

// Next.js에서 프론트엔드 + 백엔드가 한 프로젝트에 공존하는 구조

// 1. 프론트엔드: app/page.tsx (사용자가 보는 화면)
export default function HomePage() {
  return <h1>안녕하세요, JIT입니다!</h1>;
}

// 2. 백엔드: app/api/users/route.ts (API 엔드포인트)
export async function GET() {
  const users = await db.query("SELECT * FROM users");
  return Response.json(users);
}

// 3. DB: Supabase/PostgreSQL에 users 테이블 저장

풀스택(Full-Stack)이란 프론트엔드 + 백엔드 + DB를 모두 다루는 것입니다. Claude Code와 함께라면 바이브코더도 풀스택 개발이 가능합니다. 다만, 어떤 파일이 프론트이고 어떤 파일이 백엔드인지 구분할 줄은 알아야 합니다. Next.js 기준으로: - `app/page.tsx`, `components/` → 프론트엔드 - `app/api/` → 백엔드 API - `.env` → DB 연결 정보, API 키 등 비밀 설정