개발자 블로그

[coFi 부트캠프 개발자 커뮤니티 웹사이트] 1. Django의 Form 본문

프로젝트/coFi 개발자 커뮤니티

[coFi 부트캠프 개발자 커뮤니티 웹사이트] 1. Django의 Form

hayongwoon 2022. 5. 13. 13:24

 Django Form의 역할 및 정의: HTML을 작성하고, 입력된 데이타의 유효성을 검증하고, 필요시에 입력된 데이타를 검증 결과와 함께 다시 표시하며, 유효한 데이타에 대해 요구되는 동작을 수행하는 것을 "올바르게 하기"위해서는 꽤 많은 노력이 필요한 작업이다. Django는 일부 과중한 작업과 반복 코드를 줄여줌으로서, 이 작업을 훨씬 쉽게 만든다!

 

Django의 폼 처리 과정은 (모델에 대한 정보를 보여주는데 있어서) 우리가 앞선 튜토리얼에서 배웠던 것과 같은 기술을 사용한다. : 뷰는 요청을 받고, 모델로 부터 데이타를 읽는것을 포함한 요구되는 동작을 수행한다. 그런 다음, (보여줄 데이타를 포함한 context를 전달받은 템플릿으로 부터) HTML page를 생성하고 반환한다. 서버 또한 사용자가 입력한 데이타를 처리가능 해야 하며,  에러가 있으면 그 페이지를 다시 보여줄 필요가 있기 때문에 상황을 더욱 복잡하게 만든다.

아래에 Django가 어떻게 요청읕 처리하는지 보여주는 플로우 차트가 있다. 폼을 포함하는 페이지에 대한 요청 (초록색으로 표시함) 으로 시작하고 있다. 

django form 처리 과정 flow 차트

위의 다이어그램에 기반하여, Django 폼이 주요하게 다루는 것은 다음과 같다. 

  1. 사용자가 처음으로 폼을 요청할 때 기본 폼을 보여준다.
    • 폼은 비어있는 필드가 있을 수 있다 (예를 들면, 새로운 책을 등록할 경우) 아니면 초기값으로 채워진 필드가 있을 수도 있다. ( 예를 들면, 기존의 책을 수정하거나, 흔히 사용하는 초기값이 있을경우)
    • 이 시점의 폼은 (초기값이 있긴해도) 유저가 입력한 값에 연관되지 않았기에  unbound 상태라고 불린다.
  2. 제출 요청으로 부터 데이타를 수집하고 그것을 폼에 결합한다.
    • 데이타를 폼에 결합(binding) 한다는 것은 사용자 입력 데이타와 유효성을 위반한 경우의 에러메시지가 폼을 재표시할 필요가 있을 때 준비되었다는 의미이다.
  3. 데이타를 다듬어서 유효성을 검증한다.
    • 데이타를 다듬는다는 것은 사용자 입력을 정화(sanitisation) 하고 (예를 들면, 잠재적으로 악의적인 콘덴츠를 서버로 보낼수도 있는 유효하지 않은 문자를 제거하는 것)  python에서 사용하는 타입의 데이타로 변환하는 것이다.
    • 유효성검증은 입력된 값이 해당 필드에 적절한 값인지 검사한다. (예를 들면, 데이타가 허용된 범위에 있는 값인지, 너무 짧거나 길지 않은지 등등) 
  4. 입력된 어떤 데이타가 유효하지 않다면, 폼을 다시 표시하는데 이번에는 초기값이 아니라 유저가 입력한 데이타와 문제가 있는 필드의 에러 메시지와 함께 표시한다.
  5. 입력된 모든 데이타가 유효하다면, 요청된 동작을 수행한다. (예를 들면, 데이타를 저장하거나, 이메일을 보내거나, 검색결과를 반환하거나, 파일을 업로딩하는 작업 등등)
  6. 일단 모든 작업이 완료되었다면, 사용자를 새로운 페이지로 보낸다.

Django는 위에 설명된 작업을 도와줄 수많은 도구와 접근법을 제공한다. 가장 기초적인 것은 Form 클래스 인데 form HTML의 생성과 데이터 정화와 유효성검증을 간단하게 만든다. 다음 단계에서는, 도서관 사서가 책의 대여갱신을 할수 있도록 해주는 페이지의 실제적인 예제를 이용해 폼이 어떻게 동작하는지 살펴보도록 한다.

 

출처: https://developer.mozilla.org/ko/docs/Learn/Server-side/Django/Forms

 

 위에 글은 폼을 사용하기 전, 가장 많이 보며 공부했던 블로그이다. 처음에는 이해가 정말 어려웠는데, 계속 보면서 구현을 하다보니 어느정도 감을 잡았었다. 그리고 파이콘에서 강승형님께서 강의한 'django form 폼나게 쓰기'  https://www.youtube.com/watch?v=-zhv1RE16Cg&t=699s 영상을 보면서도 form에 대해 이해하려고 몇번 돌려보았다. 

 

*느낀점

 django 폼을 사용하면서 프론트에 부족한 역량에 대해 많은 시간을 줄일 수 있었다. 앞서 말했듯, 클라이언트가 입력한 데이터의 유효성 검사와 검증된 데이터에 따라 어떤 동작을 취할지에 대한 작업을 훨씬 쉽게 접근하여 풀 수 있었다.

sign-up.html in coFi project

html에 작성한 코드인데, form.필드네임 또는 form.as_table(p..등) 태그를 써서 작성을 할 수 있는데, as_cirspy_field 라는 부트스트랩이 적용된 라이브러리를 사용하여 좀 더 꾸며봤다. 외에도 label 이나 다양한 속성은 forms.py 에서 widget 등 커스터마이징을 할 수 있다. 나중에는 이런 부분들을 잘 적용해서 좀 더 유연하게 사용해보고 싶은 욕심이 있다.

추가로, form 에는 Modelform Form 이 있다.

  • Form (일반 폼) : 직접 필드 정의, 위젯 설정이 필요
  • Model Form (모델 폼) : 모델과 필드를 지정하면 모델폼이 자동으로 폼 필드를 생성

https://wayhome25.github.io/django/2017/05/06/django-model-form/ 추가 설명 블로그