FastAPI+Svelte 시작

 

본 블로그를 운영하는 이는 프로그래밍을 전공한 사람이 아니고, 독학과 강의등을 듣고 개발을 하고 있습니다. 개발을 시작한 지는 2021년 5월경부터 2년 약간 넘게 Django, Flask 등을 학습하고 개발을 진행했으나, 약 1년 반정도 손을 놓고 있다가... 2025년 7월경부터 크롤링과 FastAPI를 다시 시작하게 되었습니다. 혹시 방문하시는 분들은 이 점을 참고하여 주시기 바랍니다.

 

개발 기록을 남겨 놓자는 생각으로 블로그를 시작합니다. 백엔드로 FastAPI를 사용하고, 프론트엔드로는 Svelte를 사용하여 웹어플리케이션 개발부터 개발과정을 기록으로 남기고자 블로그를 개설합니다. 프로그래밍 전공자가 아니기 때문에 프로그램에 오류가 있을 수 있다는 점도 염두에 두어 주시기 바랍니다. 그럼 시작합니다.

 

*** 개발 에디터는 파이참을 사용하고 있슴 ***

##### Root Directory에 FastAPI 설치하고 구동하기
##### 구동전에 main.py 작성

Svelte_0.0.0> pip install fastapi
Svelte_0.0.1> uvicorn main:app --port=8000
INFO:     Started server process [22896]
INFO:     Waiting for application startup.
INFO:     Application startup complete.
INFO:     Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)

##### Root Directory 밑으로 frontend 폴더 만들고, cd frontend
##### npm init vite ./로 설치하면 자동으로 구동된다. 
##### 다음 구동부터는 frontend 폴더에서 npm run dev 
Svelte_0.0.0>frontend> npm init vite ./
Need to install the following packages:
    create-vite@8.0.2
    Ok to proceed? (y) y


    > npx
    > create-vite ./

    │
    ◇  Select a framework:
    │  Svelte
    │
    ◇  Select a variant:
    │  JavaScript
    │
    ◇  Use rolldown-vite (Experimental)?:
    │  No
    │
    ◇  Install with npm and start now?
    │  Yes
    │
    ◇  Scaffolding project in D:\Python_FastAPI\JumpToFastAPI_Svelte\Svelte_0.0.1\frontend...
    │
    ◇  Installing dependencies with npm...

    added 83 packages, and audited 84 packages in 35s

    5 packages are looking for funding
      run `npm fund` for details

    found 0 vulnerabilities
    │
    ◇  Starting dev server...

    > frontend@0.0.0 dev
    > vite

    오전 8:39:03 [vite] (client) Forced re-optimization of dependencies

      VITE v7.1.12  ready in 830 ms

      ➜  Local:   http://localhost:5173/
      ➜  Network: use --host to expose
      ➜  press h + enter to show help
  
  ##### 프론트엔드 서버 구동하기
  Svelte_0.0.1\frontend> npm run dev
  > frontend@0.0.0 dev
> vite


  VITE v7.1.12  ready in 776 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

# Svelte_0.0.1/main.py

from fastapi import FastAPI

app = FastAPI()


@app.get("/")
async def root():
    return {"message": "Hello World"}

 

1. 백엔드 서버는 http://127.0.0.1:8000 

    : 추후에 개발이 완료되면, "/" 라우터에 렌더링되는 화면을 프론트엔드 화면으로 바꿀예정이다.

2. 프론트엔드 서버는 http://localhost:5173/