[FastAPI] API와 Svelte

API 만들기

main.py에 다음과 같이 파일을 작성하였다.

from fastapi import FastAPI

app = FastAPI()


@app.get("/hello")
def hello():
    return {"message": "안녕하세요 파이보"}

FastAPI 클래스로 생성한 app 객체가 FastAPI의 핵심 객체이다.

함수명 위에 @app.get("hello") 어노테이션은 /hello 라는 URL 요청이 발생하면

해당 함수를 실행하여 결과를 리턴하라는 의미이다.

/hello 라는 URL이 요청되면 {"message": "안녕하세요 파이보"} 라는 딕셔너리를 리턴하게 된다.

 

유비콘(Uvicorn)은 비동기 호출을 지원하는 파이썬용 웹 서버이다.

 

uvicorn main:app --reload

main은 파일 이름, app은 main.py의 app 객체,

--reload 옵션은 프로그램이 변경되면 서버 재시작 없이 그 내용을 반영하라는 의미이다.

 

 

Svelte 웹 페이지 만들고 FastAPI 서버와 통신하기

projects/myapi/frontend/src/App.svelte에 다음과 같이 파일을 작성한다.

<script>
  let message;

  fetch("http://127.0.0.1:8000/hello").then((response) => {
    response.json().then((json) => {
      message = json.message;
    });
  });
</script>

<h1>{message}</h1>

하나하나 살펴보자.

<script> 블록에 meaasge라는 변수를 생성하고

FastAPI의 hello API를 호출하여 돌려받은 값을 message 변수에 담았다.

담겨진 message 값은 <h1>{message}</h1> 로 출력했다.

 

그리고 main.py의 파일을 다음과 같이 수정해보자.

from fastapi import FastAPI
from starlette.middleware.cors import CORSMiddleware

app = FastAPI()

origins = [
    "http://127.0.0.1:5173",    # 또는 "http://localhost:5173"
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)


@app.get("/hello")
def hello():
    return {"message": "안녕하세요 파이보"}