파이썬 플라스크 프레임워크 소개

 

플라스크는 작고 강력한 파이썬의 웹 프레임워크 입니다. 플라스크는 배우기 쉽고, 짧은 시간에 웹앱을 만들수 있습니다.

이 문서에서, 우리는 유동적인 내용을 포함하는 두개의 정적인 페이지로 만들어진 간단한 웹사이트를 만들어 볼 것입니다. 데이터베이스로 구동되는 복잡한 웹사이트를 만들기 앞서, 간단한 정적인 페이지로 플라스크 웹 프레임워크가 어떻게 작동하는지 배우도록 합니다. 이 튜토리얼을 완료하면서 배우는 단계들은 앞으로 다른 플라스크 앱을 만들때 큰 도움이 될 것입니다.

 

시작하기 앞서 플라스크를 설치해봅시다. 운영체제의 다양성 때문에 이 설치 단계에서도 다양한 문제가 발생할 수 있습니다. 만약 문제가 발생할 경우에는 우리 모두가 하듯이 에러 메시지를 구글에 검색해보거나 아래 코멘트에 질문을 하세요.

Virtualenv는 시스템 독립적인 파이썬 개발환경을 구축하는 유용한 도구입니다.

우리는 virtualenv로 독립적인 개발환경을 만들고 그 속에 플라스크를 설치하겠습니다. Virtualenv는 독립적인 파이썬 개발환경을 만들어주는 유용한 도구 입니다. 그래서 새로운 파이썬 라이브러리를 마음껏 시도해 볼수 있습니다. Virtualenv를 사용하지 않고 개발을 하다보면 시스템상에서 라이브러리 들이 엉망진창이 되는 경우가 있기 때문입니다. Virtualenv를 사용하면 샌드박스속에 설치가 되기 때문에 시스템의 라이브러리에 영향을 주지 않습니다. 샌드박스는 개발을 계속하는 동안 유지를 할 수있고, 필요가 없어지면 바로 삭제가 가능합니다. 그러므로 우리의 시스템을 깔끔하게 유지 할 수 있습니다.

시스템에 이미 virtualenv가 설치되어 있을 수도 있습니다. 아래의 커맨드를 실행해서 확인하세요.

1
$ virtualenv --version

만약 버전의 숫자가 표시된다면, 이미 당신의 시스템에서는 설치가 되어 있는 것입니다. '플라스크 설치'로 넘어가세요. 만약 'command was not found' 라고 나온다면 easy_install 이나 pip 을 사용해서 virtualenv를 설치합니다. Linux 나 Mac OS X를 사용하는 경우 아래의 커맨드를 사용하시면 됩니다.

1
$ sudo easy_install virtualenv

혹은:

1
$ sudo pip install virtualenv

혹은:

1
$ sudo apt-get install python-virtualenv

만약 pip 혹은 easy_install 커맨드가 없다면, 인터넷에서 설치 방법을 찾아보세요. Windows를 사용중이라면  다음 링크 를 참고하여 easy_install 를 설치 하세요.

Virtualenv를 설치한 후, 다음과 같이 독립된 개발 환경을 만들 수 있습니다:

1
$ virtualenv flaskapp

Virtualenv 가 flaskapp/ 폴더를 생성하고 내부적으로 사용될 새로운 파이썬 복사본 설치합니다. 또한 유용한 패키지 매니저인 pip도 설치합니다.

독립된 개발환경을 실행하기 위해 아래의 커맨드를 실행합니다.

1
2
$ cd flaskapp
$ . bin/activate

이제, 플라스크를 안전하게 설치 할 수 있습니다.

1
$ pip install Flask

아래와 같이 flaskapp/ 안에 잘 정돈된 폴더와 파일을 만들어 보겠습니다.

01
02
03
04
05
06
07
08
09
10
.
.
├── app
│   ├── static
│   │   ├── css
│   │   ├── img
│   │   └── js
│   ├── templates
│   ├── routes.py
│   └── README.md

flaskapp/ 내에 모든 파일을 포함하고 있는 app/ 폴더를 만듭니다. app/ 폴더 안에 static/ 폴더를 만듭니다. 이곳에는 앱에 필요한 이미지와 CSS파일 그리고 자바스크립트 파일이 들어가게 됩니다. 추가적으로 templates/ 폴더를 만들어 앱에서 사용될 탬플을 저장한다. 빈 파이썬 파일 routes.py 를 만들고 URL 라우팅 코딩을 하겠습니다.

그리고 프로젝트에 대한 설명을 적을 README.md 파일을 만들도록 하겠습니다.

이제 우리의 프로젝트에 파일들이 어디에 들어갈지 정했습니다.  하지만 어떻게 이 파일들을 연결을 해야 할까요? 아래 Fig. 1 을 봅시다.

