[개발일지 3월 30일] [공통교육-파이썬 기초] Flask - 이고잉 강사

25778 단어 CSS Flask JavaScript python CSS

1. 학습한 내용

필기(참고 : 10.flask.py)

플라스크(백엔드) :
플라스크는 웹페이지를 찍어내는 공장이다
제조사의 제품 중에서도 3D 프린트 같은 공장
하나의 코드를 톤ㅇ해서 동적으로 웹페이지를 생성
백엔드를 이용해서 웹서버를 만들려면 파이썬만 있어도 됨, 하지만 많이 힘듬
여러 라이브러리를 제공해주는 것은 플라스크!
플라스크 메인 사이트 : 참고 사이트
플라스크 라이브러리 설치(terminal) :
터미널에서 'pip install Flask' 입력

플라스크의 퀵스타트 : 미니멀 버전(참고 사이트)
10.flask.py에서

→ 실행시키면 터미널에 http://127.0.0.1:5000이 나옴
→ http://127.0.0.1:5000를 실행시키면(밑의 그림 참고)

→ 이렇게 사이트가 생성됨

TIP
서버를 공짜로 빌려주는 서비스(참고 사이트)
→ 강의를 여기서 모두 실행함
→ 5분 정도 이용안하면 서버가 꺼짐 / 1분 이내로 켜짐 / 정기서비스 이용시 매일 사용가능
Flask 사용방법 : 검색 → flask 검색 → 첫째 클릭

→ 검색하면(밑의 그림 참고)

→ view source 버튼 클릭 후 (→ remix own click 버튼 클릭하면 태그 복사 가능)
→ flask를 이용할 수 있는 사이트 창이 뜸 (관련 사이트)

→ remix own click 버튼 클릭시 밑의 태그가 나옴

# Flask / Python Version of the default 'Dreams' project

Click `"Show"` in the header to see your app live. Updates to your code will instantly deploy and update live.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

TIP
1) 프로그램 : 어떻게 시간의 순서에 따라 실행되는지 적혀있는 파일(프로세스와 구분)
2) front, back end 다하면 : fall stack 엔지니어

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

1) 코드가 실행되서(warning) return 부분의 사용자에 응답될 때, 결과가 만들어짐
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

from flask import Flask
import random

app = Flask(__name__)

@app.route("/")
def index():
    return '<strong>random</strong> : ' +str(random.random())

app.run()

→ random : 0.8353851164469046 출력

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

TIP
visual studio에서 파일 다른거 비교 가능함(밑의 그림 참고)

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

TIP
flask홈페이지 → quickstart → Variable Rule 사이트 참고(참고 사이트)

from markupsafe import escape

@app.route('/user/<username>')
def show_user_profile(username):
    # show the user profile for that user
    return f'User {escape(username)}'

@app.route('/post/<int:post_id>')
def show_post(post_id):
    # show the post with the given id, the id is an integer
    return f'Post {post_id}'

@app.route('/path/<path:subpath>')
def show_subpath(subpath):
    # show the subpath after /path/
    return f'Subpath {escape(subpath)}’

→ Variable Rule 사용 방법

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

TIP
https://www.google.com/search?q=의 뒤 내용을 바꾸면 검색 됨
https://www.google.com/search?q=daegu
→ daegu가 입력됨(입력값)(파라미터)
https://www.google.com/search?q=seoul
→ seoul이 입력됨(입력값)(파라미터)
→ URL의 ? 뒤는 파라미터! 그리고 각각의 파라미터는 n%로!

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

- 오늘 최종 코딩 결과

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

→ 결과는 하단 그림 참조

→ 홈페이지 완성

→ 1. html 클릭시
→ https://olive-hexagonal-stocking.glitch.me/read/1/로 이동과
→ html, html is ... 표시

→ create 클릭시
→ https://olive-hexagonal-stocking.glitch.me/create/로 이동과
→ input text를 할 수 있는 기능 추가

→ title : daegu / body : dalseo라고 입력 후 create를 실행시
→ 위의 페이지가 https://olive-hexagonal-stocking.glitch.me/create/?title=daegu&body=dalseo로 바뀜

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

<중요 내용 정리>

app = Flask(__name__)

→ 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 ...."}
]

→ topics 변수에 딕셔너리 구조로 id, title, body 설정

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

→ 함수 template(content란 변수 값)를 설정
→ liTage = '' 로 빈 변수 설정

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

→ for문을 통해서 liTags에 liTags를 겹치지 않게 topcis의 id, title이 다 나올 때까지 출력
→ return을 통해 f이하 값 출력

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

→ https://olive-hexagonal-stocking.glitch.me/ 사이트에서 위 3)의 함수 template를 반영함('

Welcome

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

→ 'html', 'css', 'js' 클릭시
→ ex) https://olive-hexagonal-stocking.glitch.me/read/1/ 사이트로
→ ex) https://olive-hexagonal-stocking.glitch.me/read/2/ 사이트로
→ ex) https://olive-hexagonal-stocking.glitch.me/read/3/ 사이트로 이동하고
→ for문을 통해 id가 일치하는 것의 title, body를 출력하고 breat(빠져나옴)
→ 그리고 return을 통해 template 함수를 호출하면서 끝

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

→ 'create' 를 클릭시
→ https://olive-hexagonal-stocking.glitch.me/create/ 사이트로 이동하면서
→ form action을 통해 creat 활동
→ input type = text 생성하고 이하 내용 실행
→ input type="sumbit"은 입력값을 전송함(value='create'에)
→ 마지막으로 template(content) 반영

2. 학습한 내용 중 어려웠던 점 또는 해결못한 것들

1) flask를 처음 사용함으로써 익숙하지 않음
2) 함수끼리 호출하면서 사이트 및 내용 생성, 그리고 각 함수간의 연관성

3. 해결방법 작성

1) 전반적인 코딩 내용을 큰 테투리에서 파악하는 것 → 작동 순서와 방법을 알 것

4. 학습 소감

1) 갑자기 어려워진 수업내용으로 인해서 정리하는데 시간이 좀 더 걸렸음...
2) 내용을 하나하나 이해하려고 하는 것보다, 어떤 작동원리로 돌아가는지 이해하는 것이 중요할 듯!

Author And Source

이 문제에 관하여([개발일지 3월 30일] [공통교육-파이썬 기초] Flask - 이고잉 강사), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@pjj2059/개발일지-3월-30일-공통교육-파이썬-기초-Flask-이고잉-강사

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

[JavaScript] 기본 문제 풀이 1

[백준-5582] 공통 부분 문자열

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다