Django: Form과 Input으로 데이터 주고받기

01. 데이터 주기 (Form과 input)

Form과 input을 이용한 데이터 전송 이해하기

HTML에서 Form과 Input 요소를 활용하면 클라이언트가 데이터를 서버로 전송할 수 있습니다. 아래는 이를 구현하고 이해하기 위한 단계별 안내입니다.

Step 1: 기본 설정

urls.py에 경로 추가

path("data-throw/", views.data_throw),

views.py에 함수 추가

def data_throw(request):
    return render(request, "data_throw.html")

templates 폴더에 data_throw.html 생성

{% extends 'base.html' %}

{% block content %}
    <h1>Data Throw</h1>
{% endblock content %}

Step 2: Form 작성하기

기본 Form 태그 생성

<form action="#" method="#">
</form>

Input 요소 추가

<form action="#" method="#">
    <input type="text" name="message">
</form>

제출 버튼과 Label 추가

<form action="#" method="#">
    <label for="message">메세지 입력</label>
    <input type="text" id="message" name="message">
    <button type="submit">전송</button>
</form>

• label for와 input id는 동일해야 합니다. 이를 통해 label을 클릭해도 input이 선택됩니다.
• 버튼의 type 속성을 submit으로 설정해야 전송 기능이 작동합니다.

클라이언트에서 서버로 데이터 전송 이해하기

예시: 회원가입

과거에는 미리 정의된 형식의 데이터를 입력하고 버튼을 눌러 데이터를 전송했습니다. 현대 웹에서도 이러한 방식은 기본적인 데이터 전송 메커니즘으로 사용됩니다.

HTML Form 요소

HTML Form은 유저로부터 데이터를 입력받고 서버로 전송하는 역할을 합니다.

• 주요 속성
  • action: 데이터를 전송할 URL을 지정합니다. 비워두면 현재 페이지 URL로 전송됩니다.
  • method: 데이터를 전송하는 방식(HTTP method)을 지정합니다. 기본적으로 GET 또는 POST 방식을 사용합니다.

<form action="/submit/" method="post">
    <label for="username">사용자 이름:</label><br>
    <input type="text" id="username" name="username" required><br>

    <label for="email">이메일 주소:</label><br>
    <input type="email" id="email" name="email" required><br>

    <label for="password">비밀번호:</label><br>
    <input type="password" id="password" name="password" required><br>

    <input type="submit" value="가입하기">
</form>

Action과 Method

1. action

• 데이터를 전송할 URL을 지정합니다.
• 설정하지 않으면 현재 페이지 URL로 데이터가 전송됩니다.

2. method

• 데이터를 전송하는 방식(HTTP Request Method)을 지정합니다.
• HTML Form에서는 GET 또는 POST 방식이 주로 사용됩니다.

HTTP Methods

HTTP란?

• 하이퍼텍스트 전송 프로토콜(Hyper Text Transfer Protocol)로, 웹에서 데이터를 주고받는 약속입니다.
• 요청(request)와 응답(response)으로 이루어진 통신 방식입니다.

주요 HTTP Methods

• GET: 데이터를 URL에 포함시켜 전송합니다.
• POST: 데이터를 HTTP 메시지 본문에 포함시켜 전송합니다.

GET 방식 예제

<form action="#" method="GET">
    <label for="message">메세지 입력</label>
    <input type="text" id="message" name="message">
    <button type="submit">전송</button>
</form>

• GET 방식에서는 URL에 데이터가 쿼리스트링(Query String) 형태로 추가됩니다.
• 예: https://example.com/?message=Hello

Input 요소와 Name 속성

Input 요소

• Form에서 사용자 입력을 받기 위해 사용됩니다.
• type 속성에 따라 입력 방식이 달라집니다.

Name 속성

• 서버에 데이터를 전달할 때 사용됩니다.
• 서버는 name 속성을 키(key)로 사용하여 데이터를 처리합니다.
• 예: name="message"로 설정한 경우, 서버는 message 키로 데이터를 식별합니다.

쿼리스트링(Query String Parameter)

• URL의 ? 뒤에 데이터를 추가하여 전송하는 방식입니다.
• 형식: ?key=value&key2=value2

