할 일 폼으로 저장하기

시리즈, 입문

2024. 7. 14. PM 7:40:20

#upload, #validation, #pydantic

할 일 생성

(1) 할 일 생성 폼 UI

새 할 일은 각 할 일 그룹 페이지에서 생성하도록 할게요. 그러면 할 일엔 할 일 그룹이 필수인데, 이렇게 UI를 구성하면 할 일 그룹 정보를 기본적으로 지정할 수 있거든요. 할 일 생성 폼 UI를 만들게요. pudding_todo/apps/todo/templates/components 디렉터리 안에 form-create-todo.jinja2 파일을 만듭니다.

{% macro render(todo_group, url_for) %}
<form
    hx-post="{{ url_for('create-todo') }}"
    hx-target="#todo-list"
    hx-swap="afterbegin"
    hx-ext="json-enc"
>
    <input type="hidden" name="group_id" value="{{ todo_group.id }}">
    <div>
        <label for="input-name">할 일 이름</label>
        <input type="text" id="input-name" name="name" required>
    </div>
    <div>
        <label for="input-duedate-at">마감일시</label>
        <input type="datetime" id="input-duedate-at" name="duedate_at">
    </div>
    <div>
        <textarea name="description"></textarea>
    </div>
    <div>
        <button type="submit">할 일 저장</button>
    </div>
</form>
{% endmacro %}

htmx 관련 속성은 뒤에서 설명해드릴게요.

이번엔 todo-list.jinja2 템플릿 파일을 수정해요.

{% extends "layout.jinja2" %}

{% import 'components/todo-detail.jinja2' as todo_detail %}
{% import 'components/form-create-todo.jinja2' as form_create_todo %}

{% block content %}
    <div>
        <h1>{{ todo_group.name }} 그룹함</h1>

        <nav>
            <a href="?status=all">전체</a>
            <a href="?status=completed">완료한 일만</a>
            <a href="?status=incompleted">완료하지 않은 일만</a>
        </nav>

        {{ form_create_todo.render(todo_group, request.url_for) }}

        <div id="todo-list">
        {% for todo in todos %}
            {{ todo_detail.render(todo, request.url_for) }}
        {% endfor %}
        </div>
    </div>
{% endblock %}

앞서 만든 form-create-todo.jinja2 템플릿 파일을 가져와 화면에 표시한 부분이 추가됐고, 할 일 목록을 <div id="todo-list"> 태그로 감싼 부분도 추가됐어요.

할 일 생성 폼에 있는 htmx 속성 중 새로 등장한 속성을 하나씩 볼게요. hx-swap의 값인 afterbegin은 대상 HTML Element의 안쪽에 있는 첫 번째 자식 요소의 앞을 뜻해요. 서버로부터 응답받은 HTML을 #todo-list의 맨 앞에 끼워넣는거죠. 그런데 할 일 생성하는 종단점 API는 JSON 응답을 하지 HTML 응답은 하지 않아요. 살짝 고칠게요.

# pudding_todo/apps/todo/endpoints.py

@router.post(
    "/todos",
    response_model=Todo,
    name="create-todo",
    status_code=status.HTTP_201_CREATED,
)
@tpl.hx("partial/todo-detail.jinja2", no_data=True)
async def create_todo(
    payload: TodoCreateSchema,
    user: CurrentUserDep,
    service: TodoServiceDep,
    todo_group_service: TodoGroupServiceDep,
) -> dict:
    group = await todo_group_service.get_users_group_by_id(user.id, payload.group_id)
    if not group:
        raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="Group not found")
    todo = await service.create(payload)
    ctx = {
        "todo": todo
    }
    return ctx

할 일을 생성하면 생성한 할 일의 상세보기 HTML을 부분(partial) 렌더링하여 응답하도록 수정했어요. 이에 따라 다음과 같이 동작해요.

할 일 생성 폼에 내용을 작성하고 제출하면,

할 일 목록 중 맨 위에 새로 저장한 할 일이 나타나는 거죠.

htmx 속성 중 hx-ext는 htmx 확장기능(Extension)을 사용하도록 지정하는 용도로 써요. FastAPI는 JSON(application/json) 형식으로 데이터가 넘어오는 걸 기본으로 하니 HTML 폼 데이터를 JSON으로 인코딩해주는 json-enc 확장기능을 쓰도록 hx-ext="json-enc" 코드를 명기한 거예요.

TodoCreateSchema에 마감일시 필드 추가

그런데 마감일시(duedate_at)를 지정하지 않으면 할 일은 생성되지 않아요. 마감일시 값이 빈 문자열로 전송되는데, 이는 Pydantic 유효성 검사에서 유효한 일시정보가 아니어서 걸리거든요. TodoCreateSchema의 duedate_at 필드의 값으로 빈 문자열은 유효성 검사를 하지 않도록 할게요.

# pudding_todo/apps/todo/schemas.py

from typing import Optional, Annotated
from pydantic import BaseModel, Field, AwareDatetime, BeforeValidator

class TodoGroupCreateSchema(BaseModel):
    name: str


BlankableAwareDatetime = Annotated[
    AwareDatetime | None,
    BeforeValidator(lambda v: None if v == "" else v),
]

class TodoCreateSchema(BaseModel):
    name: str
    description: Optional[str] = Field(default=None)
    duedate_at: BlankableAwareDatetime = Field(default=None)
    group_id: int

BeforeValidator는 Pydantic이 유효성 검사를 수행하기 전에 먼저 수행할 동작을 지정하는 데 사용해요. 함수처럼 호출 가능한 객체를 인자로 전달하므로 람다 함수를 전달했어요. 이 람다 함수는 인자가 빈 문자열이면 None을 반환하는데, BlankableAwareDatetime의 각주된 자료형이 AwareDatetime | None이라서 None을 사용할 수 있지요.

여기까지 진행한 코드 커밋 : 118ea3a

학습이 이뤄지고 있는지 확신이 안 서나요?
사수가 없나요?
효과적이고 효율적으로 학습하며 성장하는
자기만의 학습과 성장 체계를 만들 수 있습니다.
연사자들의 각양각색 학습과 성장 스토리로
여러분의 학습과 성장을 키워보세요.

푸딩캠프 뉴스레터를 구독하면 학습과 성장, 기술에 관해 요약된 컨텐츠를 매주 편하게 받아보실 수 있습니다.

뉴스레터 구독하기

이전 컨텐츠

다음 컨텐츠