TIL DAY 159
.jpg)
오늘 배운 일
✔️ Django 웹 개발
1. 폼(Form)이란?
밑에 3개의 화면들의 공통점은...
출처 : 코드잇
폼(form) 은
- 사용자가 입력한 데이터를 서버로 전송하기 위한 방식
앞으로 우리는 폼에 대해 알아보면서 또 한 django 에서 폼을 처리하는 방법에 대해 알아보겠다.
폼을 다룰 수 있다면 포스트 작성, 수정, 삭제 기능을 모두 완성시킬 수 있다.
우리가 지금까지 구현해놓은 Read 조회 기능은 데이터베이스에서 데이터를 가져와서 템플릿으로 전송한 뒤, 렌더해서 사용자에게 보여주었다.
Create 는 반대로, 웹에서 사용자의 입력을 받아 서버로 전송해 주어야 한다.
이 때, 사용하는 것이 폼이다.
먼저 HTML 폼을 보자면...
출처 : 코드잇
위의 코드를 렌더하면...
이런식으로 익숙한 모습을 볼 수 있다.
출처 : 코드잇
자세히 보면 label 과 input 이 짝 지어져있다.
label 은 앞에 어떤 것을 입력해야 되는지 나타내고 input 은 실제로 입력하는 곳 이다.
그리고 우리가 입력을 하려도 보면 전송하려는 데이터에 따라서 달력 형식으로 받기도 하고...
한 줄로 받기도 한다.
데이터에 따라서 달라지는 입력 형식을 위젯이라고 부른다.
그리고 위젯은 input 의 type 에 따라 결정되게 된다.
폼으로 돌아가서 마지막으로 데이터를 입력했으면, 서버로 전송할 수 있는 버튼이 있어야한다.
폼에서 전송을 위한 타입을 submit 이라고 한다.
버튼 위에 적은 글씨는 value 라는 속성으로 표현할 수 있다.
2. 폼(Form) 처리
이번에는 폼이 처리되는 과정에 대해 알아볼 것 이다.
처리 과정을 이해할려면 GET 과 POST 요청에 대해 알아야 한다.
서버와 클라이언트 구조에서 클라이언트는 서버에게 요청을 하고 서버는 요청을 받아서 처리한 후 응답을 클라이언트에게 돌려준다.
출처 : 코드잇
이 때 클라이언트가 보낸 모든 리퀘스트는 서버에게 요청하는 종류에 따라 몇 가지 방식으로 나뉘는데, 가장 많이 쓰이는 것이 GET 과 POST 이다.
GET 은 무엇인가를 얻다라는 의미로 서버로부터 데이터를 조회할 때 사용된다.
GET 방식으로 요청을 보낼 때 요청에 포함하고 싶은 데이터가 있을 수 있는데, 해당 방식으로 보낼 때는 필요한 데이터를 URL 에 담아서 전달한다.
출처 : 코드잇
URL 을 보면, /profile 다음에 ? 표가 나오고 여러가지 데이터가 함께 보인다.
이렇게 URL 뒤에 붙은 데이터 문자열을 쿼리 스트링이라고 한다.
출처 : 코드잇
쿼리 스트링은 데이터를 전달하는 가장 단순한 방법이다.
보면 ? 표를 사용해서 URL 의 끝을 알려주고 그 다음으로 사전형처럼 key 와 value 로 데이터를 표시하고 각각의 데이터는 & 표시로 구분한다.
GET 방식으로 요청할 때는 쿼리 스트링을 이용해 클라이언트의 데이터가 서버에 전송된다.
만약 비밀번호나 카드번호같이 민감한 데이터를 서버에 보낼 때, 이럴 때 URL 에 데이터를 담아서 전송하는 방식이 적합하지 않는다.
그리하여 데이터를 전송할 때는 POST 방식을 많이 사용한다.
POST 는 게시하다 의미처럼 클라이언트가 서버에 데이터를 변경하는 요청을 할 때 사용한다.
그리고 POST 방식의 요청은 쿼리 스트링을 이용하지 않고 클라이언트와 서버가 통신하는 메시지의 안쪽에 데이터를 담기 때문에 URL 에 데이터가 노출되지 않는다.
CRUD 를 생각하면 데이터를 생성하는 것은 서버에게 데이터를 추가 즉 변경하도록 요청하는 것이므로 POST 방식을 사용하고...
조회는 서버의 데이터를 변경하는 것이 아니므로 GET 방식으로 사용한다.
수정과 삭제는 서버에 데이터를 변경하는 것이므로 POST 방식을 사용한다.
출처 : 코드잇
예를 들면 구글에서 검색을 하거나 유튜브의 동영상을 볼 때는 GET 방식을 사용한다.
서버의 데이터를 변경하는게 아니라 서버로부터 데이터를 가져오는 것 이다.
반면에 회원가입, 블로그 글쓰기, 유튜브에 동영상 올리기, 트위터에서 글 수정하기/삭제하기 등은 서버의 데이터를 변경하는 것이므로 모두 POST 방식을 사용한다.
GET 과 POST 의 차이점을 알았다면 아까전에 봤던 HTML 폼을 다시 보겠다.
위의 코드를 보면, form 태그의 속성으로 action 과 method 가 있다.
이 부분은 지금 폼에 입력된 데이터를 method 방식 즉 POST 요청을 통해서 action 에 해당하는 URL 로 보내겠다는걸 뜻 한다.
전송 버튼을 누르면 폼의 데이터를 URL 로 POST 요청으로 보낸다는 것 이다.
그럼 이해를 돕기 위해서 폼이 처리되는 과정을 한 번 보겠다.
첫 째 맨 먼저 사용자가 폼을 작성하기 위해서 서버에 폼 양식을 요청을 한다.
출처 : 코드잇
그런데 처음 요청할 때는 서버로부터 폼 양식을 조회하는 것이므로 GET 방식을 사용한다.
그리고 처음 서버가 제공하는 폼을 언 바운드 폼이라고 부른다.
bound 는 결합된, 묶여있는 이런 뜻인데 아직 데이터가 폼에 묶여있지 않는 상태를 언 바운드 폼이라고 한다.
두 번째로 사용자가 데이터를 입력하고 서버로 전송한다.
출처 : 코드잇
이 때 폼의 method 에 명시되어 있는 post 방식으로 action 에 해당하는 URL 로 데이터를 전달하는 것 이다.
데이터를 전달한다는 표현을 다시 말하면 폼의 데이터와 함께 post 방식으로 서버에 요청한다.
세 번째는 서버에서 입력된 데이터와 폼을 합쳐서 하나의 형태로 만든다.
이 과정을 바인딩 이라고 하며 이렇게 데이터와 함쳐진 폼을 바운드 폼 이라고 한다.
출처 : 코드잇
네 번째는 만약 바운드 폼에서 가져온 데이터 즉 입력된 데이터가 올바르지 않다면 유효하지 않은 잘못된 데이터이므로 사용자에게 다시 폼을 입력하도록 한다.
출처 : 코드잇
예를 들어 이름을 입력하는 곳에 숫자를 입력했다면 다시 입력하도록 하는 것 이다.
폼 데이터가 유효할 때까지 두 번째에서 네 번째 단계가 반복된다.
다섯 번째는 입력된 데이터가 유효한다면 다음으로 서버에서 지정한 로직을 수행한다.
입력된 데이터를 가지고 가공하거나 수정하거나 저장하는 등의 작업을 한다.
출처 : 코드잇
여섯 번째는 작업이 모두 끝났다면 새로운 페이지로 안내한다.
다시 말하면 새로운 페이지를 사용자에게 응답으로 돌려준다.
출처 : 코드잇
이러한 과정들을 통해서 폼 처리가 이루어진다.
끝으로 :
- 오늘은 폼에 대해 알아보는 시간을 가져보았다.
- HTML 을 배워서 그런지 폼을 배우는 것은 어렵지 않아서 좋았다.
- 확실히 속성들을 잘 이해해서 활용하는 것이 좋을 것 같다.
