🧠 파이썬 웹 프레임워크 비교와 FastAPI + React 연동 프로젝트 구축 가이드

 

현대 웹 개발에서 빠른 속도와 유연한 아키텍처는 선택이 아닌 필수입니다. 파이썬은 다양한 웹 프레임워크를 제공하지만, 각각의 장단점을 이해하고 프로젝트에 맞는 프레임워크를 선택하는 것이 중요하죠. 이번 글에서는 대표적인 웹 프레임워크인 Django, Flask, FastAPI를 비교하고, FastAPI를 이용해 React 프론트엔드와 연동하는 방법까지 소개해드리겠습니다.

 

📊 파이썬 웹 프레임워크 비교

프레임워크	주요 특징	성능 (속도)	난이도	비동기 지원	문서 자동화	생태계/커뮤니티	사용 예시
Django	올인원 패키지 (ORM, Admin 등)	중간	쉬움	제한적	일부 지원	매우 활발	블로그, CMS
Flask	가벼운 구조, 확장성	빠름	중간	가능	미지원	활발	소형 API, 개인 서비스
FastAPI	타입 기반, 비동기 최적화	매우 빠름	쉬움	기본 지원	✅ 자동 Swagger, ReDoc	급성장 중	AI API, 고성능 서버

🔎 FastAPI는 Node.js나 Go에 근접하는 속도를 보여주며, 타입 안정성과 생산성을 동시에 갖춘 프레임워크입니다.

⚡ FastAPI 소개: 고성능 API 서버를 위한 최적의 선택

• ✅ 비동기 처리 최적화 (async/await 기반)
• ✅ Pydantic을 통한 데이터 유효성 검사
• ✅ 자동 API 문서화 (Swagger / ReDoc)
• ✅ 간결하고 읽기 쉬운 코드
• ✅ 타입 기반 코드 자동 완성 지원

🛠 FastAPI로 백엔드 API 서버 구축하기

1. 프로젝트 초기화 및 패키지 설치

mkdir fastapi-react-app && cd fastapi-react-app
python -m venv venv
source venv/bin/activate  # Windows는 venv\Scripts\activate
pip install fastapi uvicorn[standard] python-multipart

2. 기본 FastAPI 서버 구성

# backend/main.py
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"],
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.get("/api/hello")
async def hello():
    return {"message": "Hello from FastAPI!"}

3. 서버 실행

uvicorn backend.main:app --reload

Swagger 문서: /docs | ReDoc 문서: /redoc

🎨 React 프론트엔드 연동하기

1. React 프로젝트 생성

npx create-react-app frontend
cd frontend
npm install axios

2. Axios로 FastAPI와 연동

// frontend/src/App.js
import React, { useEffect, useState } from "react";
import axios from "axios";

function App() {
  const [message, setMessage] = useState("");

  useEffect(() => {
    axios.get("http://localhost:8000/api/hello")
      .then(res => setMessage(res.data.message))
      .catch(err => console.error(err));
  }, []);

  return (
    <div style={{ padding: "2rem", fontFamily: "Arial" }}>
      <h1>🚀 FastAPI + React 연동 예제</h1>
      <p>API에서 받은 메시지: <strong>{message}</strong></p>
    </div>
  );
}

export default App;

3. React 앱 실행

npm start

🧩 프로젝트 구조 예시

fastapi-react-app/
├── backend/
│   └── main.py
├── frontend/
│   └── src/
│       └── App.js
└── venv/

✅ 마무리: FastAPI + React, 현대적인 웹 풀스택 조합

장점	설명
속도	FastAPI는 비동기 처리로 초고속 API 제공
생산성	타입 기반 자동 문서화, 에러 감소
유연성	React와 자유롭게 연동 가능
학습 곡선	Django보다 짧고 직관적인 구조

🔜 다음 글 예고

• 🔐 JWT 인증을 통한 로그인 시스템 구축
• 🗃️ SQLite/PostgreSQL과 SQLAlchemy 연동
• 📦 도커(Docker)로 FastAPI + React 배포하기

궁금한 점이나 원하시는 기능이 있다면 댓글로 남겨주세요 😊