ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • FastAPI(Python)과 Svelte로 무작정 웹 개발하기(기초) - 2
      Web 2021. 7. 28. 22:40
       

      FastAPI(Python)과 Svelte로 무작정 웹 개발하기(기초) - 1

      여러분이 아는 서비스 중 파이썬으로 개발된 서비스가 얼마나 될까요? 대표적으로 Instagram이 Django로 개발됐다고 알려졌죠. 그 외에 Reddit, Spotify, Dropbox, Quora 등 많은 유명한 해외 서비스가 파이썬

      mattpy.tistory.com

      전편에 이어 개발환경 설정이 완료됐다면 이번 편에서는 FastAPI에 관해 다뤄보도록 하겠습니다. 지난 편에 폴더 구조를 보셨나요?

       

      pyproject.toml 파일이 존재하는 경로에 main.py라는 파일을 만들고 아래와 같은 코드를 작성해보도록 하겠습니다.

      from fastapi import FastAPI

app = FastAPI()


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

       

      다 작성하셨으면 이 코드를 실행해보도록 하겠습니다. 터미널에서 해당 폴더로 이동하셔서 아래 명령어를 입력하면 됩니다.

      poetry run uvicorn main:app

       

      서버가 실행되는 것을 확인할 수 있습니다. 작성한 코드대로 서버가 잘 동작하는지 확인하기 위해 브라우저를 열고 http://127.0.0.1:8000에 접속해보도록 합니다.

      예상했던 대로 {"message": "Hello World"}가 화면에 출력된 것을 알 수 있습니다. 이제 우리가 기억해야 할 것은 어떤 경로(어떤 주소)에 어떤 응답(위에서는 {"message": "Hello World"})을 줄지 잘 생각해서 코드를 작성하면 됩니다.

       

      위의 코드에서 예상할 수 있는 부분은 @app.get("/")으로 경로를 정의할 수 있고 어떤 방식의 요청(여기에서는 GET 요청)을 받을 것인가를 정할 수 있습니다. 더 이상 자세한 설명은 뒤로하기로 하고 일단 어떤 기능을 만들지 나열해보도록 하겠습니다.

       

      CRUD(Create, Read, Update, Delete)

      • 글 작성
      • 글 상세 보기
      • 작성된 글 목록
      • 작성된 글 수정
      • 작성된 글 삭제

      가입, 로그인 같은 인증 부분은 머리 아프니까 일단 생각하지 말도록 하죠. 우리가 만들 프로젝트는 프론트엔드가 백엔드의 API로 요청을 보내고 응답을 받는 형태가 될 것입니다. 우선 브라우저 화면이 너무 심심하니까 뭐라도 보이는 게 좋겠네요. 

       

       

      반응형

       

       

      Svelte로 만든 SPA(Single Page Application) 서빙을 위한 FastAPI 설정

      Svelte를 사용하게 되면 작성한 코드가 달랑 main.js, style.css 두 파일만 나오게 됩니다. 이 파일만 HTML에 붙이면 한 페이지에서 모든 기능과 화면 전환을 가능하게 만들어줘요. 물론 사용자 입장에서는 페이지가 바뀌는 거처럼 보이지만 실제로는 한 페이지에서 작동하는 거죠. 이것을 SPA라고 부릅니다.

       

      코드를 작성하기 전에 몇 가지 더 설치할 게 있어요. 아래 명령어로 설치해볼게요.

      poetry add jinja2 aiofiles

       

      backend 폴더 아래 templates라는 폴더를 생성하고 그 아래 index.html이라는 파일을 만들고 아래와 같이 작성할게요.

      <!doctype html>
<html lang="ko">

<head>
  <meta charset="utf-8">
  <title>Fast Blog</title>
</head>

<style>
  h1 {
    color: brown;
  }
</style>

<body>
  <h1>Fast Blog</h1>
  <p>We are building our blog using FastAPI and Svelte!</p>
</body>

</html>

       

      그리고 앞서 작성했던 main.py 는 다음과 같이 고쳐 보록 합니다.

      import os

from fastapi import FastAPI, Request
from fastapi.templating import Jinja2Templates

BASE_DIR = os.path.dirname(os.path.realpath(__file__))

