🚀 fastAPI-

FastAPI와 프론트엔드 구조를 함께 다뤄 본 팀 프로젝트 레포지토리

fastAPI-는 FastAPI 기반 백엔드와 프론트엔드 구조를 함께 구성하며 풀스택 개발 흐름을 연습한 팀 프로젝트입니다.
API 서버가 데이터를 처리하고, 프론트엔드가 이를 화면에 연결하는 과정을 이해하는 데 초점을 두었습니다.

📌 프로젝트 소개

이 레포지토리는 스터디 팀 프로젝트로 진행한 FastAPI 기반 웹 애플리케이션입니다.

백엔드와 프론트엔드가 분리된 구조를 직접 다뤄 보며, 클라이언트와 서버가 어떻게 데이터를 주고받는지 학습하는 것을 목표로 했습니다.
특히 Python 기반의 FastAPI를 사용해 API 서버를 구성하고, 프론트엔드와 연결되는 전체 흐름을 경험하는 데 의미가 있습니다.

처음 보는 사람도 이 레포지토리를 통해 다음 내용을 파악할 수 있습니다.

• FastAPI 기반 백엔드 프로젝트 구조
• 프론트엔드와 백엔드가 분리된 개발 방식
• API 요청과 응답 흐름
• 팀 단위 프로젝트 구성과 협업 경험

✨ 주요 내용

• ⚡ FastAPI를 이용한 백엔드 서버 구성
• 🧩 백엔드와 프론트엔드 디렉터리 분리
• 🔗 API를 통한 클라이언트-서버 통신 흐름 학습
• 🐍 Python 기반 웹 서버 개발 경험
• 👥 팀 프로젝트를 통한 역할 분담 및 협업 연습
• 🗂️ 프로젝트 구조와 실행 환경 구성 실습

🛠️ 기술 스택

구분	사용 기술
Backend	Python, FastAPI
Frontend	JavaScript, Node.js 기반 프론트엔드 환경
Package Manager	npm
Version Control	Git, GitHub
Collaboration	Team Project

📁 폴더 구조

fastAPI-/
├── backend/             # FastAPI 백엔드 서버 코드
├── frontend/            # 프론트엔드 코드
├── package.json         # 프론트엔드 의존성 및 실행 스크립트
├── package-lock.json    # 의존성 잠금 파일
└── .gitignore

🚀 실행 방법

1. Backend 실행

백엔드 디렉터리로 이동합니다.

cd backend

필요한 Python 패키지를 설치한 뒤 FastAPI 서버를 실행합니다.

uvicorn main:app --reload

프로젝트 구조에 따라 진입 파일명이 다를 수 있으므로, 실제 실행 파일명을 확인한 뒤 실행하면 됩니다.

2. Frontend 실행

프론트엔드 디렉터리로 이동합니다.

cd frontend

의존성을 설치합니다.

npm install

개발 서버를 실행합니다.

npm run dev

🔁 개발 흐름

Frontend
   ↓ API Request
FastAPI Backend
   ↓ Data Processing
Response
   ↓
Frontend Rendering

이 프로젝트는 프론트엔드와 백엔드가 분리된 구조에서 API를 중심으로 기능이 연결되는 흐름을 이해하는 데 초점을 두었습니다.

🧠 학습 포인트

이 프로젝트를 진행하며 다음 내용을 중심으로 학습했습니다.

• FastAPI 프로젝트의 기본 구조
• Python 기반 API 서버 개발 방식
• 프론트엔드와 백엔드 간 데이터 통신
• 팀 프로젝트에서 디렉터리와 역할을 나누는 방식
• 서버 실행 환경과 프론트엔드 개발 환경을 함께 관리하는 방법

🔧 개선 예정

• API 명세 문서 추가
• 백엔드 실행 방법 상세화
• 프론트엔드 화면 예시 이미지 추가
• 주요 기능별 설명 보강
• 환경 변수 설정 방법 정리
• 팀원 역할 및 기여 내용 정리

✅ 한 줄 정리

FastAPI 백엔드와 프론트엔드 구조를 함께 다뤄 보며, 풀스택 웹 애플리케이션의 기본 흐름을 익힌 팀 프로젝트입니다.