Flask
플라스크(Flask)는 웹 페이지를 만들 수 있게 해주는 파이썬의 웹 프레임워크입니다. 이전 글[Flask] 플라스크 기초 실습 (python Web Framework)에서 플라스크의 기본 개념과 간단한 예제를 살펴보았습니다.
www.youtube.com/watch?v=zpBzgV9DAeQ&list=PLU9-uwewPMe0ynomccdrAX2CtVbahN4hD&index=13
이번 시간엔 유튜브 조코딩 채널에서 진행한 로또 번호 추천 사이트를 Flask 버전으로 진행해 보겠습니다.
위의 영상에서는 백엔드의 개념을 설명해주고 Goormide를 사용하여, 'Ruby on Rails' 라는 웹 프레임워크로 로또 번호 추천 사이트를 만듭니다. 저는 'Ruby on Rails' 대신 'Flask'를 이용한다는 점을 제외하곤 모두 동일하게 진행해 보겠습니다.
Goormide란?
Goormide는 클라우드 개발 환경으로, 필요한 툴(Flask, python, html, css 등)이 모두 설치된 환경을 컨테이너 형태로 불러올 수 있습니다. 장점으로는, 코드만 짜면 바로 실행할 수 있다는 점입니다.
Flask와 Html 연결해서 로또 번호 추천하기
코드보기: ide-run.goorm.io/workspace/lotto_flask?language=us#
코드 실행시 생성되는 사이트: lottopractice123.run.goorm.io/
<결과 화면>
python 코드 (application.py)
from flask import Flask, render_template
import random
app = Flask(__name__)
@app.route("/")
def hello():
lotto_li = list(range(1,46))
lotto = sorted(random.sample(lotto_li, 6))
return render_template("index.html", variable=lotto)
if __name__ == "__main__":
app.run(host='0.0.0.0', port=5000)
* 코드 설명: 3부분으로 나누어 설명하겠습니다.
1) import 라이브러리 & app 객체 생성
from flask import Flask, render_template
import random
application = Flask(__name__)flask 라이브러리에서 Flask기능과 render_template 기능을 import 합니다. 그리고, 로또 6글자를 랜덤으로 추천해주기 위해 random 라이브러리를 import 합니다.
application 변수에 Flask 객체를 할당합니다. (Flask 함수를 이용해 할당. 자세한 설명은 [Flask] 플라스크 기초 실습 (python Web Framework) 참조)
2) 주소 지정 & 함수 정의
@application.route("/")
def hello():
lotto_li = list(range(1,46))
lotto = sorted(random.sample(lotto_li, 6))
return render_template("index.html", variable=lotto)@application.route('/')는 접속할 주소에서 다음에 나오는 함수를 실행하게 해주는 명령어입니다. '/'는 해당 주소의 시작을 의미하며, 주소에 접속하면 hello함수가 실행되게 합니다. (자세한 설명은 [Flask] 플라스크 기초 실습 (python Web Framework) 참조)
hello함수 내부
1부터 45까지 수를 list형태로 만들어 lotto_li에 할당합니다. 그 후, random함수의 sample기능을 이용해 lotto_li에서 랜덤으로 6개의 숫자를 뽑은 뒤 sorted함수로 정렬하여 lotto에 할당합니다. 여전히 리스트 형태입니다. (random.sample의 결과 역시 리스트로 반환되기 때문) 마지막으로, render_template함수를 이용해 index.html에 variable로 lotto(6자리 리스트)를 전달하며 함수가 종료됩니다.
3) app 실행
if __name__ == "__main__":
application.run(host='0.0.0.0', port=5000)host='0.0.0.0'은 모든 외부 접속을 허용한 다는 의미이며, 외부에서 접속할때 포트를 5000번으로 지정하여 웹을 실행한다는 의미입니다. 해당 사이트에 접속하면 가장 기본 페이지('/')에서 hello함수가 실행될 것입니다.
HTML (index.html)
<head>
<style>
/* 645 ball */
.ball_645 {display:inline-block; border-radius:100%; text-align:center; vertical-align:middle; color:#fff; font-weight:500;}
.ball_645.lrg {width:60px; height:60px; line-height:56px; font-size:28px}
.ball_645.sml {width:24px; height:24px; line-height:22px; font-size:13px}
.ball_645.not {color:#777}
.ball_645.sml.not {font-weight:300}
.ball_645.ball1 {background:#fbc400; text-shadow: 0px 0px 3px rgba(73, 57, 0, .8)}
.ball_645.ball2 {background:#69c8f2; text-shadow: 0px 0px 3px rgba(0, 49, 70, .8)}
.ball_645.ball3 {background:#ff7272; text-shadow: 0px 0px 3px rgba(64, 0, 0, .8)}
.ball_645.ball4 {background:#aaa; text-shadow: 0px 0px 3px rgba(61, 61, 61, .8)}
.ball_645.ball5 {background:#b0d840; text-shadow: 0px 0px 3px rgba(41, 56, 0, .8)}
table tr td .ball_645.sml {margin:0 3px}
</style>
</head>
<p>
<span class="ball_645 lrg ball1">{{ variable[0] }}</span>
<span class="ball_645 lrg ball2">{{ variable[1] }}</span>
<span class="ball_645 lrg ball3">{{ variable[2] }}</span>
<span class="ball_645 lrg ball4">{{ variable[3] }}</span>
<span class="ball_645 lrg ball5">{{ variable[4] }}</span>
<span class="ball_645 lrg ball5">{{ variable[5] }}</span>
</p>
- 위의 HTML은 조코딩 유튜브에 그대로 설명됩니다.
*코드 설명: 2부분으로 나누어 설명하겠습니다.
1) HTML 부분
해당 HTML은 Lotto홈페이지의 HTML을 그대로 복사 붙여 넣기 한 뒤에, Flask로부터 전달받을 변수 variable의 각 요소를 작성한 것입니다. (variable로는 lotto라는 6개의 수로 이루어진 list가 할당됩니다.)
<p>
<span class="ball_645 lrg ball1">{{ variable[0] }}</span>
<span class="ball_645 lrg ball2">{{ variable[1] }}</span>
<span class="ball_645 lrg ball3">{{ variable[2] }}</span>
<span class="ball_645 lrg ball4">{{ variable[3] }}</span>
<span class="ball_645 lrg ball5">{{ variable[4] }}</span>
<span class="ball_645 lrg ball5">{{ variable[5] }}</span>
</p>2) CSS 부분
해당 부분 역시 Lotto 홈페이지의 CSS를 그대로 복사 붙여넣기 한 부분이며, CSS파일로 만들어도 되지만, 오류가 발생해서 <style> 태그 내부에 넣었습니다.
<head>
<style>
/* 645 ball */
.ball_645 {display:inline-block; border-radius:100%; text-align:center; vertical-align:middle; color:#fff; font-weight:500;}
.ball_645.lrg {width:60px; height:60px; line-height:56px; font-size:28px}
.ball_645.sml {width:24px; height:24px; line-height:22px; font-size:13px}
.ball_645.not {color:#777}
.ball_645.sml.not {font-weight:300}
.ball_645.ball1 {background:#fbc400; text-shadow: 0px 0px 3px rgba(73, 57, 0, .8)}
.ball_645.ball2 {background:#69c8f2; text-shadow: 0px 0px 3px rgba(0, 49, 70, .8)}
.ball_645.ball3 {background:#ff7272; text-shadow: 0px 0px 3px rgba(64, 0, 0, .8)}
.ball_645.ball4 {background:#aaa; text-shadow: 0px 0px 3px rgba(61, 61, 61, .8)}
.ball_645.ball5 {background:#b0d840; text-shadow: 0px 0px 3px rgba(41, 56, 0, .8)}
table tr td .ball_645.sml {margin:0 3px}
</style>
</head>goormide에서 URL 지정하는 법
python application.py를 실행하고 goormide에서 URL 지정후 들어가면 위의 결과 화면이 출력됩니다. (새로고침 할 때마다 번호가 바뀝니다.)
'Back-End > Flask' 카테고리의 다른 글
| [Flask] 플라스크 기초 실습 (python Web Framework) (0) | 2020.09.07 |
|---|