[Pythhon] Fast API로 Todo 목록 만들기

개시하다

제목과 같이 FastapI를 사용하여 TODO 목록을 만듭니다.
원래 "Fastapi 문서 자동 생성 기능이 좋은 것 같은데?"이 말을 듣고 나는 매우 흥미를 느꼈다. 파이톤 튜토리얼→Fast API 튜토리얼→이 Zenn서FastapI 시작를 통해 이번에는 자신의 방식대로 구축했다.

[백엔드]
https://github.com/momonoki1990/fastapi-todo-list-api
[프런트엔드]
https://github.com/momonoki1990/fastapi-todo-list-frontend
그냥 FastapI를 해보고 싶었을 뿐인데, 사실 필요 없어요. 겸사겸사 앞부분도 해봤어요.
역시 헬프데스크 분들이 만들어주신 게 기분 좋네요.
※ (2022/01/06)FastapI의 인증 기능[Pythhon] Fast API에서 Todo 목록에 인증 기능 추가 시도은 전단이 따르지 않아 인증 오류(즉, 거의 이동하지 않음)😢)
※ 동작에는 도커가 필요합니다.시작 방법은 각 창고의 README를 참조하십시오.

문서 자동 생성 기능

서버 액세스/docs를 시작하면 API 설명서에 액세스할 수 있습니다.
모든 자원에 요청과 응답을 표시하는 형식으로'Tryit out'단추를 누르면 요청을 실제적으로 실행할 수 있다(어떤 반응만 답장할 수 있을 줄 알았는데 실제로는 API를 두드리고 있다...!)
이 문서는 API의 라우트를 형식적으로 설명하기만 하면 됩니다.
/src/routers/task.py

@router.get("", response_model=List[task_schema.TaskResponse])
async def list_tasks(db: AsyncSession = Depends(get_db)):
    return await task_crud.get_tasks(db)

예를 들어 상기 코드response_model=List[task_schema.TaskResponse]를 통해 응답 주체의 유형을 설정했다.
/src/schema/task.py

from pydantic import BaseModel, Field

class TaskResponse(TaskBase):
    id: int = Field(..., gt=0, example=1)
    done: bool = Field(False, description="done task or not")

    class Config:
        orm_mode = True

task_schema.TaskResponse는 Pydantic의 기본 모델을 계승한 클래스로 구성원 변수에 ptyhon의 유형 알림을 설정한다.
또한 Filed 인스턴스에서는 설명서를 문서에 반영하는 기본값과 키워드 매개 변수로 추가할 수 있습니다.
※ 설정orm_mode = True을 통해 ORM(이번에는 SQLAlchemy)의 모델 대상을 Pydantic의 응답 대상으로 변환할 수 있습니다.
설정하지 않으면 검증 오류가 발생합니다.

(Schema는 리소스 아래에 기재됨)

제가 파이토존으로 API를 만든 것은 처음이지만 직관적으로 기술할 수 있고 작은 검증도 키워드 매개 변수로 값을 전달할 수 있을 뿐 아니라 문서가 자동으로 생성되기 때문에 개발할 때 기분이 좋습니다.
(공식 문서도 쉽게 읽을 수 있고 일부는 일본어로 번역)

SQLAlchemy

이번에 SQLAlchemy를 ORM으로 사용했는데 처음엔 읽어야 할 곳공식 문서이 어딘지 몰라서 당황스럽네요...
(Top → Reference → Version 1.4 버전 선택)

원래 SQLAlcheemy ORM과 SQL Alchemy Core는 두 가지가 있는데, 후자는 SQL을 직접 쓰는 건가요?(이렇게 되면 드라이버만 있으면 되는데...)
튜토리얼에서 ORM과 Core가 뒤섞여 처음에는 어느 것을 썼는지 알 수 없었고, ORIM의 조회 쓰기 방법도 2.0 스타일과 1이었다.엑스 스타일이 있는 것 같은데 어느 쪽인지 헷갈려요.
공식 Glosary와 DeepL 선생님의 통역)

