할 일 목록 구현

할 일 그룹 별 할 일 목록 구현

할 일은 할 일 그룹 단위로 나열할 거예요. 할 일 그룹 목록을 구현하는 것과 거의 동일한데, 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