[Django-08] 장고(Django)로 쉽고 빠르게 Todo 리스트 앱 만들기

코딩 코디네이터 2025. 4. 27. 12:00

2025. 4. 27. 12:00

장고(Django)로 쉽고 빠르게 Todo 리스트 앱 만들기 🚀

장고 초보자라면 이 글 하나만으로 Todo 앱 구현의 모든 것을 마스터할 수 있어요.
같이 만들어볼까요?

안녕하세요, 여러분!

오늘도 함께 성장하는 블로그, First Step입니다. 이번 포스트에서는 Django로 직접 Todo 리스트 웹 애플리케이션을 만드는 과정을 차근차근 알아볼 거예요.

저도 처음 Django를 접했을 때, 모델을 만들고 데이터베이스에 저장하는 과정이 헷갈렸던 기억이 나네요.

여러분은 그런 고민 없이 바로 이해하고 따라 할 수 있도록 쉬운 설명과 실습을 준비했습니다.

함께 손을 움직이며 직접 경험해 보면 어느새 CRUD 기능이 익숙해질 거예요!

1. TodoItem 모델 생성과 마이그레이션 🔧

모든 웹 애플리케이션에서 가장 중요한 부분 중 하나는 바로 데이터를 어떻게 다루는지, 즉 데이터 모델을 설정하는 방법이에요. Django에서는 이 모델을 데이터베이스와 자동으로 연동시켜주는 아주 편리한 ORM(Object-Relational Mapping) 기능이 있어서 여러분이 데이터베이스를 잘 몰라도 쉽게 데이터를 관리할 수 있어요.

📌 TodoItem 모델 정의하기

먼저 프로젝트 폴더 내의 앱 폴더로 들어가서 models.py 파일을 열고 다음과 같이 모델을 정의해볼게요.

from django.db import models

class TodoItem(models.Model):
    title = models.CharField(max_length=200)  # Todo 항목 제목
    content = models.TextField()              # Todo 항목 내용
    created_at = models.DateTimeField(auto_now_add=True)  # 생성된 날짜 및 시간 자동 기록

    def __str__(self):
        return self.title

title: 할 일의 제목을 입력하는 필드로 최대 200자까지 입력 가능해요.
content: Todo에 대한 상세 내용을 입력할 수 있는 텍스트 필드에요.
created_at: Todo 항목이 언제 만들어졌는지 자동으로 날짜와 시간이 저장되는 필드에요.

📌 모델 마이그레이션 실행하기

이제 이 모델을 데이터베이스에 실제로 반영해 볼 거예요. Django는 간단한 명령어 몇 줄만으로 이 작업을 자동으로 해줘서 참 편리해요. 터미널을 열고 프로젝트 폴더 내에서 다음 명령어를 차례대로 입력해 보세요.

python manage.py makemigrations
python manage.py migrate

위의 명령어를 실행하면, makemigrations는 모델에서의 변경 사항을 감지하고, 이를 기록하는 파일을 생성해요. 이후 migrate 명령어는 이 기록을 실제 데이터베이스에 적용하는 과정이랍니다.

✔️ 마이그레이션 확인하기

마이그레이션이 정상적으로 완료되었는지 확인하려면, Django Admin 페이지에 접속하거나 Django 쉘을 사용해서 모델 객체를 만들어보는 방법이 있어요. Admin 페이지에 접속하는 방법은 다음 단계에서 더 자세히 알아볼게요!

여기까지 따라 하셨다면 축하드려요! 🎉 이제 실제 데이터를 다룰 수 있는 모델이 준비됐습니다. 다음 단계에서는 이 데이터를 화면에 어떻게 출력할 수 있는지 알아볼게요!

2. Todo 항목 목록 조회 📋

모델이 준비됐으니, 이제 실제로 데이터베이스에 저장된 Todo 항목들을 화면에 출력해 볼까요? 목록 조회는 데이터베이스에 저장된 데이터를 불러와서 웹 페이지에 표시하는 기본적이면서도 꼭 필요한 작업이에요. Django에서는 이 과정을 아주 깔끔하게 처리할 수 있어요. 제가 처음 Django를 접했을 때 데이터가 화면에 출력되는 걸 보고 신기했던 기억이 나네요.

📌 목록 뷰(List View) 함수 만들기

먼저 앱 폴더 안에 있는 views.py 파일을 열고 아래 코드를 입력해서 데이터베이스에서 Todo 항목들을 불러오는 함수를 작성해볼게요.

from django.shortcuts import render
from .models import TodoItem

def todo_list(request):
    todos = TodoItem.objects.all().order_by('-created_at')  # 생성일 기준 최신 순으로 정렬
    context = {
        'todos': todos
    }
    return render(request, 'todo/todo_list.html', context)

