Flask(웹 프레임워크)

어제는 기본적인 파이썬 코드를 배웠고 실제로 파이썬 코드를 통해서 웹을 구성하려면 여러 도구가 필요한데 그 중 하나가 flask이다.
flask를 이용해서 이른바 프론트엔드와 백엔드의 일을 나누어 설명할 예정이다.
프론트엔드는 기본적으로 개발직군이라고 생각하면 된다.
백엔드는 개발직군의 작업을 유지보수하는 작업이다.
둘은 밀접하면서도 정반대의 작업까지는 아니지만 많이 다른 일을 한다.

또한 오늘은 이해를 요하기보다는 어떤식으로 작동을 하는가에 중점을 둬야한다. 다 이해하려고 하면은 전문가 과정에서 해보자

일단 flask 또한 웹기반이기 때문에 앞서 배운 javascript와 python은 서로 완전 다른 명령어를 가지고 있었다. 라고 한다면
html기반 언어를 사용할 때가 있다.

또한 오늘 배운걸 바로 적용하기 위해 glitch라는 라이브서버 기능을 탑재한 웹사이트를 사용했다. 매우 좋으니 애용하자

from flask import Flask

플라스크를 사용하는 단어이다.
비쥬얼 코드에서 사용할 때에는 판다스 처럼 먼저 설치를 해야한다.
콘솔에서

pip install flask

를 쳐서 다운을 받도록 하자.

>app = Flask(__name__)	#name의 앞과 뒤에_ 가 두개씩 온다.

는 맨 앞에 그리고 다음은 맨뒤에 와야한다.

app.run()

그리고 여기서 라우터라는 개념을 설명해야하는데 라우터는 일반적으로 웹사이트의 호스팅이 있다면 호스팅의 하위 즉 호스팅이 운영하는 페이지로 이동하는 것이다. 예를 들자면 검색 엔진에서 홈페이지에서 검색하면 하위페이지로 이동한다고 생각해주면 된다.

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

로 라우터를 늘릴 수 있다.

그리고 return 뒤에는 우리가 html에서 배웠던 문법을 사용하면 그 대로 웹페이지에 구현이 가능하다.

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>
 '''

위의 topics list를 사전형으로 정리 한 것이다.
밑에 있는 것은 함수(template)로 안에 있는 변수(f string)인 (content)를 제외하고는 나머지는 같은 내용을 출력한다.

return template(f'...')

함수를 출력하는 명령문이다.

그리고 liTags는 for 반복문을 통해 topics안에 있는 topic을 각각 변수(f string)인 f'뒤에 오는 내용을 topics에서 순서대로 id, title에서 가져와서 반복한다. 그리고 a href 테그로 이동하면 body의 내용을 출력한다.

@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}')

에서는 라우터 /read/숫자/를 만들었는데 id는 문자이기 때문에 정수라는 의미의 <int:>를 붙여 줬다.
그리고 id에 해당하는 topics의 내용을 불러 온다.

@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)

여기서는 submit이라는 정보를 호스트에게 전송하는 버튼과 text라는 직접입력 가능한 창을 만들었는데
위의 경우에는 새로운 라우터를 만드는데 title의 빈칸에 1을 body에 2를 넣게 되면 /create/?title=1&body=2 라는 라우터를 생성한다.

예제로 create에 구글을 넣고 title 부분에 ?= 를 대입해서 넣으면 title에 입력한 것을 검색한 창으로 옮겨가게 된다.

그리고 p(파라미터)는 다양한 종류의 변수를 하나로 묶기 위해 각각 p로 감싸주면 각각 변수를 하나로 연결해주는 도구라고 생각하면 된다.
그리고 연결하기만 하면 작동을 하지 않기에 form을 사용해주는데 form으로 연결된 함수들을 덩어리로 감싼다음 action이라는 작동 명령을 넣어준다고 생각하면 된다.

오늘의 소감

이 글을 쓰면서도 정말 머리가 아플정도로 많은 정보를 얻었고 정리하기가 쉽지가 않았다. 사실 이것은 앞서배운 html을 재현하는 요소이긴 한데 좀 더 간략한듯 하면서 다른 동적인 기능을 가지다 보니 프로그램 언어의 다양성에 대한 이해가 좀 되는 거 같기도 했다.

Author And Source

이 문제에 관하여((03.30) 세번째 Python), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@itsmemario2/03.30-세번째-Python

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

(03.30) 세번째 Python

Flask(웹 프레임워크)

오늘의 소감

Author And Source

좋은 웹페이지 즐겨찾기