Fig. 1

  1. 도메인의 루트 URL/ 로 접속한다면 홈페이지로 이동을 할 것입니다.
  2. routes.py 는 URL /  에서 파이썬 플라스크를 실행합니다.
  3. 플라스크는 templates/ 폴더안의 템플릿을 찾습니다.
  4. 템플릿은 static/ 폴더 안에서 HTML 페이지를 표시하기 위한 이미지 파일, CSS, 자바스크립트 파일을 찾습니다.
  5. 생성된 HTML 페이지는 routes.py 로 다시 보내집니다.
  6. routes.py 가 브라우저에 HTML을 보냅니다.

우리는 웹브라우저에서 request를 다루는 것부터 알아 보겠습니다. 사용자가 주소창에 URL을 타이핑하면, 파이썬 플라스크 코드가 포함된 routes.py를 실행하게 됩니다. 플라스크는 templates/ 폴더에서 템플릿을 찾고 HTML 페이지를 만들어 다시 브라우저로 보냅니다. 플라스크는 데이터베이스에서 내용을 가져다 템플릿에 넘겨줄수도 있지만, 이번에 다루는 것은 정적인 페이지에 관한것이라 관련 내용은 넘어가도록 하겠습니다.

우리가 만들 프로젝트가 어떻게 돌아가야 할지 알았습니다. 이제 웹앱의 홈페이지 만들기를 시작하죠.

반복되는 페이지를 만드는 일은 지루한 일입니다. 게다가, 새로운 CSS 파일을 만들어야 한다면 더욱더 귀찮죠. 모든 페이지에 CSS 코드를 새로 추가 해야 할 것입니다. 그것은 시간이 많이 들고 에러가 발생하기 쉽습니다. 반복적인 HTML문을 작성하는 것 보다 하나의 페이지 레이아웃을 정해놓고 필요할때마다 내용을 집어 넣는 다면 아주 편리하겠죠? 그것이 웹 템플릿이 하는 일입니다.

웹 템플릿은 단순히 텍스트 파일이지만 변수와 제어문 (if...elsefor,등)을 포함하고 .html 또는.xml 확장명을 가집니다.

웹 템플릿이  사용될때 마다 변수들은 내용에 따라서 변경됩니다. 웹 템플릿은 반복적인 일을 없애고 내용을 디자인으로 부터 분리해서 앱을 관리하기 쉽게 만들어 줍니다. 쉽게 말해서, 웹 템플릿은 멋지고 당연히 사용하는게 좋습니다! 플라스크는 Jinja2 템플릿 엔진을 사용합니다. 어떻게 작동하는지 보죠.

첫번째로 우리는 HTML 문서의 뼈대로 사용될 layout.html파일을 만들어 templates/ 폴더에 넣겠습니다.

app/templates/layout.html

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
  <head>
    <title>Flask App</title>   
  </head>
  <body>
   
    <header>
      <div class="container">
        <h1 class="logo">Flask App</h1>
      </div>
    </header>
     
    <div class="container">
      {% block content %}
      {% endblock %}
    </div>
     
  </body>
</html>

이것은 단순히 일반적인 HTML 파일처럼 보이지만 {% block content %}{% endblock %} 는 생소하시죠? home.html 파일을 만들면서 알아 봅시다.

app/templates/home.html

1
2
3
4
5
6
7
{% extends "layout.html" %}
{% block content %}
  <div class="jumbo">
    <h2>Welcome to the Flask app<h2>
    <h3>This is the home page for the Flask app<h3>
  </div>
{% endblock %}

layout.html 에는 content라고 불리는 자식 템플릿이 들어가는  블럭이 정의되어 있습니다. home.html 파일은 layout.html의 자식 템플릿으로 여러가지 특징을 상속받습니다. 즉, layout.html은 당신의 사이트의 공통 요소를 정의하고 각각의 자식 템플릿은 내용에 맞게 부모 템플릿으로 받은 요소들을 수정해 사용합니다.

어떻게 우리가 이 페이지를 실행  있을까요? 어떻게 브라우저에 URL을 입력 하고 home.html에 접속할 수 있을까요? 다시 Fig. 1로 돌아가 봅시다. 우리는 방금 home.html 템플릿 을 만들어 templates/ 폴더에 넣었습니다. 이제 브라우저에서 볼수있도록 URL을 맵핑합니다. routes.py을 열고 아래 처럼 수정합니다:

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

app/routes.py

01
02
03
04
05
06
07
08
09
10
from flask import Flask, render_template
 
app = Flask(__name__)     
 
@app.route('/')
def home():
  return render_template('home.html')
 
if __name__ == '__main__':
  app.run(debug=True)