TodoItem.objects.all(): 데이터베이스에 저장된 모든 Todo 항목을 불러오는 Django ORM 메서드예요.
order_by('-created_at'): 가장 최근에 추가된 Todo 항목이 맨 위에 오도록 생성일을 기준으로 정렬해요.

📌 URL 설정하기

다음으로는 이 뷰 함수를 웹에서 접근할 수 있도록 URL을 설정할 차례예요. urls.py 파일을 앱 폴더에 만들어서 다음 코드를 작성해주세요.

from django.urls import path
from . import views

urlpatterns = [
    path('', views.todo_list, name='todo_list'),
]

📌 템플릿 파일 만들기(todo_list.html)

이제 실제 화면에 Todo 항목을 출력하는 템플릿을 만들 거예요. 프로젝트 폴더 내 템플릿 폴더(templates/todo/)를 만들고 todo_list.html 파일을 추가해 아래와 같이 작성해 볼게요.

<!-- todo_list.html -->
<h1>Todo 목록</h1>
<ul>
    {% for todo in todos %}
        <li>{{ todo.title }} - {{ todo.created_at }}</li>
    {% empty %}
        <li>할 일이 없어요!</li>
    {% endfor %}
</ul>

이렇게 준비가 끝나면 브라우저에서 Django 서버를 실행하고 웹 페이지를 접속해 보세요. 이제 실제로 데이터베이스에 저장된 Todo 항목들이 화면에 예쁘게 나타나는 것을 확인할 수 있을 거예요. 🎉

다음 단계에서는 각 Todo 항목의 상세 정보를 볼 수 있는 뷰를 만드는 방법을 알아볼게요. 기대해 주세요!

3. 개별 Todo 항목 상세 보기 🔍

목록을 통해 Todo 항목들이 잘 보이는 것까지 성공했어요! 하지만 실제 앱에서는 각각의 항목을 클릭하면 더 자세한 내용을 볼 수 있어야겠죠? 이번 단계에서는 개별 Todo 항목을 클릭했을 때, 제목과 내용을 상세하게 보여주는 상세 보기(Detail View)를 만들어볼 거예요.

📌 상세 뷰(Detail View) 함수 만들기

먼저 views.py 파일에 다음과 같이 상세 뷰 함수를 추가해볼게요.

from django.shortcuts import render, get_object_or_404
from .models import TodoItem

def todo_detail(request, pk):
    todo = get_object_or_404(TodoItem, pk=pk)
    context = {
        'todo': todo
    }
    return render(request, 'todo/todo_detail.html', context)

get_object_or_404: 요청한 항목이 없을 경우 자동으로 404 에러를 표시하는 아주 편리한 Django 내장 함수예요.

📌 상세보기 URL 설정하기

이제 방금 만든 상세보기 뷰를 연결해 주기 위해 앱의 urls.py 파일에 다음 코드를 추가해 주세요.

from django.urls import path
from . import views

urlpatterns = [
    path('', views.todo_list, name='todo_list'),
    path('todo/<int:pk>/', views.todo_detail, name='todo_detail'),
]

URL에서 <int:pk> 부분은 각 Todo 항목의 고유한 ID(primary key)를 전달받는 부분이에요.

📌 상세보기 템플릿 파일(todo_detail.html) 작성하기

마지막으로 템플릿 폴더 내에 todo_detail.html을 만들어 다음과 같이 작성해주세요.

<!-- todo_detail.html -->
<h1>{{ todo.title }}</h1>
<p>{{ todo.content }}</p>
<p>생성일: {{ todo.created_at }}</p>
<a href="{% url 'todo_list' %}">목록으로 돌아가기</a>

이제 목록 페이지에서 각 Todo 항목을 클릭하면, 해당 Todo의 상세 정보 페이지로 이동하는 기능이 잘 동작할 거예요! 🎯

다음 단계는 Todo를 생성하는 방법을 알아보는 단계예요. 계속해서 함께 달려볼까요? 🏃‍♂️💨

4. ModelForm으로 새로운 Todo 추가하기 📝

지금까지 Todo 목록을 조회하고 개별 항목의 상세 정보까지 확인했어요. 이제는 웹 페이지에서 직접 새로운 Todo 항목을 추가하는 기능을 만들어볼 거예요. 이때 Django의 ModelForm을 사용하면 정말 쉽게 입력 폼을 만들 수 있답니다.

📌 ModelForm 정의하기

앱 디렉토리 안에 forms.py 파일을 만들고 아래처럼 작성해볼게요.

from django import forms
from .models import TodoItem

class TodoForm(forms.ModelForm):
    class Meta:
        model = TodoItem
        fields = ['title', 'content']

fields: 폼에서 입력 받을 필드를 지정해요. 여기서는 제목과 내용만 입력받아요.

