Flask로 웹페이지를 만들어보자

BeautifulSoup를 이용해 youtube에서 긁어온 정보를 Flask에 넣어보려고 한다.(BeautifulSoup 크롤링 포스팅)

VS에서 Flask 프로젝트는 워낙 기본 샘플이 잘 돼있어서 초보자도 금방 따라할 수 있다.

시작!

1)

Flask Web Project를 선택해 새 프로젝트를 하나 만든다.

첫 번째의 'Install into a virtual environment'를 선택해준다.

로컬에서야 그냥 파이썬 패키지를 써도 되지만, 

나중에 실제로 웹에 게시할 때엔 가상 환경이 필요하기 때문에 이를 쓴다.

저번에 일을 하다가 Python 2.7한테 엿을 먹은 뒤로는 항상 Python 3.4 버전을 쓴다.

참고로 Python 3.5는 Azure Web 게시가 되지 않고, 아직 Flask에 완전히 최적화되지 않아 좀 불안정하다.

그럼 이렇게 짜여진 프로젝트가 나온다!

이 상태에서 바로 F5를 눌어 게시해보면

다음과 같이 멋진 사이트가 나온다!

부트스트랩 기반으로 만들어진, 정말 간단하고도 멋진 사이트다.

2)

멋진 사이트 구경 했으니 이제 본인에게 맞춰서 지우거나 추가해보자.

난 필요없는 것들을 전부 지웠다. About이나 Contact 같은.

우리가 Flask를 다룰 때 행할 동작들은 대부분 views.py 에서 짠다.

일단 views.py의 필요없는 부분들을 다 지우고 나면,

from flask import render_template

from youtube_flask_web import app

@app.route('/')

@app.route('/home')

def home():

return render_template('index.html')

이렇게 남는다.

딱봐도 뭐가 어떻게 작동하는지 보일 것이다.

@app.route('/') 는 웹이 작동하는 경로를 - 예를 들어 http://mywebpage.com/ 이 뒤의 경로를 나타낸다.

그러니까, @app.route('/home') 은 http://mywebpage.com/home 을 나타내는 것이다.

상대경로라서 매우 편하다.

return render_template('index.html') 은 def home(): 을 실행했을 때, 어떤 html 페이지가 출력될지를 결정한다.

그러니까, 위의 코드대로만 하자면, / 혹은 /home 의 경로로 가면 index.html 이라는 템플릿이 나타난다는 것이다.

그렇다면 우리가 해줄 일은 저기 def home() 안을 채우고 그에 따라 index.html 을 적절히 만들어 원하는 정보를 출력해주는 것이다.

크롤링은 저번에 만들었던 유튜브를 크롤링한 코드를 거의 그대로 가져왔다.

views.py 최종본.

def home(): 에는 간단하게 한 줄 추가하고, render_template()에 index.html과 함께 eminem_info_list를 보내주었다.

def home():

eminem_info_list = get_eminem_video_link('https://www.youtube.com/user/EminemVEVO/videos')

return render_template('index.html', eminem_info_list=eminem_info_list)

3)

이제 index.html로 들어가서 render_template() 으로 보낸 eminem_info_list를 요리해보자.

html에서 Python 코드를 쓰는 방법은 다음과 같다.

{% for infos in eminem_info_list %} ...html code... {% endfor %}

{% %} 안에 Python 코드를 적어주는데, 반드시 {% end... %} 를 적어줘야 한다는 것을 잊지 말자.

(if의 경우에도 {% endif %} 를 적어주어야 한다.)

그리고 html 코드 안에 직접 Python 변수를 넣고 싶으면 {{...}} 과 같은 형식으로 중괄호 두 개 사이에 적어주어야 한다.

위와 같이 코드를 짜고 돌려보니,

Flask 웹페이지가 다음과 같이 바뀌었다!

제목은 웬만하면 다 보이려고 했으나 

틀이 깨지기에 CSS파일을 수정해 글자수를 제한해서 뿌렸다.

#title{

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

width:280px;

}

하하 재미있다.

근데 유튜브 페이지를 크롤링한 뒤 웹페이지에 넣으려니 시간이 조금 걸린다.

다음에는 DB에 데이터를 미리 넣어놓은 뒤 사용해볼까 한다.