web/back + front

flask에서 부트스트랩 가져와서 돌리기.

qkqhxla1 2017. 5. 20. 16:18

기본적인 지식이 전무할 경우 

http://flask.pocoo.org/docs/0.12/tutorial/

http://flask.pocoo.org/docs/0.12/quickstart/

부트스트랩에 대해 기본적인걸 읽고 오자.


일단 flask를 시작한지 몇일 안되었고, 단순히 위의 docs만 읽었다. 부트스트랩은 한번도 해본 적 없고, 이번에 기회가 생겨서 연동한 삽질 내용만 적겠다.


일단 글을 쓰는 이유는 나는 웹 구축이 처음이다. 웹 구축을 하면서,해보려고 시도하면서 가장 어려웠던 점은 돌아가는 서버 위에 부트스트랩 같은 템플릿(?초보라 맞는 말인지 모르겠네요) 을 가져와서 올려놓는 것이었다. 

개인만의 블로그나 페이지를 만들고 싶을때, 대부분 백엔드는 대충 할수 있다. 프로그래밍적인 로직이 필요하니 어떻게든 찾아서 하면 될것같다. php책을 보거나, flask튜토리얼만 봐도 대충 구조를 잡을수 있다. 
하지만 문제는 프론트다. 프론트는 처음 시작하는 사람들은 그럴듯하게 만들 수 없다. '그럴듯하게'라는 단어를 따지면 백엔드도 어렵지만 프론트는 그냥 어디서부터 시작해야될지 모르는 느낌이다.(저만 그럴지 모르지만.) html 책을 사도 기본 문법만 나와있고 '이쁘게 처음부터 페이지 만드는 법'. 이런걸 설명해놓은 책이 내 경험상은 없었다.
프론트를 모른다고 가정해도 부트스트랩 같은것만 할줄 알면 예제 템플릿을 아예 가져와서 조금씩 수정해나가면서 본인만의 웹서버를 만들 수 있다고 생각한다. 처음부터 만드는것과 만들어져있는것을 수정하는건 다르니깐. 그리고 틀이 있어 더 필요한건 붙여넣기만 하면 된다.


그런데 내 검색능력이 부족했는지 이런걸 설명해주는 블로그가 없었다. 아니면 애초에 이미 다들 해봐서 안적었거나... 이번에 flask로 프로젝트가 잡혔는데 오랫동안 궁금했던 거여서 이번 기회에 공부한점을 올린다. 글 내용은 flask를 대충 알고, 부트스트랩도 개념만 아는 상태에서 flask위에 부트스트랩 페이지를 띄우는거다. 여기 다 적을순 없으니 flask에 관한건 위에 tutorial과 quickstart를 각각 두번정도씩 정독하고 읽으면 이해가 편할듯 싶다.



1. bootstrap은 어려운 프론트 작업 같은걸 만들어 놓은 템플릿이라고 생각한다. 가져다가 실행시켜보고 이쁘면 거기서 원하는만큼 바꾸면 된다. http://blog.getbootstrap.com/2016/07/25/bootstrap-3-3-7-released/ 에서 부트스트랩을 다운로드 받을 수 있다. 다운로드 받고 안의 docs/examples에서 어떤 예제가 있는지 실행시켜 볼 수 있다. 첫번째에 있는 blog예제를 flask에서 띄울거다.


2. flask용 폴더를 하나 만든다. 난 boot라고 이름지었다. 그리고 boot디렉터리 안에 static폴더와 templates폴더를 만든다. 더 있을지 모르겠는데 flask에서는 static폴더 안에 css등을 넣고, templates폴더 안에 index.html같은 템플릿들을 넣어야 한다. 실행시킬때 이 디렉터리를 먼저 찾아보니 미리 만들어주자.(mvc구조를 위해서였나 그렇다고 알고 있다.) 


3. /boot/bootstrap-3.3.7/docs/examples/blog/index.html 경로에 예제로 실행시킬 blog의 index.html이 있다. 이걸 열어서 살펴보자. 여기서 다른 폴더에서 참조하는 js나 css라던지, url정보만 빼보자. 이 정보에 있는 로컬 파일들이 필요하다는 의미니까 미리 가져오기 위함이다. (원래 이렇게하는지는 모르겠다.) 