📌 생성(Create) 뷰 만들기

이제 실제 폼을 보여주고 입력값을 처리할 뷰를 만들어볼까요? views.py에 추가합니다.

from django.shortcuts import render, redirect
from .forms import TodoForm

def todo_create(request):
    if request.method == 'POST':
        form = TodoForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('todo_list')
    else:
        form = TodoForm()
    return render(request, 'todo/todo_form.html', {'form': form})

📌 URL 설정하기

URL 패턴도 추가해줘야겠죠? 앱의 urls.py에 아래 코드를 추가해주세요.

path('todo/new/', views.todo_create, name='todo_create'),

📌 입력 폼 템플릿(todo_form.html) 작성하기

폼 화면을 구성하는 템플릿을 만들어 볼게요. 아래와 같이 templates/todo/todo_form.html을 작성하세요.

<!-- todo_form.html -->
<h1>새로운 Todo 추가하기</h1>

<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">추가하기</button>
</form>

<a href="{% url 'todo_list' %}">목록으로 돌아가기</a>

✔️ 폼 데이터 확인 및 테스트하기

이제 서버를 실행하고 브라우저에서 /todo/new/ 주소로 접속해보세요. 간단한 입력 폼이 잘 나오고, 내용을 입력한 후 추가 버튼을 클릭하면 Todo 항목이 성공적으로 추가되는 것을 볼 수 있어요. 🎉

다음 단계에서는 Todo 항목의 수정 및 삭제 기능을 함께 만들어 볼게요. 계속 함께 가요! 🚀

5. Todo 수정 및 삭제 기능 구현 ✏️🗑️

이제 Todo 앱에서 꼭 필요한 기능인 항목 수정과 삭제 기능을 구현할 차례입니다. 저는 처음 Django를 공부할 때, 이 기능들을 구현하고 나니 정말 뿌듯했던 기억이 있어요. 여러분도 이 단계만 따라 하면 손쉽게 구현할 수 있을 거예요!

📌 수정(Update) 기능 구현하기

views.py 파일에 다음과 같이 수정 뷰를 추가합니다.

from django.shortcuts import render, get_object_or_404, redirect
from .models import TodoItem
from .forms import TodoForm

def todo_update(request, pk):
    todo = get_object_or_404(TodoItem, pk=pk)
    if request.method == 'POST':
        form = TodoForm(request.POST, instance=todo)
        if form.is_valid():
            form.save()
            return redirect('todo_detail', pk=pk)
    else:
        form = TodoForm(instance=todo)
    return render(request, 'todo/todo_form.html', {'form': form})

📌 삭제(Delete) 기능 구현하기

이번에는 삭제 기능을 구현해 볼까요? 간단한 삭제 확인 화면을 추가해 사용자가 실수로 항목을 삭제하지 않도록 해줄게요.

def todo_delete(request, pk):
    todo = get_object_or_404(TodoItem, pk=pk)
    if request.method == 'POST':
        todo.delete()
        return redirect('todo_list')
    return render(request, 'todo/todo_confirm_delete.html', {'todo': todo})

📌 URL 추가하기

수정과 삭제를 위한 URL을 앱의 urls.py에 추가하세요.

path('todo/<int:pk>/edit/', views.todo_update, name='todo_update'),
path('todo/<int:pk>/delete/', views.todo_delete, name='todo_delete'),

📌 삭제 확인 템플릿 작성하기

삭제 확인을 위한 템플릿 todo_confirm_delete.html을 작성하세요.

<!-- todo_confirm_delete.html -->
<h1>정말 삭제할까요?</h1>
<p>삭제할 Todo: {{ todo.title }}</p>

<form method="post">
    {% csrf_token %}
    <button type="submit">네, 삭제할게요</button>
    <a href="{% url 'todo_detail' todo.pk %}">취소</a>
</form>

이제 Todo 항목 상세 페이지에서 수정 및 삭제 링크를 추가해 테스트해보세요. 모든 기능이 정상적으로 작동하면 드디어 기본적인 CRUD 기능이 완성된 거예요! 🎉

다음 마지막 단계에서는 개발한 전체 기능을 종합적으로 테스트하고 마무리할게요. 거의 다 왔습니다! 🥳

6. 개발한 Todo 앱의 CRUD 동작 테스트 ✅

자, 여러분! 우리가 지금까지 차근차근 만든 Todo 앱의 모든 CRUD(Create, Read, Update, Delete) 기능이 제대로 동작하는지 마지막 테스트를 해볼 시간이에요. 솔직히 제가 Django를 배우면서 이 순간이 가장 설렜던 것 같아요. 직접 만든 기능들이 제대로 동작하는 걸 볼 때의 성취감, 다들 느껴보셨죠? 😄

📌 1단계: Todo 추가 기능 테스트

