HTML form element를 통해 사용자와 애플리케이션 간의 상호작용(데이터를 보내고 가져오는 방법)을 이해해보자.
throw라는 함수를 통해 데이터를 요청하고 catch 라는 함수를 통해 데이터를 가져오는 연습을 해보자!

---

Client & Server architecture

• 웹은 다음과 같이 가장 기본적으로 클라이언트-서버 아키텍처를 사용한다.
  • 클라이언트(일반적으로 웹 브라우저)가 서버에 요청을 보내고, 서버는 클라이언트의 요청에 응답한다.
• 클라이언트 측에서 HTML form은 HTTP 요청을 서버에 보내는 가장 편리한 방법이다.
• 이를 통해 사용자는 HTTP 요청에서 전달할 정보를 제공할 수 있다.

---

Sending form data (Client)

HTML < form > element

• 데이터가 전송되는 방법을 정의
• 웹에서 사용자 정보를 입력하는 여러 방식(text, button, submit 등)을 제공하고, 사용자로부터 할당된 데이터를 서버로 전송하는 역할을 담당한다.
• “데이터를 어디(action)로 어떤 방식(method)으로 보낼지”
• 핵심 속성 : action, method

HTML form’s attributes

action

• 입력 데이터가 전송될 URL을 지정
• 데이터를 어디로 보낼 것인지 지정하는 것이며 이 값은 반드시 유효한 URL이어야 한다.
• 만약 이 속성을 지정하지 않으면 데이터는 현재 form이 있는 페이지의 URL로 보내진다.

method

• 데이터를 어떻게 보낼 것인지 정의
• 입력 데이터의 HTTP request methods를 지정한다.
• HTML form 데이터는 오직 2가지 방법으로만 전송할 수 있는데 바로 GET 방식과 POST 방식이다.

HTML < form > element 작성해보기

# urls.py

urlpatterns = [
		...,
		path('throw/', views.throw),
]

# articles/views.py

def throw(request):
		return render(request, 'throw.html')

<!-- templates/articles/throw.html -- >

{% extends 'base.html' %}

{% block content %}
	<h1>Throw</h1>
	<form action='#' method='#'>
	</form>
{% endblock content %}

HTML < input > element

• 사용자로부터 데이터를 입력 받기 위해 사용
• “type” 속성에 따라 동작 방식이 달라진다.
  • input 요소의 동작 방식은 type 특성에 따라 현격히 달라지므로 각각의 type은 별도로 MDN 문서에서 참고하여 사용하도록 하자.
  • type을 지정하지 않은 경우, 기본값은 ‘text’ 이다.
• 핵심 속성 : name

HTML input’s attribute

name

• form을 통해 데이터를 제출(submit)했을 때 name 속성에 설정된 값을 서버로 전송하고, 서버는 name 속성에 설정된 값을 통해 사용자가 입력한 데이터 값에 접근할 수 있다.
• 서버에 전달하는 파라미터(name은 key, value는 value)로 매핑하는 것이다.

HTML < input > element 작성

<!-- articles/templates/throw.html -- >

{% extends 'base.html' %}

{% block content %}
	<h1>Throw</h1>
	<form action='#' method='#'>
			<label for="message">Throw</label>
			<input type="text" id="message" name="message">
			<input type="submit">
	</form>
{% endblock content %}

HTTP request methods

• HTTP
  • HTML 문서와 같은 리소스(데이터, 자원)들을 가져올 수 있도록 해주는 프로토콜(규칙, 규약)
• 웹에서 이루어지는 모든 데이터 교환의 기초가 된다.
• HTTP는 주어진 리소스가 수행할 원하는 작업을 나타내는 request methods를 정의
• 자원에 대한 행위(수행하고자 하는 동작)를 정의
• 주어진 리소스(자원)에 수행하길 원하는 행동을 나타낸다.
• HTTP Method 예시
  • GET, POST, PUT, DELETE
  • 이 글에서는 GET 에 대해서만 알아보겠다.

GET

• 서버로부터 정보를 조회하는 데 사용
  • 즉, 서버에게 리소스를 요청하기 위해 사용
• 데이터를 가져올 때만 사용해야 한다.
• 데이터를 서버로 전송할 때, Query String Parameters를 통해 전송
  • 데이터는 URL에 포함되어 서버로 보내진다.

GET 메서드 작성

• GET과 get 모두 대소문자 관계없이 동일하게 동작하지만 명시적 표현을 위해 대문자 사용을 권장한다.
• 데이터를 입력 후 submit 버튼을 누르고 URL의 변화를 확인한다.