routes.py에 수정한 내용을 알아봅시다.

  1. 먼저, 우리는 플라스크 클래스와 함수 render_template를 가져옵니다.
  2. 그런다음, 우리는 플라스크 클래스에 새로운 인스턴스를 만듭니다.
  3. URL / 에 함수 home()을 매핑합니다. 그러면 이제 URL에 접속한다면 home()이 실행니다.
  4. 함수 home() 는 플라스크 함수 render_template()를 사용 하여 temlplate/ 폴더에서 home.html 을 렌더링하여 브라우저로 보냅니다.
  5. 마지막으로, run() 사용 하여 로컬 서버에 앱을 실행합니다. debug 모드를 true로 설정했기 때문에 우리가 뭔가 잘못 하는 경우 해당 오류 메시지를 볼 수 있습니다. 그리고 코드가 변경되면 로컬 서버는 자동으로 다시 로드 합니다.

이제 그동안 작업한 결과를 볼때가 되었습니다. 커맨드라인으로 돌아서 다음과 같이 입력합니다:

1
$ python routes.py

웹 브라우저에서 http://localhost:5000 을 접속합니다.

http://localhost:5000/ 에 접속하면 routes.py에 파이썬 함수 home()가 실행됩니다. home() 은 서식 파일에 있는 웹 템플릿 home.html 을 렌더링 하 고 그것을 우리의 브라우저 상에서 보여줍니다.

굉장히 멋지죠, 하지만 이 홈페이지는 좀 지루해보입니다. CSS 코드를 추가해 좀 더 멋지게 합시다. main.css파일을 만들어 static/css/ 폴더에 넣습니다.

static/css/main.css

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
body {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #444;
}
 
/*
 * Create dark grey header with a white logo
 */
  
header {
  background-color: #2B2B2B;
  height: 35px;
  width: 100%;
  opacity: .9;
  margin-bottom: 10px;
}
 
header h1.logo {
  margin: 0;
  font-size: 1.7em;
  color: #fff;
  text-transform: uppercase;
  float: left;
}
 
header h1.logo:hover {
  color: #fff;
  text-decoration: none;
}
 
/*
 * Center the body content
 */
  
.container {
  width: 940px;
  margin: 0 auto;
}
 
div.jumbo {
  padding: 10px 0 30px 0;
  background-color: #eeeeee;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
}
 
h2 {
  font-size: 3em;
  margin-top: 40px;
  text-align: center;
  letter-spacing: -2px;
}
 
h3 {
  font-size: 1.7em;
  font-weight: 100;
  margin-top: 30px;
  text-align: center;
  letter-spacing: -1px;
  color: #999;
}

이 스타일 시트를 layout.html에 추가해서 자식 템플릿에도 쓸수 있도록 합시다.

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

우리는 플라스크의 함수 url_for를 사용해 static 폴더의  main.css파일의 URL주소를 생성합니다. 이제 layout.html 아래와 같이 보여야 합니다.

app/templates/layout.html

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
  <head>
    <title>Flask</title>   
    <strong><link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}"></strong>
  </head>
  <body>
    <header>
      <div class="container">
        <h1 class="logo">Flask App</h1>
      </div>
    </header>
     
    <div class="container">
      {% block content %}
      {% endblock %}
    </div>
  </body>
</html>

브라우저로 돌아가서 CSS가 적용된 결과를 확인해 봅시다.

좀 더 보기 좋네요!  http://localhost:5000/ 에 접속하면 routes.py 은 아직도 URL / 에서 home() 이 작동 하고 home()은 여전히 templates/ 폴더에서 웹 템플릿 home.html 찾습니다. 하지만, 웹 템플릿 home.html 보이기 전에 CSS 파일인 main.css가 렌더링을 하고 브라우저에 전송하는 과정이 필요해 보입니다.

이미 많은 작업을 했습니다. Fig.1 을 보고 어떻게 플라스크가 작동되지는 배우고 웹앱에 필요한 홈페이지를 만들었씁니다.  이제 About 페이지를 만들어 봅시다.

이전 섹션에서 우리는 웹 템플릿 home.html 을 layout.html을 사용해서 만들었습니다. 그런다음 URL / 을 home.html로 연결되도록 routes.py를 수정했습니다. 그리고 CSS파일을 추가해서 멋지게 만들었죠. 다시 반복해서 새로운 about 페이지를 만들어 봅시다.

이제 웹 템플릿 about.html을 만들어 temlplates/ 폴더에 넣어 봅시다.

app/templates/about.html

1
2
3
4
5
6
{% extends "layout.html" %}
  
{% block content %}
  <h2>About</h2>
  <p>This is an About page for the Intro to Flask article. Don't I look good? Oh stop, you're making me blush.</p>
{% endblock %}

layout.html을 상속받아서 home.html를 만들었습니다. content 블럭을 이용해 새로운 내용을  채웠었죠.

이  페이지에 접속하기 위해서는 URL을 새롭게 매핑할 필요가 있습니다. routes.py 파일을 열고 다음과 같이 맵핑을  추가합니다:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
from flask import Flask, render_template
  
