파이썬기초 - flask

hanss·2022년 3월 30일

학습 내용

html은 상품,
flask는 웹페이지를 찍어내는 공장

오늘 학습할 내용

예시 웹페이지

1. create를 선택하면 텍스트를 입력할 수 있는 박스가 뜬다.
2. 텍스트박스 아래 create 버튼을 클릭하면 리스트에 추가된다.
3. 리스트를 클릭하면 해당 글을 볼 수 있다.

페이지가 많아진다면 지금까지 배웠던 html로 하나하나 만드는 방식으론 일일이 페이지를 만들기 힘들다.
태그를 바꾸려고할 때도 페이지가 많다면 새로운 태그를 적용하기가 힘들다.
그래서 웹페이지를 동적으로 생성하는 flask를 사용해보려고 한다.

1. flask 환경세팅

컴퓨터에 환경설정 하기

cmd에서 pip install flask

glitch.com 서비스 이용하기

glitch.com 회원가입 후 - 검색창에서 flask - 가장 상단 검색결과 클릭

glitch를 이용한 flask 소스코드

from flask import Flask

app = Flask(__name__)

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

def template(content):
  liTags = ''
  for topic in topics:
    liTags = liTags + f'<li><a href="/read/{topic["id"]}/">{topic["title"]}</a></li>'
  return f'''
  <html>
    <body>
      <h1><a href="/">WEB</a></h1>
      <ol>
        {liTags}
      </ol>
      {content}
      <ul>
        <li><a href="/create/">create</a></li>
      </ul>
    </body>
  </html>
  '''

@app.route("/")
def index():
  return template('<h2>Welcome</h2>Hello, WEB!')

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

@app.route('/create/')
def create():
  content = '''
    <form action="/create/">
      <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(content)

@app.route('/update/')
def update():
  return 'Update'

app.run()

학습 후기

오류났던 부분과 해결방법

glitch에서 웹페이지상에 리스트를 만드는데서 에러가 났었다.

문제가 생긴 부분

@app.route('/read/1/')
def read():
return '''	# 문제점 1. return 들여쓰기 안 함
  <html>
    <body>
      <h1><a href="/">WEB</a></h1>
      <ol>
        <li><a href="/read/1/">html</a></li>
        <li><a href="/read/2/">css<a></li>	#문제점2. a태그 닫지 않음
        <li><a href="/read/3/">js</a></li>
      </ol>
      <h2>Read</h2>
      Hello, Read!
    </body>
  </html>
  '''

위 코드를 보면 return 앞에 띄어쓰기를 하지 않았고 에 /를 빠뜨려서 오류가 났다.
이 코드 외에도 vs code에서 자동 완성으로 입력되었던 코드들을 직접 다 타이핑하니까 빠뜨린 글자가 많아서 생긴 오류가 많았다. 오류난다고 좌절하지 말고 log를 확인하고 코드를 보면 해결방법이 보인다.

소감

오전 수업은 flask를 사용하기 위한 환경설치가 메인이라 수업에 금방 따라 갔는데 오후 수업은 이해하면서 타이핑하려다가 강사님 말씀도 놓치고 코드를 입력하는 것도 제대로 따라가지 못했다. 수업내용은 어렵진 않았는데 수업 진도를 제대로 따라가지 못해서 다시 보며 복습해야 될 것 같다.
그리고 오늘 수업에서 python으로 만드는 웹프레임워크인 flask를 사용했는데 쉬운 것 같으면서도 어려웠지만 추가로 더 공부해보고 싶을 만큼 흥미로웠다. 모든 분야가 그렇지만 웹도 쓰는 언어도 만드는 방법도 다양해서 공부할 게 정말 많다는 걸 느낀다. 열심히 해야지.