그러나 ORM과 코어, 1.4 스타일, 2.0 스타일이 한 번에 있고, 1.4 중future=True에서 2.0 스타일을 쓸 수 있는 검색어를 식별하면 문서를 볼 수 있는 곳engine은 DB에 넘기는 경로 등 설정이 돼 있다.session 유지engine라는 설정이 있었구나, 왠지 이해가 간다(얕은 w)(그래도 DB를 더 잘 알고싶구나...)
또한psyhon의 async·await 문법(asyncio)은 비교적 새롭다(node.js). 대응하는 프로그램 라이브러리와 대응하는 프로그램 라이브러리가 있는 것 같지만, aimysiql이라는 비동기 처리에 대응하는 MySQL 드라이버는 SQLAlcheemy에서 추천하지 않으니 asyncmy를 추천합니다.
(aiomysql의 업데이트가 멈춘 것 같습니다. 봤습니다창고.. 최신 발표 시기는 2020년 11월입니다)


버전별 첫 페이지의 맨 아래에 Dialect Doocumentation 항목이 있는데 이 항목에 각 DB에 대한 설정이나 드라이브가 기재되어 있습니다)

Poetry, Black, tox, 테스트용 DB 컨테이너

여기[2021] 현대 파이썬 개발 환경에 대한 소개에서도 포장 매니저의 Poery(주로 참고하는 Zenn서도 사용을 소개)와 블랙이라는 형식의 트위터가 소개됐다.
테스트 관리 도구인 tox의 기본 패키지 관리자는python 표준의 pip이기 때문에 다음과 같이 설정install_command하고poetry를 사용하여 각 테스트 환경의 의존 라이브러리를 설치합니다.
tox.ini

[tox]
skipsdist = true
envlist = flake8, py310
install_command = poetry install -D {packages}

[testenv]
deps = pytest
allowlist_externals = poetry
commands =
    poetry install
    poetry run pytest tests/

[testenv:flake8]
deps = flake8
commands =
    poetry run flake8 src/

나는 블랙이 설정되지 않은 곳을 좋아한다.
( 맥스-line-length에 대해서 분쟁이 있었던 것 같아요. )
상기 파이톤의 개발 도구와 상관없이 이번 테스트 환경의 DB는 테스트용 Docker 컨테이너를 준비했다.
(암호화 볼륨에서 오래 지속되지 않는 것을 제외하고는 개발된 DB 용기와 기본적으로 같다)
docker-compose.yml

db-test:
    image: mysql:8.0
    environment:
      MYSQL_DATABASE: "todo"
      MYSQL_ALLOW_EMPTY_PASSWORD: "yes"
      TZ: "Asia/Tokyo"
    volumes:
      - ./my.conf:/etc/mysql/conf.d/my.cnf
    ports:
      - 33050:3306

끝맺다

"내가 해봤어!"오직 그렇게 말하고 싶어서 멈추지 않고 기사를 썼는데 여기서 끝내고 싶어요.

추가: 프런트엔드, Vite, Chakra UI

React 공식?'Reate-react-app'의create-react-app보다 빨라서 Vite라는 설치 도구를 사용해 봤습니다.확실히 템플릿을 만들기 전에 빨라요. CRA의 디렉토리와 파일이 더 많지 않나요?(해보려고 했는데 굳어버렸어요. 요즘 현지 npm 상태가 안 좋은 것 같은데...)

Vite로 만든 디렉토리

최근 개발자 미리보기로 공개된 쇼피파이의 하이드로젠이라는 프레임에도 바이트가 사용됐다.

Chakra UI
"Tailwind CSS를 뭐라도 쓸 수 있을 것 같아요."조금 마음에 걸려서 해봤어요.
아래gridGap와py(padding top,bottom)처럼 React의 props로서 모든 CSS를 기술할 수 있어 개인적으로는 Tailwind CSS와 마찬가지로 학급명에 골머리를 앓지 않고 직감적으로 좋아한다.
가로와 세로로 배열된 flex 용기VStackHStack도 편리하다.

App.tsx

<div className="App">
      <Container>
        <VStack gridGap="8" py="16">
          <Heading as="h1" size="4xl">
            My Todo List
          </Heading>
          <InputForm tasks={tasks} setTasks={setTasks} />
          <List tasks={tasks} setTasks={setTasks} />
        </VStack>
      </Container>
    </div>

Stack을 계속 사용하십시오(목록 레이아웃 편)
메르칼리 샵스도 채택됐다고 합니다.
(메르칼리 Shopps는 응용 프로그램에서 실행되지만Next.js에서 웹뷰로 구축됨)
메르카리샵의 앞머리