templates = Jinja2Templates(directory="backend/templates")

app = FastAPI()


@app.get("/")
def index(request: Request):
    return templates.TemplateResponse("index.html", context={"request": request})

      폴더 구조는 다음과 같습니다.

      아직 api 폴더와 static 폴더는 설명하지 않았으니 걱정하지 마세요. 다 작성하셨으면 터미널을 여시고 서버를 실행시켜볼까요?

      poetry run uvicorn backend.main:app --reload

      서버가 잘 실행됐다면 http://localhost:8000으로 들어가서 아래 같은 화면이 뜨는지 확인합니다.

      이제 이 허접한 화면을 Svelte로 만들 것입니다.

       

      Svelte 세팅과 코드 작성

      Rollup.js라는 것을 이용해 svelte 파일들을 하나로 합쳐서 main.js라는 파일로 만들고 이것을 FastAPI가 서빙하도록 만들 것입니다. 전 글에서 frontend 폴더에 Svelte 프로젝트를 세팅했었죠? 터미널을 여시고 frontend 폴더로 가셔서 필요한 라이브러리를 설치하도록 합니다.

      npm install

      npm install 후 node_modules 폴더가 생김

      원래는 public과 scripts폴더가 있었죠? 여기에서는 필요없기 때문에 삭제했습니다. App.svelte를 아래와 같이 수정해보세요.

      <main>
  <h1>Fast Blog</h1>
  <p>We are building our blog using FastAPI and Svelte!</p>
</main>

<style>
  h1 {color: brown;}
</style>

      그리고 rollup.config.js파일을 약간 수정합니다. export default 아래 output 안에 file만 수정하면 되는데 이렇게 하시면 되겠습니다.

      // 위 코드 생략

export default {
  input: 'src/main.js',
  output: {
    sourcemap: true,
    format: 'iife',
    name: 'app',
    file: '../backend/static/main.js'
  },
  // 아래 코드 생략
}

      그리고 터미널에 npm run dev을 실행시키면 backend/static/main.js와 backend/static/bundle.css가 생성된 것을 볼 수 있습니다. 이게 바로 rollup.js를 사용해 svelte 파일들을 하나의 파일로 컴파일한 것입니다. 이제 다시 FastAPI로 돌아가서 svelte로 만든 화면을 확인할 수 있게 만들어 봅시다.

       

      main.js를 index.html에 붙이기

      main.py와 index.html만 수정하면 됩니다. 우선 main.py부터 수정해볼게요.

      import os

from fastapi import FastAPI, Request
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates

BASE_DIR = os.path.dirname(os.path.realpath(__file__))

templates = Jinja2Templates(directory="backend/templates")
templates.env.globals["STATIC_URL"] = "/static"

app = FastAPI()

app.mount("/static", StaticFiles(directory=os.path.join(BASE_DIR, "static")), name="static")


@app.get("/")
def index(request: Request):
    return templates.TemplateResponse("index.html", context={"request": request})

      index.html

      <!doctype html>
<html lang="ko">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="{{ STATIC_URL }}/style.css">
  <title>Fast Blog</title>
</head>

<style>
  h1 {
    color: brown;
  }
</style>

<body>
  <script src="{{ STATIC_URL }}/main.js"></script>
</body>

</html>

      이제 모든 코드를 다 수정했습니다. 아까 npm run dev가 실행 중인가요? CTRL + C를 누르셔서 종료하시고 다시 프로젝트 최상단 폴더로 이동하셔서 poetry run backend.main:app --reload를 실행시킨 다음 http://localhost:8000에 접속해봅니다. 아까와 같이 아래 화면이 보이시면 성공입니다!

       

      다음 편에서는 Svelte로 글 작성, 작성한 글 보기, 글 목록 등 화면을 그려보도록 하겠습니다.

      반응형
      저작자표시 비영리 변경금지

      'Web' 카테고리의 다른 글

      FastAPI(Python)과 Svelte로 무작정 웹 개발하기(기초) - 3  (3) 2021.08.20
      FastAPI(Python)과 Svelte로 무작정 웹 개발하기(기초) - 1  (2) 2021.07.26

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바