본문 바로가기

Project/Python

Blogproject - Flask-wtf

Blog project

 

Flask-wtf

 

 컴퓨터로 무언가를 만드는 것은 반복 작업과 의 싸움입니다. 컴퓨터는 0과 1 밖에 모르는 바보 이기 때문에 현실에 있는 문제를 이해 시키기 위해서 사람은 끊임 없이 정보를 바보가 이해할 수 있는 방식으로 변환해서 가르쳐 주어야 합니다. 웹사이트를 만드는 것도 이와 비슷한 반복작업의 연속 입니다. 

 컴퓨터 산업은 그 특성상 매우 빠른 성장을 해 왔습니다.  컴퓨터와 전기만 있으면 그 어떤 물리적인 투입 없이 오롯이 인간의 정신력과 시간만으로 발전할 수 있기 때문입니다. 그런 산업의 특성을 잘 반영해 다양한 ‘라이브러리’ 들이 만들어 졌습니다. 단순히 그런 도구들이 만들어 졌다 해도 널리 쓰이지 않는 다면 아무런 의미가 없었을 겁니다. 하지만 ‘인터넷’이라는 지금은 보편화 되었지만 말도 안되는 속도를 가진 연결망이 합쳐 지면서 다양한 도구들이 전세계 적으로 쓰이기 시작했습니다. 

 

flask-wtf.readthedocs.io/en/stable/

 

Flask-WTF — Flask-WTF 0.14

 

flask-wtf.readthedocs.io

 

 Flask-wtf 도 그런 ‘라이브러리’ 즉 도구중 하나 입니다. 웹 사이트를 만들때 사용하는 다양한 구성 요소들을 미리 만들어 두고 사용하게 한 것입니다. 제가 사용한 코드는 아래와 같습니다. 

 

##WTForm
class CreatePostForm(FlaskForm):
    title = StringField(“Blog Post Title”, validators=[DataRequired()])
    subtitle = StringField(“Subtitle”, validators=[DataRequired()])
    author = StringField(“Your Name”, validators=[DataRequired()])
    img_url = StringField(“Blog Image URL”, validators=[DataRequired(), URL()])
    body = CKEditorField(“Blog Content”, validators=[DataRequired()])
    submit = SubmitField(“Submit Post”)

 

 위의 클래스는 WTForm 을 정의 하는 부분입니다. 우선 클래스를 정의합니다. 제가 사용한 코드는 블로그의 포스트를 작성하는 부분입니다. 블로그를 만들기 위해 필요한 다양한 구성 요소들이 포함되어 있습니다. 우선 첫 줄에는 클래스를 선언합니다. 그리고 제목(title),  부제목(subtitle), 저자(author), img_url, 본문(body)를 각각 정의해 줍니다. 블로그 사이트 이기 때문에 대부분 String(문자열)타입으로 설정하였습니다. 그리고 입력된 내용을 서버로 전송 명령을 내리는 버튼을 정의해 주었습니다.

 

<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
{{ ckeditor.load() }}

{{ ckeditor.config(name='body') }}
{{ wtf.quick_form(form, novalidate=True, button_map={"submit": "primary"}) }}
</div>
</div>
</div>

 

 위 코드는   wtform을 html 파일에 적용한 코드 입니다. 버튼의 경우 ckeditor 는 파이썬의 텍스트 에디터 라이브러리 입니다. 흔히 우리가 블로그나 웹에 글을 작성할때 사용하는 텍스트 에디터 창과 같은형태의 모습을 보여 줍니다. 

 

 

 위와 같은 화면을 Bootstrap 을 활용해서 만든다면 훨씬더 많은 코드가 필요 할 겁니다. 그 많은 코드를 단 세줄로 마무리 할 수 있게 도와주는 도구가 WTForm 입니다. 이번에는 간략하게 WTForm에 대해서 알아 보았습니다.  다음에는  Login 과 comment 를 추가해 보겠습니다. 

 

2021.02.01 - [Toy Project/Python] - Blog Project - Start

 

Blog Project - Start

Blog Project Start  안녕하세요 ? 저는 지성이라고 합니다. 한국에 살고 있는 평범한 직장인중 한명입니다. 저는 취미로 컴퓨터를 공부하고 있습니다.  “컴퓨터” 에도 다양한 분야가 있지만 저는

jisungsdevstroy.tistory.com

2021.02.04 - [Toy Project/Python] - Blog project - Bootstrap

 

Blog project - Bootstrap

Blog project Bootstrap  안녕하세요 지성입니다. 저는 지금 블로그를 만들어 가고 있습니다. 지난 글에서 서버 단에서 작동하는 코드는 최대한 간단하게 구성했고 웹에서 작동하는 프런트엔드 코드

jisungsdevstroy.tistory.com

2021.02.16 - [Toy Project/Python] - Blog project - Database

 

Blog project - Database

Blog project  Database  블로그의 기본적인 페이지를 만들었습니다.  백엔드를 맡고 있는  flask 와   프론트엔드를 맡고 있는  HTML 그리로 이 두 프레임워크를 연결하기 위해  jinja  라는 파..

jisungsdevstroy.tistory.com

 

'Project > Python' 카테고리의 다른 글

Blog project - Register page  (0) 2021.04.06
Blog project - Login  (0) 2021.03.31
Blog project -SQLAlchemy  (0) 2021.02.23
Blog project - Database  (0) 2021.02.16
Blog project - GET/POST  (0) 2021.02.05