목록으로

할 일 목록 구현

시리즈, 입문

2024. 7. 3. AM 10:29:20

#htmx, #sqlalchemy, #join

할 일 그룹 별 할 일 목록 구현

할 일은 할 일 그룹 단위로 나열할 거예요. 할 일 그룹 목록을 구현하는 것과 거의 동일한데, SQLAlchemy를 학습하는 목적으로 조금 다르게 구현해보겠습니다.

(1) 할 일 목록 템플릿 작성

대개 저는 템플릿을 마지막에 작성하는데, 설명을 위해 템플릿부터 작성할게요. pudding_todo/apps/todo/templates/pages 경로에 todo-list.jinja2 템플릿 파일을 만드세요.

{% extends "layout.jinja2" %}

{% block content %}
    <div>
        <h1>{{ todo_group.name }} 그룹함</h1>
        {% for todo in todos %}
        <div>
            <h2>{{ todo.name }}</h2>

            <div>{{ todo.description or "" }}</div>

            <ul>
                <li>
                    <span>생성일시</span>
                    <span>{{ todo.created_at.strftime('%Y-%m-%d %H:%I') }}</span>
                </li>
                <li>
                    <span>수정일시</span>
                    <span>{{ todo.updated_at.strftime('%Y-%m-%d %H:%I') }}</span>
                </li>
                <li>
                    <span>마감일시</span>
                    {% if todo.duedate_at %}
                    <span>{{ todo.duedate_at.strftime('%Y-%m-%d %H:%I') }}</span>
                    {% else %}
                    <span>없음</span>
                    {% endif %}
                </li>
                <li>
                    {% if todo.completed_at %}
                    <span>완료일시</span>
                    <span>{{ todo.completed_at.strftime('%Y-%m-%d %H:%I') }}</span>
                    <button type="button">완료 취소하기</button>
                    {% else %}
                    <button type="button">완료하기</button>
                    <button type="button">작업 취소하기</button>
                    {% endif %}
                </li>
                {% if todo.cancelled_at %}
                <li>
                    <span>취소일시</span>
                    <span>{{ todo.cancelled_at.strftime('%Y-%m-%d %H:%I') }}</span>
                </li>
                {% endif %}
            </ul>
        </div>        
        {% endfor %}
    </div>
{% endblock %}

완료하기, 취소하기 등 버튼은 다음 컨텐츠에서 구현할 거예요. 이 버튼을 제외하면 특이사항은 없지요?

(2) 할 일 목록 종단점 구현

할 일 목록 종단점 함수 구현도 특별히 다르지 않아요. 여태껏 구현해온 구현을 조합하는 거죠. 😀

# pudding_todo/apps/todo/endpoints.py

@router.get("/todo-groups/{pk}/todos", name="list-todo-page")
@tpl.page("pages/todo-list.jinja2")
async def list_todo(
    pk: int,
    user: CurrentUserDep,
    service: TodoServiceDep,
    todo_group_service: TodoGroupServiceDep,
) -> dict:
    todo_group = await todo_group_service.get_users_group_by_id(user.id, pk)
    if not todo_group:
        raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="Group not found")
    
    todos = await service.findall(user.id, group_id=pk)
    ctx = {
        "todo_group": todo_group,
        "todos": todos,
    }

    return ctx

(3) 할 일 그룹 별로 할 일 목록 페이지 링크

할 일 목록 페이지 구현까지 마쳤으니 할 일 그룹명을 누르면 이 페이지로 접속하도록 URL을 연결합니다. pudding_todo/apps/todo/templates/pages/todo-group-list.jinja2 템플릿 파일을 다음과 같이 수정할게요.

{% extends "layout.jinja2" %}

{% block content %}
    <h1>{{ user.username }}님의 할 일 그룹</h1>

    <div>
    {% for group in groups %}
        <div>
            <a href="{{ url_for('list-todo-page', pk=group.id) }}">
                <h2>{{ group.name }}</h2>
                
                <div
                    hx-get="{{ url_for('partial-todo-group-todos-count', pk=group.id) }}"
                    hx-trigger="load delay:250ms"
                ></div>
            </a>
        </div>        
    {% endfor %}
    </div>
{% endblock %}

(4) 할 일 그룹별 할 일들 가져오기

이제 종단점 함수가 동작하도록 TodoService에 findall() API를 구현할 차례예요. 사용자의 할 일 그룹을 지정하면 그 그룹에 속한 할 일을 가져오는 API를 TodoService에 구현합니다.

# pudding_todo/apps/todo/services.py

class TodoService:
    ...
    async def findall(
            self,
            user_id: int,
            *,
            group_id: Optional[int] = None,
            offset: int = 0,
            limit: int = 10,
        ) -> Sequence[Todo]:
        stmt = (
            select(Todo)
            .join(TodoGroup)
            .where(TodoGroup.user_id == user_id)
            .offset(offset)
            .limit(limit)
        )
        if group_id:
            stmt = stmt.where(Todo.group_id == group_id)
        result = await self.session.execute(stmt)
        return result.unique().scalars().all()

할 일 그룹 별 할 일 개수를 세는 count_by_group_id() 메서드와 다르게 구현했어요. offset과 limit 말고요. 😅 count_by_group_id() 메서드에서는 Todo.group.has() 표현식을 사용했는데, 이번엔 join()을 사용했어요. 동작은 동일한데, SQL 질의문은 달라요.

먼저 .where(Todo.group.has(TodoGroup.user_id == user_id) 방식으로 생성된 SQL 질의문은 다음과 같아요.

SELECT * FROM todo
	WHERE EXISTS (
		SELECT 1
		FROM todo_group
		WHERE todo_group.id = todo.group_id
			AND todo_group.user_id = :user_id_1)

.join() 방식으로 생성된 SQL 질의문은 다음과 같아요.

SELECT * FROM todo
	JOIN todo_group ON todo_group.id = todo.group_id
	WHERE todo_group.user_id = :user_id_1

전혀 다르지요? SQLAlchemy의 장점이자 어려운 점이 바로 이런 점이라 생각해요. SQL 질의문을 Python으로 작성하듯이 세세하게 제어할 수 있지만, 그렇기 때문에 SQL문이나 데이터베이스을 잘 알지 못하면 동작은 하지만 상황에 적합하지 않은 SQL문을 작성할 수 있는 거죠.

join()을 빠뜨리면 어떻게 동작할까요?

stmt = (
	select(Todo)
	.where(TodoGroup.user_id == user_id)
	.offset(offset)
	.limit(limit)
)

이렇게 말이죠. 아무 차이가 없어요. 물론 SQL 질의문은 달라요.

SELECT * FROM todo, todo_group
	WHERE todo_group.user_id = :user_id_1

두 개 테이블에 질의를 보내기 때문에 이런 SQL 질의문을 수행하면 데이터가 두 개가 노출돼요. 다음과 같이요.

그래서 명시적으로 join()을 사용해 테이블 JOIN 의도를 드러내야 합니다. 또는 result.unique()와 같이 ScalarResult 객체의 unique() 메서드를 호출하여 중복되어 드러난 데이터를 하나로 걸러낼 수도 있어요. 최종 동작 결과는 동일한데요. join()은 SQL 질의문에 JOIN을 하여 todo 테이블에 대해서만 데이터를 가져오는 것이라서 데이터가 중복되어 드러나지 않은 것이고, unique()는 중복되어 데이터를 가져온 걸 Python 영역에서 걸러내는 큰 차이가 있어요.

여기까지 진행한 코드 커밋 : 9a55673

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

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

뉴스레터 구독하기

이전 컨텐츠

다음 컨텐츠