Django(장고) ToDo List 기반 다지기

장현웅·2023년 9월 3일

ToDo 리스트 구현을 위해서 일단 사용자의 입력값을 서버로 보내는 것을 연습해보려고 한다.

[todo_add.html]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>알렉스의 ToDo List</title>
</head>
<body>
  <h1> Alex's ToDo List </h1>
  <form action="/todo/" method="POST">
  	{% csrf_token %}
  	<label>할 일 추가</label>
    <input type="text">
    <button type="submit"> 추가 </button>
  </form>
</body>
</html>

알렉스의 ToDo List
Alex's ToDo List
할 일 추가 추가

위 코드의 <form></form>태그는 HTML 폼(form)을 생성하기 위한 Django 탬플릿 언어의 탬플릿 태그 중 하나이다. HTML 폼(form)은 웹 페이지에서 클라이언트로부터 정보를 입력받거나 전송하는데 사용되는 웹 요소이다.여기를 참고. (HTML 폼 참고)

action 속성은 Form이 submit될 때 처리가 필요한 데이터가 전송될 URL 주소이고 Method 속성은 HTTP 요청 Method이다.

이 떄, action = '/todo/'에 구분자/을 앞쪽에 붙여주지 않으면

http://127.0.0.1:8000todo/
이렇게 현재 주소 뒤에 붙게 된다.

{% csrf_token %} (CSRF 토큰)

Django 템플릿에서 사용되는 템플릿 태그 중 하나로, CSRF(Cross-Site Request Forgery) 공격으로부터 보호하기 위한 목적으로 사용된다.
웹 어플리케이션의 폼(form)을 통해 데이터를 전송할 때 필요한 보안 토큰으로 POST 요청에 꼭 필요하다.

CSRF(Cross-Site Request Forgery) 공격 : 사용자의 인증 정보를 가로채어 악의적인 요청을 보내는 공격

CSRF 토큰 추가 안했을 경우 에러페이지

이제 이 화면을 클라이언트가 요청했을 때 보여주기 위해 `요청 URL 패턴`과 `비교할 url 경로`와 이것과 연결할 `View함수`도 `urls.py`에 추가해준다.

[urls.py]

from django.contrib import admin
from django.urls import path
from . import views


urlpatterns = [
    path('admin/', admin.site.urls),
    path('ping/', views.pingpong),
    path('index/', views.index),
    path('todo/', views.todo),
    path('getdata/', views.getdata),
]

이제 View 함수를 views.py에서 정의한다.

from django.http import HttpResponse


def todo(request):
    return render(request, 'todo_add.html')


def getdata(request):
    return HttpResponse('POST 완료!')

이제 http://127.0.0.1:8000/todo/로 들어가서 POST 요청을 해보자.

추가 버튼을 누르면 응답페이지가 나온다.

POST가 잘 되었는지 터미널에서 확인할 수도 있다. 클라이언트가 제공한 input 요소 안의 정보를 HTTP POST메소드와 get()함수로 터미널에 프린트해보자.
[todo_add.html/form 태그]

<form action="/getdata/" method="POST">
  {% csrf_token %}
  <label>할 일 추가</label>
  <input type="text" name="added_todo1">
  <input type="text" name="added_todo2">
  <input type="text" name="added_todo3">
  <button id = 'post_btn' type="submit"> 추가 </button>
</form>

[views.py]

from django.http import HttpResponse


def todo(request):
    return render(request, 'todo_add.html')


def getdata(request):
	print(request.POST.get('added_todo1')
    print(request.POST.get('added_todo2')
    print(request.POST.get('added_todo3')
    return HttpResponse('POST 완료!')