데브허브 | DEVHUB | How To Build a FastAPI & React Full Stack App | Clerk, Databases, LLMs & MoreHow To Build a FastAPI & React Full Stack App | Clerk, Databases, LLMs & More
- FastAPI(Python) 백엔드와 React(JavaScript) 프론트엔드를 활용하여 LLM 기반 코딩 챌린지 생성기를 구축하는 풀스택 애플리케이션 개발 과정을 다룹니다. 💻
- 주요 기능으로는 API, 사용자 인증, 데이터베이스 연동, 그리고 LLM(대규모 언어 모델)을 통한 질문 자동 생성 기능이 포함됩니다. 🧠
- 사용자 인증은 Clerk.com을 통해 구현되며, Google 등 다양한 소셜 로그인 옵션을 지원하여 간편하고 강력한 인증 시스템을 제공합니다. 🔑
- 백엔드 기술 스택은 FastAPI, SQLAlchemy, python-dotenv, Clerk Python SDK, OpenAI SDK로 구성되어 견고한 서버를 구축합니다. 🐍
- 프론트엔드는 React, Vite, React Router DOM v6, Clerk React 패키지를 사용하여 동적이고 반응형 사용자 인터페이스를 개발합니다. ⚛️
- 개발 환경 설정에는 PyCharm IDE가 사용되며, Python 의존성 관리를 위해
uv를, Node.js 및 React 의존성 관리를 위해 npm을 활용합니다. 🛠️
- Clerk 연동 과정은 Clerk 대시보드에서 애플리케이션 생성, 발급된 Publishable Key를 프론트엔드
.env 파일에 설정, 그리고 ClerkProvider로 React 앱을 래핑하는 단계를 포함합니다. 🔗
- 백엔드 인증 로직은 프론트엔드에서 Clerk이 발급한 인증 토큰을 백엔드로 전송하고, 백엔드가 Clerk에 토큰 유효성을 확인하여 사용자 접근 권한을 부여하는 방식으로 작동합니다. ✅
- OpenAI API를 통합하여 다양한 난이도의 코딩 질문을 자동으로 생성하는 기능을 구현하여 LLM의 실제 적용 사례를 보여줍니다. ✨
- 프로젝트는 기본적인 핵심 기능을 다룬 후 사용자가 자유롭게 확장하고 커스터마이징할 수 있도록 설계되어 학습 및 포트폴리오 활용에 용이합니다. 🚀