<link rel="icon" href="../../favicon.ico">

<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

<link href="blog.css" rel="stylesheet">

<script src="../../assets/js/ie-emulation-modes-warning.js"></script>

<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>

<script src="../../dist/js/bootstrap.min.js"></script>

<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>


가 있다. favicon.ico는 굳이 필요없으니 안 가져오고, 나머지를 가져와서 위에서 만든 static폴더에 넣자. 그러면 구조가 이렇게 된다. (맨아래있는 run_server.py는 static과 같은 폴더 안에 있다. blog를 돌리기 위한 flask코드가 있다.)
하나하나 삽질하면서 궁금했던건 assets에 있는 js들은 굳이 없어도 외형의 변화가 없는데 왜 있는지 모르겠다.

이처럼 구조를 만들었으니 이제 templates에 있는 index.html에 있는 절대경로들을 url_for 함수를 이용해서 수정해주자.
굳이 이 함수를 쓰지 않고 경로를 잘만 바꿔도 되지만 flask 코딩컨벤션(?)에 맞춰서 프로그래밍 하기 위함이다.


그리고 {{ 변수 }} 이 문법은 flask의 jinja2문법이다.
참고 : http://flask.pocoo.org/docs/0.12/templating/


<link href="{{ url_for('static', filename='style/bootstrap.min.css') }}" rel="stylesheet">

<link href="{{ url_for('static', filename='assets/css/ie10-viewport-bug-workaround.css') }}" rel="stylesheet">

<link href="{{ url_for('static', filename='style/blog.css') }}" rel="stylesheet">

<script src="{{ url_for('static', filename='assets/js/ie-emulation-modes-warning.js') }}"></script>

<script>window.jQuery || document.write('<script src="{{ url_for('static', filename='assets/js/vendor/jquery.min.js') }}"><\/script>')</script>

<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>

<script src="{{ url_for('static', filename='assets/js/ie10-viewport-bug-workaround.js') }}"></script>


절대경로들을 모두 flask의 url_for함수로 대체하였다. 첫번째 인자가 static이므로 static폴더를 기본경로로 찾아본다. 그래서 첫번째 bootstrap.min.css의 경우 style/bootstrap.min.css로 경로를 썼음에도 알아서 잘 찾는다. 나머지도 마찬가지.


run_server.py를 아래처럼 만들고 실행한다.

# -*- coding: utf-8 -*-

from flask import Flask, request, render_template
app = Flask(__name__)

@app.route('/')
def index():
	return render_template('index.html')

if __name__ == "__main__":
	app.run()

기본경로에 render_template함수로 index.html을 맵핑했다. render_template는 기본적으로 templates폴더에 있는 소스코드를 참조한다 : http://stackoverflow.com/questions/23435150/python-flask-render-template-not-found


이제 runserver.py를 실행시키면 제대로 페이지가 나타난다!


페이지는 많이 띄워보고싶었는데 페이지를 띄워볼까..? -> 플라스크같은걸 알아야되네? 공부하면 -> jinja2이런걸 알아야되네? -> 프론트 하려면 부트스트랩을 또 공부해야되네? -> 거기에 뭔가 에러가 하나 뜨게 되면 알기도 힘드네? 이렇게 계속 무한루프가 돌다보니 귀찮아짐도 많아지고 의욕이 줄었는데 일적으로 해야 하니까 공부하게됐다... 위 페이지 하나 띄우는데 몇일이 걸렸는지 모르겠지만 대충 틀이 잡히니 기쁘다.

'web > back + front' 카테고리의 다른 글

vue+flask 시작. python flask와 연동.  (0) 2018.07.09
vue+flask 시작. webpack.  (2) 2018.07.02
es6 proxy  (0) 2017.04.16
react.js 무료강좌  (0) 2017.03.09
Blocking-NonBlocking-Synchronous-Asynchronous  (0) 2017.02.20