💻 실전 프로그래밍 | FastAPI로 만드는 간단한 Todo List 앱

3월 13, 2025

💻 실전 프로그래밍 | FastAPI로 만드는 간단한 Todo List 앱

안녕하세요! 오늘은 FastAPI를 사용하여 간단한 Todo List 애플리케이션을 만들어 보겠습니다. FastAPI는 지난 몇 년간 Python 개발자들 사이에서 매우 인기가 높아진 웹 프레임워크로, API 구축에 최적화된 성능과 편리한 사용성을 제공합니다.

FastAPI란 무엇인가?

FastAPI는 비동기성을 기반으로 높은 성능을 제공하는 Python의 새로운 웹 프레임워크입니다. 더 나은 가독성과 유지보수성을 제공하며, Pydantic을 사용하여 데이터 유효성 검사를 쉽게 할 수 있습니다.

Todo List 애플리케이션 구축

이제 FastAPI로 Todo List 애플리케이션을 만드는 과정을 단계별로 살펴보겠습니다. 이 프로젝트는 CRUD(Create, Read, Update, Delete) 기능을 지원합니다.

프로젝트 설정

먼저 프로젝트 디렉토리를 생성하고, 가상 환경을 설정합니다.
필수 라이브러리인 FastAPI와 Uvicorn, Jinja2 등을 설치합니다.

mkdir TODO
cd TODO
python -m venv venv
source venv/bin/activate  # Windows에서는 'venv\Scripts\activate'
pip install fastapi uvicorn jinja2 python-multipart

FastAPI 서버 구축

다음으로, FastAPI의 기본 서버를 설정합니다. main.py 파일을 생성하여 아래와 같이 작성합니다.

from fastapi import FastAPI
app = FastAPI()

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

서버를 실행합니다.

uvicorn main:app --reload

이제 기본적으로 API가 동작합니다. http://localhost:8000에서 확인할 수 있습니다.

홈페이지 템플릿 작성

Jinja2 템플릿을 사용해서 Todo 목록을 보여줄 HTML 파일을 작성합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TODO LIST</title>
</head>
<body>
    <nav class="navbar bg-body-tertiary">
        <div class="container-fluid">
            <h1 class="navbar-brand">My To Do list</h1>
        </div>
    </nav>
    <br>
    <table class="table">
        <tr>
            <th>ToDo</th>
            <th>Options</th>
        </tr>
        {% for id in tododict %}
        <tr>
            <td>{{ tododict[id] }}</td>
            <td><a href="/delete/{{ id }}"><button class="btn btn-danger">Delete</button></a></td>
        </tr>
        {% endfor %}
        <tr>
            <form method="post" action="/add">
                <td><input type="text" name="newtodo" required></td>
                <td style="text-align: center;"><button type="submit" class="btn btn-primary">Add New</button></td>
            </form>
        </tr>
    </table>
</body>
</html>

CRUD 기능 구현

가장 중요한 부분은 CRUD 기능을 통한 데이터 조작입니다. database.json 파일을 이용해 데이터를 저장하고 읽어옵니다.

from fastapi import FastAPI, Request
from fastapi.responses import RedirectResponse
from fastapi.templating import Jinja2Templates
import json

app = FastAPI()
templates = Jinja2Templates(directory="templates")

@app.get("/")
async def root(request: Request):
    with open('database.json') as f:
        data = json.load(f)
    return templates.TemplateResponse("todolist.html", {"request": request, "tododict": data})

@app.get("/delete/{id}")
async def delete_todo(request: Request, id: str):
    with open('database.json') as f:
        data = json.load(f)
    del data[id]
    with open('database.json', 'w') as f:
        json.dump(data, f)
    return RedirectResponse("/", 303)

@app.post("/add")
async def add_todo(request: Request):
    with open('database.json') as f:
        data = json.load(f)
    formdata = await request.form()
    newdata = {str(len(data) + 1): formdata["newtodo"]}
    data.update(newdata)
    with open('database.json', 'w') as f:
        json.dump(data, f)
    return RedirectResponse("/", 303)

결론

FastAPI를 통해 웹 애플리케이션을 쉽게 개발할 수 있으며, 이 과정에서 API 및 웹 기술에 대한 깊은 이해를 얻을 수 있습니다. 이번 예제를 발전시켜 사용자 인증 시스템이나 더 복잡한 비즈니스 로직을 추가하여 강력한 웹 서비스를 구축할 수 있습니다.

이 블로그 검색

impact

💻 실전 프로그래밍 | FastAPI로 만드는 간단한 Todo List 앱

FastAPI란 무엇인가?

Todo List 애플리케이션 구축

프로젝트 설정

FastAPI 서버 구축

홈페이지 템플릿 작성

CRUD 기능 구현

결론

댓글

댓글 쓰기

가장 많이 본 글

[IOS] 아이폰순정에서 유료 및 크랙앱 이용방법

[Laravel] Jasperreport 적용 및 사용법..