<!-- articles/templates/throw.html -- >

{% extends 'base.html' %}

{% block content %}
	<h1>Throw</h1>
	<form action='#' method='GET'>
			<label for="message">Throw</label>
			<input type="text" id="message" name="message">
			<input type="submit">
	</form>
{% endblock content %}

Query String Parameters

• 사용자가 입력 데이터를 전달하는 방법 중 하나로, url 주소에 데이터를 파라미터를 통해 넘기는 것

• 이러한 문자열은 앰퍼샌드(&)로 연결된 key=value 쌍으로 구성되며 기본 URL과 물음표(?)로 구분된다.

  • 예시 : http://host:port/path?key=vlaue&key=value

• Query String 이라고도 한다.

• 정해진 주소 이후에 물음표를 쓰는 것으로 Query String이 시작함을 알린다.

• key=value로 필요한 파라미터의 값을 적다.

  • = 로 key와 value가 구분된다.

• 파라미터가 여러 개일 경우 ‘&’ 를 붙여 여러개의 파라미터를 넘길 수 있다.

---

Retrieving the data (Server)

• ‘데이터 가져오기(검색하기)’
• 서버는 클라이언트로 받은 key-value 쌍의 목록과 같은 데이터를 받게 된다.
• 이러한 목록에 접근하는 방법은 사용하는 특정 프레임워크에 따라 다르다.
• 우리는 Django 프레임 워크에서 어떻게 데이터를 가져올 수 있을지 알아볼 것이다.
  • throw가 보낸 데이터를 catch에서 가져오기

Catch 작성

# urls.py

urlpatterns = [
		...,
		path('catch/', views.catch),
]

# articles/views.py

def catch(request):
		return render(request, 'catch.html')

<!-- articles/templates/catch.html -- >

{% extends 'base.html' %}

{% block content %}
	<h1>Catch</h1>
	<h2>데이터를 받고</h2>
	<a href='/throw/'>다시 던지러</a>
{% endblock content %}

action 작성

• throw 페이지에서 form의 action 부분을 마저 작성하고 데이터를 보낸다.
• 실습 편의를 위해 index 페이지에 throw 하이퍼링크를 작성한다.

<!-- articles/templates/throw.html -- >

{% extends 'base.html' %}

{% block content %}
	<h1>Throw</h1>
	<form action='/catch/' method='GET'>
			<label for="message">Throw</label>
			<input type="text" id="message" name="message">
			<input type="submit">
	</form>
{% endblock content %}

<!-- articles/templates/index.html -- >

{% extends 'base.html' %}

{% block content %}
	...
	<a href='/throw/'>throw</a>
{% endblock content %}

데이터 가져오기

• catch 페이지가 잘 응답되어 출력됨을 확인하였다.
• 그런데 throw 페이지의 form이 보낸 데이터는 어디에 들어있는걸까?
  • catch 페이지의 url 확인 http://127.0.0.1:8000/catch/?message=데이터
  • GET method로 보내고 있기 때문에 데이터를 서버로 전송할 때 Query String Parameters를 통해 전송
  • 즉, 데이터는 URL에 포함되어 서버로 보내진다.
• 그러면 우리가 작성해야 하는 view 함수에서는 해당 데이터에 어떻게 접근 가능할까?
• “모든 요청 데이터는 view 함수의 첫번째 인자 request에 들어있다!”

request 객체

• print를 통해 살펴보자

# articles/views.py
def catch(request):
  print(request)
  print(type(request))
  print(request.GET)
  print(request.GET.get('message'))
  return render(request, 'catch.html')

• 출력 결과

catch 작성 마무리

# articles/views.py

def catch(request):
		message = request.GET.get('message')
		context = {
				'message' : message,
		}
		return render(request, 'catch.html', context)

<!-- templates/articles/catch.html -- >

{% extends 'base.html' %}

{% block content %}
	<h1>Catch</h1>
	<h2>{{message}}를 받고</h2>
	<a href='/throw/'>다시 던지러</a>
{% endblock content %}

---

📍 요약

1. 페이지가 요청되면 Django는 요청에 대한 메타데이터를 포함하는 HttpRequest object를 생성한다.
2. 그리고 해당하는 적절한 view 함수를 로드하고 HttpRequest를 첫번째 인자로 전달한다.
3. 마지막으로 view 함수는 HttpResponse object를 반환한다.