HTML FORM
나는 HTML FORM에 대해 잘 모르니, 이에 대해 먼저 알아보자.
HTML FORM은 사용자로부터 데이터를 입력받기 위한 HTML 태그다. 데이터를 입력받아 웹 서버로 전달하거나, JavaScript로 처리할 수 있다. <form> 태그는 주로 다음과 같은 요소들과 함께 사용된다.
- 입력 필드 (<input>, <textarea>, <select>, 등)
- 버튼 (<button>, <input type="submit">, 등)
- 레이블 (<label>)
FORM의 주요 속성은 다음과 같다.
- action : 데이터를 전송할 서버의 URL을 지정.
- method : 데이터를 전송하는 방식 지정 (GET 또는 POST).
- GET : URL에 데이터를 쿼리 문자열로 추가해서 전송.
- POST : 데이터를 요청 본문(body)에 포함해서 전송.
FORM은 보안, 서버 연동 방식 등에 따라 다양한 설정이 가능하며, JavaScript와 연동하여 데이터를 실시간으로 처리할 수도 있다. 서버 쪽 코드와 함께 사용하면 더 많은 기능을 구현할 수 있다.
이제 HTML FORM에서 실제로 데이터를 주고 받는 부분에 대해 배울 것이다.
<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>Form은 이런 식으로 돼있다. <form> 태그에 action과 method 속성이 들어 있고, 안쪽에 실제로 입력받는 input과 이 input에 대한 label 태그가 달려있다. label 태그의 for는 input의 id값과 일치해야 한다.
데이터를 어디로(action) 어떤 방식(method)를 이용해서 보낼지 결정하는 속성
웹 상에서 어디로에 해당하는 것은 URL이므로, action 속성에는 URL을 지정해준다. 이를 지정하지 않거나 빈 문자열("")로 지정하면, 현재 내가 들어온 URL로 다시 데이터를 전송한다. method는 action에 지정된 곳으로 데이터를 전송할 때, 데이터를 전송하는 방식을 지정해줄 수 있다. HTML FORM은 GET 또는 POST 방식으로만 전송이 가능하다.
실습
이제 실습해보자. data-throw/ 로 들어오면 아래의 data-throw.html 을 보여주는 페이지를 작성해준다.
이렇게 만들어준 html 파일의 코드는 아래와 같다.
{% extends 'base.html' %}
{% block content %}
<h1>Data Throw</h1>
{% endblock content %}여기에 이제 form을 작성해줄 것이다. 지금은 action과 method는 비워줄 것이다. ""라고 써도 되고, 비워놨다는 의미로 "#"이라고 써도 된다.
{% extends 'base.html' %}
{% block content %}
<h1>Data Throw</h1>
<form action="" method="">
<input type="text">
</form>
{% endblock content %}input 태그로 입력할 수 있는 부분을 만들어주었다. 여기까지 하고 새로고침하면 아래와 같이 화면이 나온다.
이제 label 도 달아주자.
{% extends 'base.html' %}
{% block content %}
<h1>Data Throw</h1>
<form action="" method="">
<label for="my-data">데이터 입력 : </label>
<input type="text" id="my-data">
</form>
{% endblock content %}label의 for는 input의 id와 같아야 한다. 사실, 달라도 동작하는 데는 아무런 지장이 없다. 그러나 일치시키게 되면, 모바일 기기와 같은 작은 스마트폰에서 저런 작은 입력 칸을 클릭하는 게 불편한데, label을 클릭해도 입력 칸에 입력할 수 있게 된다. 즉, label과 input을 binding해주기 위해서 일치시키는 것이다. 새로고침하면 화면이 아래와 같아진다.
이제 데이터를 입력한 후, 전송할 수 있도록 전송 버튼을 만들어주자.
<label for="my-data">데이터 입력 : </label>
<input type="text" id="my-data">
<button type="submit">전송</button>button의 type은 꼭 submit으로 해야, 이 버튼을 눌렀을 때 Form의 데이터를 전송하는 기능을 하게 된다.
* input 태그에 대해서 알아보고 가자.(나는 html을 잘 모르니까.)
input 태그는 form에서 사용자의 입력을 받기 위해 사용한다. type 속성에 따라 입력 동작 방식이 달라지는데, 아무 type도 지정하지 않으면 기본으로 type=text로 인식된다. type의 예로는 password, date 등이 있다.
input 태그의 데이터 전송에서의 핵심 속성은 name이다. name으로 서버에 데이터를 전달하고, 서버는 name을 보고 데이터를 판단한다. form을 제출(submit)하면 name속성에 설정된 값이 서버로 전송된다. 또, 서버에서는 name속성을 사용하여 전송받은 값에 접근할 수 있게 된다. name 속성의 값이 key가 되고, 사용자가 입력한 값이 value가 되어 전송된다. 즉, name이라는 것이 서버에서는 접근할 수 있는 key 값이 되는 것이다.
보통은 name도 id와 for와 일치시켜서 쓴다.
<label for="message">데이터 입력 : </label>
<input type="text" id="message" name="message">여기까지 하고 실행시키면 화면이 아래와 같이 나온다.
내가 입력 창에 01012345678을 입력하고 전송 버튼을 누르자, 주소창에 ?message=01012345678이라는 것이 생겼다. input 태그의 name 속성에서 온 값이 바로 message인 것이다. name 속성을 지우면, 입력 창에 데이터를 입력하고 전송 버튼을 눌러도, 전송된 데이터가 없기 때문에 주소창에 입력된 데이터가 보이지 않게 된다. 즉, name이 있어야 우리는 데이터를 전송할 수 있게 되는 것이다.
HTTP Methods
먼저 HTTP에 대해 알아보자. 하이퍼텍스트 전송 프로토콜 (Hyper Text Transfer Protocol)의 약자다. 우리가 여러가지 리소스를 보내고 받을 때 사용하는 프로토콜 (통신규약) == 약속이 있다. 엄청나게 많은 약속들이 있고, 그중에서 하나가 HTTP다. 요청(request)와 응답(response)로 이루어지는 통신으로, 웹에서 이루어지는 데이터 교환의 기초라고 할 수 있다.
데이터를 전송하거나 요청할 때, 이 요청이 어떤 요청인 지를 Methods로 표현한다. 특정 자원, 즉 내가 원하는 것(예 : 구글 홈페이지에 접속하는 것(구글 홈페이지가 들어있는 html 파일 주세요.) 이 때의 구글 홈페이지 html을 리소스, 자원이라고 한다.), 에 대해 내가 수행하고자 하는 동작을 method로 나타내주는 것이다. GET, POST, PUT, DELETE 등이 있다. 이 중 Form은 GET과 POST만 사용한다.
GET
GET은 특정한 자원을 조회할 때 사용한다. 우리가 사용하는 대부분의 요청은 GET이다. (예 : 음악 줘. 동영상 줘.)
내가 GET 방식으로 서버한테 데이터를 전송한다면, Query String Parameters 쿼리 스트링이라는 방식을 이용해서 데이터를 전송하게 된다. 이 방식은 URL에 내가 입력한 데이터가 포함돼서 전송하게 된다. action의 기본값은 text였다. method의 기본값은 GET이다. 코드에 method를 소문자로 적어도 되지만, 명시적으로 보이게 하기 위해 대문자로 적는 것을 추천한다고 한다.
아까 위에서 주소창에 내가 입력한 데이터가 들어가는 것을 확인했다. 주소창에 나타난 ?message=01012345678 이 방식이 쿼리 스트링인 것이다. ? 뒤부터는 쿼리 스트링이고, 이 다음부터는 key=value가 나오게 된다. key는 form에 있는 name, value는 사용자가 입력한 데이터다. 여러 개의 key-value 쌍이 있다면, & 연사자로 이어져서 데이터가 전송된다.(예:?key=value&key2=value2)
데이터 받기
이제 사용자가 데이터를 입력하는 페이지에서 데이터를 입력하면, 서버에서 데이터를 받아서 또 다른 페이지에서 데이터를 보여주게 해볼 것이다. 즉, 클라이언트에서 보낸 것을 서버가 받아서 처리하는 티키타카를 해보는 것이다.
서버에서 쿼리 스트링 방식으로 들어온 데이터를 처리하는 방식은, 사용하는 도구마다 구현 방식이 다르다. 우리는 Django에서의 방식을 배울 것이다. 우리는 data-throw에서 데이터를 받아서 data-catch로 데이터를 보내줄 것이다. 따라서 form의 action에 data-catch의 url을 적어주면 된다. 이전처럼 data-catch html파일도 만들어주었다.
<form action="/data-catch/" method="GET">data-throw에서 경로와 방식을 지정해주었다. 여기까지 해준 후 data-throw 페이지를 열고, 여기에서 데이터를 입력하면 자동으로 data-catch 페이지로 넘어가면서 주소창에서 입력한 데이터를 확인할 수 있게 된다. GET 방식으로 보냈기 때문에 url로 데이터가 들어온 것이다.
이제 url에 있는 데이터를 꺼내서 페이지에서 데이터가 보이게 해보자.
Django의 과정을 다시 간단히 정리해보면 request → urls → view → template → view → response 와 같다. 첫 번째 view에서 데이터를 처리해서 어떻게 하면 우리가 원하는 결과가 나올 것이다. view에서 데이터를 처리해서 template의 render() 함수의 3번째 인자인 context로 넘겨주면 화면으로 볼 수 있게 되는 것이다.
이제 views.py에서 data_catch 부분에 아래와 같이 적어주자.
def data_catch(request):
message = request.GET.get("message")
return render(request, "data_catch.html")여기서 "message"는 우리가 data_throw.html 파일에서 <form>의 <input>에 적어주었던, 입력한 데이터를 "message"라는 name으로, 이 key로, 서버로 전송할거라고 적어놨기 때문에 여기서도 "message"라고 적은 것이다. 즉, views.py에서 message에 있는 값을 꺼내라고 지정해준 것이다.
데이터를 꺼냈으니, 이제 context에 담아서 template에 보내줄 차례다.
def data_catch(request):
message = request.GET.get("message")
context = {"message":message}
return render(request, "data_catch.html", context)이제 template에서는 전송받은 context를 이용해서 html에서 보여주면 된다. request.GET.get("message")는 Django에서 제공해주는 문법이다. GET 방식으로 들어온 request(쿼리 스트링 방식으로 들어온 데이터)에서 데이터를 꺼낼 건데, 이를 dict 형태로 해줄테니(쿼리 스트링 방식이 dict 형식과 유사하니까) .get 해서 꺼내는 것이다. 여기서 request.GET은 Django에서 해주는 거지만, .get("message")는 파이썬 문법이다. 파이썬에서 my_dict = {'a':1} 라는 딕셔나리가 있을 때, value(1)에 접근하려면 우리는 my_dict['a']라고 적었다. 이 때 my_dict.get('a')라고 해도 된다. .get() 방식으로 딕셔너리의 값에 message라는 키로 접근한 것이다.
* .get() 방식을 쓰는 이유
만약 내가 'b'라는 키에 접근할건데, 딕셔너리에 'b'라는 키로 값이 없다고 해보자. 이 때 우리는 my_dict.get('b', 2)라고 적어서 에러를 피할 수 있다. 값이 없을 경우 2를 기본값으로 반환하게 하는 것이다.
에러가 나면 프로그램은 죽게 된다. 우리는 에러를 방지해서 프로그램이 죽는 것을 막아야 한다. 즉, 에러를 방지하기 위해서 my_dict['b'] 방식이 아니라 my_dict.get('b', 2) 방식을 쓰는 것이 더 좋은 것이다.
data_catch.html 파일에 변수를 사용해서 데이터를 보여주자.
{% extends 'base.html' %}
{% block content %}
<h1>Data Catch</h1>
<h3>Current Data</h2>
<p>Current data is: {{message}}</p>
<form
{% endblock content %}여기까시 해서 실행하면 아래와 같이 된다.
data-throw 페이지에서 데이터를 01012345678을 입력 후 전송 버튼을 누르면, 자동으로 data-catch 페이지로 넘어가면서 입력한 데이터가 위와 같이 보여지는 것이다.
이제 우리는 HTML FORM을 이용해서, 클라이언트에서 서버로 데이터를 전송하고, 서버에서 해당 데이터를 이용해서 template을 만든 다음, 다시 클라이언트로 보내주는 과정까지 해보았다.
지금은 data-throw에서 데이터를 입력해서 전송하면 data-catch로 자동으로 넘어간다. 내가 또 데이터를 전송하고 싶을 때는 다시 주소창에 data-throw를 입력해서 이 페이지로 와야 하는 불편함이 있다. 이 때 하이퍼링크를 지정해서 data-catch에서 다시 data-throw로 넘어오게 할 수 있다. 이 때 쓰는 것이 html의 <a>(앵커) 태그다.
{% extends 'base.html' %}
{% block content %}
<h1>Data Catch</h1>
<h3>Current Data</h2>
<p>Current data is: {{message}}</p>
<a href="/data-throw/">데이터 던지러 가기!</a>
<form
{% endblock content %}data_catch.html 파일에 <a> 태그를 추가했다. href에 url 전체 주소를 입력해야 하지만, 우리는 지금 하나의 사이트 내에서 동작하고 있기 때문에 path경로("/data-throw/")만 입력해도 된다.
Django에 하나의 request가 들어오면, Django는 이 request를 HttpRequest라는 하나의 클래스의 객체(인스턴스)로 만든다. 그 다음 urls를 보고 어떤 view로 보낼 지 고민 후 특정한 view를 찾으면, HttpRequest에서 만든 인스턴스를 view 함수의 첫 번째 인자로 보낸다. 그래서 우리가 아래의 코드처럼 request라고 view 함수에 써서 받아주고 있는 것이다.
def data_catch(request):그런 다음 view에서 처리한 후에 결국에는 HttpResponse(render() 함수도 결국에는 까보면 HttpResponse를 전달하는 것이니까)를 클라이언트에 전달하고 있다. request → HttpRequest → urls → view → HttpResponse
다시 내용을 정리해보자.
Django는 맨 처음에 request가 들어오면, HttpRequest 객체를 생성하고, View 함수의 첫 번째 인자로 전달한 후, View에서 처리 후 HttpResponse 객체를 클라이언트에 전달한다.
이번 시간에 우리는 Form부터 시작해서, 전체적으로 데이터를 주고 받는 것, HTTP 메서드 중에서 GET 방식으로 데이터를 전송하면 쿼리 스트링이라는 방식으로 전달되는데 이 쿼리 스트링은 key-value 형태로 입력이 되는 데이터 전달 방식이고, 이 데이터를 서버에서 받아서 처리를 하고 template에 넣어서 다시 response 주는 것까지 해보았다.
이 다음 강의부터는 중간 과정이나 실습 부분 없이 정리된 내용만 블로그에 작성할 것이다.