Creating Advanced Input Forms with Flask and WTForms


Flask-WTF 확장 모듈

  • 쉬운 유효성 검증 : 사용자가 필수 입력 항목에 올바른 형식으로 데이터를 입력했는지 검증합니다. 예) 사용자가 입력한 이메일 주소에 ‘@’과 ‘.’의 포함 여부 확인.
    따라서 유효성 검증을 위한 코드를 직접 작성할 필요가 없습니다.
  • 코드 라인 감소 : 웹사이트에 입력양식을 많이 사용한다면, 플라스크 입력양식 모듈을 사용하면 작성(혹은 복사 및 붙여넣기) 해야 하는 코드의 양을 획기적으로 줄일 수 있습니다.
  • CSRF 보호 기능 내장 : 사이트 간 요청 위조(Cross Site Request Forgery), 줄여서 CSRF는 모르는 사람에게 돈을 송금하는 등 사용자가 자신의 의지와는 무관한 행동을 하게 하는 공격이며, 이런 공격은 웹사이트의 보안을 해칩니다.

1


버전이 맞지 않아 발생하는 문제 해결

  • pip list : 현재 설치된 패키지와 버전을 확인
  • pip list --outdated : 업데이트가 필요한 것들을 확인
  • pip install (업데이트 필요한 패키지이름) --upgrade : 업그레이드하기
  • pip freeze > requirements.txt : requirements.txt를 업데이트 해줘야 함
    프로젝트의 의존성을 명시하며, 특히 다른 개발자들과 협업하거나 프로젝트를 배포할 때 매우 중요함
    프로젝트의 모든 사용자가 동일한 버전의 패키지를 사용해 호환성 문제를 방지할 수 있다.

2


3


4



Flask-WTF로 입력양식에 유효성 검사 추가

5


  • validators 매개변수는 validator객체의 리스트
  • DataRequired를 지정한 두 입력창에는 데이터를 필수로 입력해야 하며,
    사용자가 아무것도 입력하지 않을 시, 오류가 발생


6


  • 사용자가 submit 버튼을 눌렀을 때 입력 값의 유효성을 검증해야 함

7

8

9



WTForms로 폼 데이터 수신하기

  • 폼 데이터를 보다 쉽게 찾을 수 있음
    <form_object>.<form_field>.data를 이용하면 됨

ex) 사용자가 폼을 제출 후 유효성 검증이 성공한 경우 True, 실패한 경우False

10


파이참 프로젝트, 디렉토리 이름 변경시 설정

  • 인터프리터 경로 재설정 해주기

11



템플릿 상속

ex) 헤더나 푸터 일부 코드를 변경해야 할 때 템플릿 상속 을 대신 사용하면 좋음
상위 템플릿을 가져와 하위 웹 페이지에서 스타일을 확장할 수 있음

12



슈퍼블록

  • 템플릿을 상속받을 때, 템플릿의 일부는 유지하되 일부는 추가하고 싶은 경우에 사용

13


14



플라스크 부트스트랩을 상속된 템플릿으로 사용하기

  • WTForms로 폼을 만드는 가장 편리한 방법 중 하나

  • pip install Flask-Bootstrap 설치

15

16