[FastAPI + Svelte 완벽 가이드] 풀스택 웹 개발 환경 구축하기

FastAPI 다이어그램

FastAPI와 Svelte를 결합한 풀스택 웹 애플리케이션 개발 환경 구축 방법을 상세히 알아보겠습니다. 이 가이드는 IDE 설치부터 FastAPI와 Svelte 설정까지 모든 단계를 포함합니다.

 

1. IDE 설치 및 설정

FastAPI 백엔드: PyCharm Community Edition

1. PyCharm Community Edition 다운로드 및 설치
2. 프로젝트 생성 및 설정:
   • 새 프로젝트 생성 또는 기존 프로젝트 열기
   • Settings → Project: [프로젝트명] → Project Interpreter
   • 가상환경 설정: 예) 가상환경/프로젝트명/bin/python

 

Svelte 프런트엔드: Visual Studio Code

1. Visual Studio Code 다운로드 및 설치
2. Svelte for VSCode 확장 프로그램 설치

 

2. Node.js 및 npm 설정

• Node.js 설치 확인: node -v
• Homebrew를 통한 Node.js 설치 (Mac 사용자):

brew update
brew upgrade
brew install node

 

 

• nvm 설치 (Node 버전 관리):

brew install nvm
nvm install 18.15.0  # 또는 최신 LTS 버전

 

 

3. Svelte 프로젝트 생성

• 가상환경 활성화: myapi (alias 사용 시)
• Svelte 프로젝트 생성:

npm create vite@latest frontend -- --template svelte
cd frontend
npm install

 

 

• Svelte 실행:

npm run dev

 

4. FastAPI 설정

• FastAPI 설치 (가상환경 내):

pip install fastapi
pip install uvicorn

 

 

• 기본 FastAPI 앱 생성 (main.py):

from fastapi import FastAPI

app = FastAPI()

@app.get("/")
def read_root():
    return {"Hello": "World"}

 

 

• FastAPI 실행: 

uvicorn main:app --reload

 

5. FastAPI와 Svelte 통합

• CORS 설정 (FastAPI):

from fastapi.middleware.cors import CORSMiddleware

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

 

 

• Svelte에서 FastAPI 엔드포인트 호출 (App.svelte):

<script>
import { onMount } from 'svelte';

let message = '';

onMount(async () => {
  const response = await fetch('http://localhost:8000/');
  const data = await response.json();
  message = data.Hello;
});
</script>

<main>
  <h1>{message}</h1>
</main>

 

 

결론

이제 FastAPI 백엔드와 Svelte 프런트엔드를 통합한 개발 환경이 구축되었습니다. 이 설정을 바탕으로 강력하고 효율적인 웹 애플리케이션을 개발할 수 있습니다. FastAPI에서 API를 구현하고, Svelte에서 동적이고 반응적인 사용자 인터페이스를 구축하여 완성도 높은 애플리케이션을 만들어보세요.

 

추가로 고려할 사항:

1. 데이터베이스 통합 (예: SQLAlchemy)
2. 인증 및 권한 관리 구현
3. API 문서화 (Swagger UI 활용)
4. 프로덕션 배포 전략 수립

 

이 가이드를 통해 FastAPI와 Svelte의 장점을 최대한 활용한 현대적이고 효율적인 웹 애플리케이션 개발을 시작할 수 있습니다.

 

[FastAPI] FastAPI (Back-end) + Svelte (Front-end) 개발환경 구축

 

[FastAPI 완전 정복] 효율적인 프로젝트 초기 구조 설계 가이드