Flask Web Framework

이현우·2022년 5월 14일

생활코딩 Flask Web Framework를 기반으로 간단하게 정리합니다.

1. 수업소개

사용자의 입력에 따라 웹 페이지가 자동으로 만들어지면 어떨까?
사용자에 따라 최적화된 웹페이지를 보여줄 수 있으면 좋지 않을까?
기존에는 미리 만들어둔 웹페이지를 통해 응답했었음.
파이썬에서는 웹 페이지를 만들어주는게 가능하다.
순수한 파이썬으로 만드는 강의도 생활코딩에서 제공함.
Flask Web Framework를 사용하여 웹 페이지를 만들어 주는 강의.

2. 개발환경 세팅

visual studio code를 사용함.
터미널에 pip3 install flask

server.py
from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return 'hi'

app.run(port=5001)

터미널에 python3 server.py 실행한 뒤 URL을 클릭하면 웹페이지 출력됨.

3. 플라스크를 사용하는 이유

HTML만으로는 동적인 작업이 불가능하다. 그러나 Flask는 가능하다.

from flask import Flask
import random

app = Flask(__name__)

@app.route('/')
def index():
    return str(random.random()) # 기본적으로 문자열 값을 반환해야 함.

app.run(port=5001, debug=True)

브라우저는 html코드를 해석하는 기계. 즉, flask에서는 최종적으로는 html코드를 브라우저를 전달하는 것이다.

4. 라우팅

Flask는 요청을 함수로 처리하고 연결하는 것을 라우팅이라하고 작업을 기술하는 것을 라우터라고 한다.
변수 사용 방법

@app.route('/read/<id>')
def read(id):
    print(id)
    return 'read : ' + id

5. 홈페이지 구현

topics = [
    { 'id' : 1, 'title' : 'html', 'body' : 'html is ...'},
    { 'id' : 2, 'title' : 'css', 'body' : 'css is ...'},
    { 'id' : 3, 'title' : 'javascript', 'body' : 'javascript is ...'}
]

@app.route('/')
def index():
    liTags = ''
    for topic in topics:
        liTags = liTags + f'<li><a href="/read/{topic["id"]}/">{topic["title"]}</a></li>'
    return f'''<!doctype html>
    <html>
        <body>
            <h1><a href="/">WEB</a></h1>
            <ol>
                {liTags}
            </ol>
            <h2>Welcome</h2>
            Hello, Web
        </body>
    </html>
    '''

6. 읽기

def template(contents, content):
    return f'''<!doctype html>
    <html>
        <body>
            <h1><a href="/">WEB</a></h1>
            <ol>
                {contents}
            </ol>
            {content}
        </body>
    </html>
    '''

def getContents():
    liTags = ''
    for topic in topics:
        liTags = liTags + f'<li><a href="/read/{topic["id"]}/">{topic["title"]}</a></li>'
    return liTags

@app.route('/read/<int:id>/')
def read(id):
    title = ''
    body = ''
    for topic in topics:
        if id == topic['id']:
            title = topic['title']
            body = topic['body']
    return template(getContents(), f'<h1>{title}</h1>{body}')

7. 쓰기

def template(contents, content):
    return f'''<!doctype html>
    <html>
        <body>
            <h1><a href="/">WEB</a></h1>
            <ol>
                {contents}
            </ol>
            {content}
            <ul>
                <li><a href="/create/">create</li>
            </ul>
        </body>
    </html>
    '''

@app.route('/create/', methods = ['GET', 'POST'])
def create():
    if request.method == 'GET':
        content = '''
            <form action="/create/" method="POST">
                <p><input type="text" name="title" placeholder="title"></p>
                <p><textarea name="body" placeholder="body"></textarea></p>
                <p><input type="submit" value="create"></p>
            </form>
        '''
        return template(getContents(), content)
    elif request.method == 'POST':
        global nextId
        title = request.form['title']
        body = request.form['body']
        newTopic = {'id' : nextId, 'title' : title, 'body' : body}
        topics.append(newTopic)
        url = '/read/' + str(nextId) + '/'
        nextId = nextId + 1
        return redirect(url)

HTTP 요청 메서드 조사하기.
method는 웹과 웹서버의 통신규약이다.
redirection 해당 위치로 이동하라는 액션을 할 수 있다.

8. 수정

@app.route('/update/<int:id>/', methods = ['GET', 'POST'])
def update(id):
    if request.method == 'GET':
        title = ''
        body = ''
        for topic in topics:
            if id == topic['id']:
                title = topic['title']
                body = topic['body']
                break
        content = f'''
            <form action="/update/{id}/" method="POST">
                <p><input type="text" name="title" placeholder="title" value="{title}"></p>
                <p><textarea name="body" placeholder="body">{body}</textarea></p>
                <p><input type="submit" value="update"></p>
            </form>
        '''
        return template(getContents(), content)
    elif request.method == 'POST':
        title = request.form['title']
        body = request.form['body']
        for topic in topics:
            if id == topic['id']:
                topic['title'] = title
                topic['body'] = body
                break
        url = '/read/' + str(id) + '/'
        return redirect(url)

9. 삭제

@app.route('/delete/<int:id>/', methods = ['POST'])
def delete(id):
    for topic in topics:
        if id == topic['id']:
            topics.remove(topic)
            break
    return redirect('/')