브라우저에서 /todo/new/ 주소에 접속해 새로운 Todo 항목을 추가해보세요.
입력한 항목이 목록 페이지에서 정상적으로 표시되는지 확인해보세요.

📌 2단계: 목록 및 상세 조회 기능 테스트

메인 페이지(/)에서 목록이 잘 나타나는지 확인하세요.
목록에서 항목을 클릭해 상세보기 페이지가 잘 열리는지 확인해보세요.

📌 3단계: Todo 수정 기능 테스트

상세보기 페이지에서 "수정하기" 버튼 또는 URL(/todo/{pk}/edit/)을 통해 Todo 항목을 수정해보세요.
수정한 내용이 정확히 반영되었는지 확인하세요.

📌 4단계: Todo 삭제 기능 테스트

상세보기 페이지에서 "삭제하기" 버튼 또는 URL(/todo/{pk}/delete/)로 항목 삭제를 시도하세요.
삭제 후 메인 페이지에서 항목이 사라졌는지 확인하세요.

이 모든 기능이 잘 작동했다면 정말 훌륭합니다! 👏

여러분은 Django를 활용해 간단하면서도 강력한 CRUD 웹 애플리케이션을 성공적으로 완성했어요. 스스로를 칭찬해 주세요! 😄

마무리하며 🎯

지금까지 저와 함께 Django를 사용해서 Todo 리스트 애플리케이션의 모델 정의부터 CRUD 기능 구현까지 차근차근 살펴보았어요. 처음 Django를 접했을 때 복잡하고 어렵게 느껴졌던 부분들이, 이렇게 하나씩 실습하면서 익숙해지셨다면 정말 기쁠 것 같아요. 여러분이 이번 실습을 통해 배운 내용을 응용하면 더 다양한 웹 애플리케이션도 손쉽게 개발할 수 있을 거예요.

그럼 다음에도 더 유익하고 재미있는 내용으로 찾아올게요. 끝까지 함께 해주셔서 정말 감사합니다! 😍

📌 이번 실습을 통해 배운 것 요약

Django 모델 생성과 마이그레이션 방법
Django 뷰 함수 및 템플릿을 활용한 목록, 상세 조회 방법
ModelForm을 이용한 데이터 입력 및 유효성 검사 방법
Django ORM을 사용한 데이터 수정 및 삭제 기능 구현

'Python > Python 웹프로그래밍' 카테고리의 다른 글

[Django-07] CRUD 구현과 Todo 앱 개발 (0)	2025.04.26
[Django-06] Django 모델 생성과 데이터 출력 완전 정복 (0)	2025.04.22
[Django-05] Django데이터베이스 연동과 ORM 이해 (0)	2025.04.21
[Django-04] 첫 Django 앱 생성과 간단한 페이지 구현 (0)	2025.04.21
[Django-03] Django 앱 구조와 URL·뷰·템플릿 완전 정복 (0)	2025.04.20

firstcodingNet

[Django-08] 장고(Django)로 쉽고 빠르게 Todo 리스트 앱 만들기

장고(Django)로 쉽고 빠르게 Todo 리스트 앱 만들기 🚀

목차

1. TodoItem 모델 생성과 마이그레이션 🔧

📌 TodoItem 모델 정의하기

📌 모델 마이그레이션 실행하기

✔️ 마이그레이션 확인하기

2. Todo 항목 목록 조회 📋

📌 목록 뷰(List View) 함수 만들기

📌 URL 설정하기

📌 템플릿 파일 만들기(todo_list.html)

3. 개별 Todo 항목 상세 보기 🔍

📌 상세 뷰(Detail View) 함수 만들기

📌 상세보기 URL 설정하기

📌 상세보기 템플릿 파일(todo_detail.html) 작성하기

4. ModelForm으로 새로운 Todo 추가하기 📝

📌 ModelForm 정의하기

📌 생성(Create) 뷰 만들기

📌 URL 설정하기

📌 입력 폼 템플릿(todo_form.html) 작성하기

✔️ 폼 데이터 확인 및 테스트하기

5. Todo 수정 및 삭제 기능 구현 ✏️🗑️

📌 수정(Update) 기능 구현하기

📌 삭제(Delete) 기능 구현하기

📌 URL 추가하기

📌 삭제 확인 템플릿 작성하기

6. 개발한 Todo 앱의 CRUD 동작 테스트 ✅

📌 1단계: Todo 추가 기능 테스트

📌 2단계: 목록 및 상세 조회 기능 테스트

📌 3단계: Todo 수정 기능 테스트

📌 4단계: Todo 삭제 기능 테스트

마무리하며 🎯

📌 이번 실습을 통해 배운 것 요약

'Python > Python 웹프로그래밍' 카테고리의 다른 글

+ Recent posts

티스토리툴바