<form action="/submit" method="GET">
    <label for="search">검색어:</label>
    <input type="text" id="search" name="query">
    <button type="submit">검색</button>
</form>

전송 시 URL 예: https://example.com/submit?query=test

02. 데이터 받기

클라이언트에서 서버로 데이터를 보내고, 서버에서 데이터를 받아 처리하기

이제 클라이언트에서 전송된 데이터를 서버에서 받아 화면에 보여주는 방법을 살펴보겠습니다.

Step 1: 기본 설정

data_catch.html 생성

{% extends 'base.html' %}

{% block content %}
    <h1>Data Catch</h1>

    <div>
        <h2>Current Data</h2>
        <p>Current data is: ???</p>
    </div>

{% endblock content %}

urls.py에 경로 추가

path("data-catch/", views.data_catch),

views.py에 함수 추가

def data_catch(request):
    return render(request, "data_catch.html")

Step 2: Form action 설정

이제 데이터를 받을 페이지를 설정합니다. 데이터를 보내는 Form의 action 속성을 수정합니다.

data_throw.html 수정

{% extends 'base.html' %}

{% block content %}
    <h1>Data Throw</h1>

    <form action="/data-catch/" method="GET">
        <label for="message">메세지 입력</label>
        <input type="text" id="message" name="message">
        <button type="submit">전송</button>
    </form>

{% endblock content %}

• action: 데이터를 전송할 URL을 지정합니다.
• method: GET 방식으로 데이터를 전송합니다.

Step 3: 데이터를 View에서 처리

전송된 데이터를 받아 템플릿에 넘겨줍니다.

views.py 수정

def data_catch(request):
    message = request.GET.get("message")
    context = {
        "data": message,
    }
    return render(request, "data_catch.html", context)

• request.GET.get("message"): 클라이언트에서 전송된 데이터를 가져옵니다.
• context: 데이터를 템플릿으로 넘기기 위한 딕셔너리입니다.

data_catch.html 수정

{% extends 'base.html' %}

{% block content %}
    <h1>Data Catch</h1>

    <div>
        <h2>Current Data</h2>
        <p>Current data is: {{ data }}</p>
    </div>

{% endblock content %}

• ``: View에서 넘긴 데이터를 표시합니다.

Step 4: 페이지 간 이동 추가

서버에서 데이터를 받은 후 다시 데이터를 입력할 페이지로 이동할 수 있도록 링크를 추가합니다.

data_catch.html에 하이퍼링크 추가

{% extends 'base.html' %}

{% block content %}
    <h1>Data Catch</h1>

    <div>
        <h2>Current Data</h2>
        <p>Current data is: {{ data }}</p>
    </div>

    <a href="/data-throw/">다시 데이터 보내러가기</a>

{% endblock content %}

• <a> 태그: 다른 페이지로 이동할 수 있는 링크를 제공합니다.
• href: 이동할 URL을 설정합니다.

Step 5: HTTP Request와 Django의 처리 과정

HTTP Request

• 클라이언트에서 서버로 데이터를 전송하는 요청입니다.
• Django에서는 HttpRequest 객체를 통해 요청 데이터를 처리합니다.

Django의 처리 과정

1. HttpRequest 객체 생성: 클라이언트 요청이 들어오면 Django가 이를 객체로 생성합니다.
2. View 함수 호출: URL에 매핑된 View 함수의 첫 번째 인자로 HttpRequest 객체가 전달됩니다.
3. HttpResponse 객체 반환: View 함수는 처리 결과를 HttpResponse로 반환합니다.

Request 데이터 확인

• 요청 데이터를 디버깅하려면 print(request.GET)으로 확인할 수 있습니다.
• request.GET: QueryDict 객체로, URL의 쿼리스트링 데이터를 저장합니다.

Step 6: 완성된 기능 테스트

1. /data-throw/ 페이지에서 데이터를 입력 후 전송 버튼 클릭.
2. /data-catch/ 페이지에서 전송된 데이터 확인.
3. 다시 데이터 입력 페이지로 이동하여 반복 테스트.

추가 학습

• QueryDict: Django의 데이터 전송 처리를 위한 특수 객체입니다.
  • 일반 딕셔너리와 비슷하지만, 중복 키를 처리하는 기능이 추가되어 있습니다.
• 공식 문서 확인: Django 공식 문서