app = Flask(__name__)
  
@app.route('/')
def home():
  return render_template('home.html')
  
@app.route('/about')
def about():
  return render_template('about.html')
  
if __name__ == '__main__':
  app.run(debug=True)

우리는 URL /about 을 함수 about()에 매핑하겠습니다. 이제 브라우저를 열고  http://localhost:5000/about로 접속하면 새로 만들 페이지를 확인할 수 있습니다.

대부분의 웹사이트들은 헤더나 푸터에 메인페이지로 돌아가는 링크가 있습니다. 이런 링크는 모든 웹사이트의 모든 페이지에서 보여집니다. 이제 layout.html 파일을 열어 봅시다. 그리고 아래의 코드를 추가해서 자식 템플릿에서 보여지게 하세요. 정확하게는 <nav> 엘리먼트를 <header> 코드 안에 넣으세요.

app/templates/layout.html

01
02
03
04
05
06
07
08
09
10
11
12
13
...
<header>
  <div class="container">
    <h1 class="logo">Flask App</h1>
    <strong><nav>
      <ul class="menu">
        <li><a href="{{ url_for('home') }}">Home</a></li>
        <li><a href="{{ url_for('about') }}">About</a></li>
      </ul>
    </nav></strong>
  </div>
</header>
...

다시 한번, 플라스크 함수인 url_for을 사용해서 URL을 만들겠습니다.

그리고 main.css에 코드를 추가해서 네비게이션 엘리먼트가 멋져보이게 하겠습니다.

app/static/css/main.css

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
...
 
/*
 * Display navigation links inline
 */
 
.menu {
  float: right;
  margin-top: 8px;
}
 
.menu li {
  display: inline;
}
 
.menu li + li {
  margin-left: 35px;
}
 
.menu li a {
  color: #999;
  text-decoration: none;
}

마지막으로 브라우저를 열고 http://localhost:5000/ 을 새로고침한다면 새로운 네이게이션 링크가 추가 된것을 볼수 있습니다.

우리는 두개의 정적인 페이지로 구성된 간단한 웹앱을 만들어 보았습니다. 이것을 통해 플라스크가 어떻게 작동하는지 배우셨고 앞으로는 좀 더 복잡한 웹사이트를 만들수 있을 것입니다. 플라스크는 간단하지만 강력한 프레임워크로 효율적으로 웹앱을 만들수 있습니다.

 

[출처] https://code.tutsplus.com/ko/tutorials/an-introduction-to-pythons-flask-framework--net-28822

 

 

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
번호 제목 글쓴이 날짜 조회 수
251 Data Structures and Algorithm In python 파이썬으로 자료구조와 알고리즘 : 출처 인터넷 file 졸리운_곰 2018.08.27 315
250 Mastering Basic Algorithms in the Python Language 이북 출처 인터넷 file 졸리운_곰 2018.08.27 381
249 텐서플로우-#1 자료형의 이해 file 졸리운_곰 2018.08.15 272
248 How to build a simple neural network in 9 lines of Python code file 졸리운_곰 2018.08.14 294
247 node.js python-shell을 활용하여 python 실행 file 졸리운_곰 2018.08.14 365
246 Python, PyV8로 javascript 실행하기 file 졸리운_곰 2018.08.14 221
» 파이썬 플라스크 프레임워크 소개 졸리운_곰 2018.08.03 130
244 주피터(jupyter notebook) 원격 접속 file 졸리운_곰 2018.07.10 142
243 Pycharm 원격 서버 연결하기 file 졸리운_곰 2018.07.10 249
242 The Ultimate Flask Front-End – Part 2 file 졸리운_곰 2018.06.22 85
241 The Ultimate Flask Front-End file 졸리운_곰 2018.06.22 139
240 Django + djangorestframework + django_rest_swagger 시작 file 졸리운_곰 2018.05.27 65
239 Does Python SciPy need BLAS? 졸리운_곰 2018.05.26 85
238 PyCharm과 함께 DJango와 RestFramework를 활용한 웹 사이트 구축하기 file 졸리운_곰 2018.05.22 192
237 Flask-RESTPlus에서 REST API와 Swagger 문서를 통합 file 졸리운_곰 2018.05.22 353
236 Building beautiful REST APIs using Flask, Swagger UI and Flask-RESTPlus file 졸리운_곰 2018.05.22 263
235 [Python] Flask & flask-restplus && swagger ui file 졸리운_곰 2018.05.22 147
234 Django에서 MySQL DB를 연동하기 pycharm file 졸리운_곰 2018.04.10 427
233 Python Flask 로 간단한 REST API 작성하기 file 졸리운_곰 2018.04.07 226
232 Mining English and Korean text with Python file 졸리운_곰 2018.03.26 8121
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED