본문 바로가기
코드스테이츠 AI 부트캠프/Section 4

Flask

by yunyoung424 2023. 6. 8.

Flask (2023.06.08)

 

웹 애플리케이션 개발하기 위해 사용하는 도구 중 하나인 Flask에 대해 학습했다.

[ 주요 개념]

데이터 직군과 웹 개발 업무의 상관성?

(나는 데이터 업무 하고 싶은데 왜 개발에 사용되는 Flask를 배울까?)

→ 데이터 직군과 웹 개발 업무는 상호 보완적인 관계를 가지고 있다. 데이터 직군에서는 데이터 수집, 전처리, 분석, 모델링 등을 통해 가치 있는 정보를 추출하고 결정을 내리는 역할을 한다. 데이터 처리 결과를 다른 사람들과 공유하거나 활용하기 위해서는 웹 애플리케이션을 통해 데이터를 시각화하거나 모델을 배포해야 하고 이때 웹 개발에 대한 이해도가 필요하다!!

 

플라스크(Flask) vs  장고(Django) 

Flask와 Django 모두 파이썬 기반의 웹 프레임워크로, 웹 애플리케이션 개발을 위해 사용된다.

 

 

Flask:

  • 마이크로 웹 프레임워크(Micro Web Framework) → 웹 프레임워크: 웹 애플리케이션을 개발할 수 있도록 웹 서비스(Web Service)나 웹 API(Web API) 등을 제공하고 웹 개발과 배포를 할 수 있는 특정 방법을 제공한다. 쉽게 말해 뭔가를 만들어낼 수 있는 도구 모음을 제공한다.
  • 핵심 기능에 초점을 맞추고 추가적인 기능은 확장 기능으로 제공된다.
  • 필요한 부분만 선택적으로 사용할 수 있도록 설계되어 있어 개발자가 원하는 대로 애플리케이션을 구성할 수 있어 높은 수준의 유연성을 가지고 있음을 의미함
  • ORM(Object-Relational Mapping)을 기본으로 제공하지 않고, 데이터베이스 접근을 위한 독립적인 라이브러리를 사용할 수 있다. ⇒ DB 접근 방식을 자유롭게 선택할 수 있음
  • 작은 규모의 프로젝트나 간단한 API 개발에 적합하며, 빠르게 개발하고자 할 때 유용

장점:

  • 경량화되어 있어 간단한 애플리케이션을 빠르게 개발할 수 있다.
  • 유연한 구조로 필요한 기능을 선택적으로 사용할 수 있다.
  • 다른 라이브러리나 도구와 쉽게 통합할 수 있다.

단점:

  • 대규모 애플리케이션의 구조를 유지하기 위해서는 추가적인 구성과 확장이 필요.
  • 공식적인 ORM을 제공하지 않아 데이터베이스 처리를 위한 라이브러리 선택이 필요.

 

Django:

  • 강력한 기능을 제공하며, 웹 개발에 필요한 다양한 기능을 내장하고 있다. (ORM(Object-Relational Mapping)을 포함하여 데이터베이스 접근과 관련된 기능, 폼 처리, 사용자 인증, 권한 관리, 캐싱, 세션 관리 등 포함)
  • 고유의 디자인 패턴인 MTV(Model-Template-View)를 따르며, 이를 통해 코드의 재사용성과 유지보수성을 높일 수 있다.(DB 모델을 정의하는 모델(Model), 사용자에게 보이는 템플릿(Template), 비즈니스 로직을 처리하는 뷰(View)로 구성)
  • 강력한 관리자 인터페이스를 제공하여 데이터베이스의 CRUD(Create, Read, Update, Delete) 작업을 편리하게 처리할 수 있어 관리자 화면을 따로 개발하지 않고도 데이터를 관리할 수 있다.
  • 보안과 성능에 중점을 두고 개발되어 안정적이고 신뢰할 수 있는 웹 애플리케이션을 개발하도록 지원

장점:

  • 완성도가 높은 웹 프레임워크로서 다양한 기능을 내장하고 있다.
  • 안정성과 보안에 대한 관심과 지원이 강조됨
  • MTV 디자인 패턴과 관리자 인터페이스를 통해 생산성이 높아짐

단점:

  • 초기 설정과 구성이 상대적으로 복잡할 수 있다
  • 학습 곡선이 높아 초보자에게는 다소 어려울 수 있다.
  • 프레임워크의 제한적인 구조 때문에 특정한 요구사항에 대한 유연한 대응이 어려울 수 있다.

 

Flask 실습

  • Flask 애플리케이션 생성

__init__. py 파일에 코드 담기

# __init__.py
# Flask로 웹 애플리케이션 만들기

from flask import Flask

app = Flask(__name__)

⇒ Flask(__name__) : 해당 애플리케이션 이름 지정

 

CLI 로 실행하기

CLI 명령어로 실행할 때에는 프로젝트 폴더의 상위 디렉토리에서 실행하면 된다.

FLASK_APP=flask_app flask run

 

 

  • 라우트 추가하기

'Hello World!' 띄우기

# __init__.py

from flask import Flask

app = Flask(__name__)

@app.route('/') #=> 127.0.0.1:5000 + '/' => 127.0.0.1:5000/ 
def index():
    return 'Hello World!'

⇒ @app.route('/') : 루트 주소 ('/')에 접속했을 때에 실행하라는 의미, URL에 따라 실행하게 될 함수를 지정하는 역할.

 

라우트 

 

HTTP Request 메서드

HTTP Request 기본 메서드 : GET, HEAD, OPTIONS

POST, PUT, PATCH, DELETE 등 다른 메서드를 통과하도록 설정하려면 데코레이터 함수에 methods인자 추가하면 됨

# POST 메서드 추가
@app.route('/', methods=['POST', 'GET'])
def index():
    ...

 

세부 엔드 포인트

# index/뒤에 숫자를 넣으면 해당 번호가 출력되게하는 방법
@app.route('/index/<num>') # <>모양으로 어떤 변수를 받겠다고 설정할 수 있음
def index_number(num):
    return 'Welcome to Index %i' % int(num)
#숫자가 안 주어지면 0 을 기본으로 설정
@app.route('/index/', defaults={ 'num' : 0 })
@app.route('/index/<num>')
def index_number(num):
    return 'Welcome to Index %i' % int(num)

 

블루프린트 사용

기능이 많아지면 라우트도 많아짐 → 라우트들을 기능별로 나눠 블루프린트 기능을 사용

블루프린트 : Flask에서 여러 개의 라우트를 한 곳에 묶어둘 수 있는 기능

사용 방법 : flask_app 폴더 안에 routes폴더를 만들고 안에 user_routes.py라는 파이썬 파일 생성

# 프로젝트 구조

flask_app
├── __init__.py
└── routes
    └── user_routes.py

# user_routes.py

from flask import Blueprint

bp = Blueprint('user', __name__, url_prefix='/user')

@bp.route('/')
def index():
    return 'User index page'
  • 'user' : 블루프린트 명칭
  • name : 블루프린트 import 이름
  • url_prefix='/user' : URL 접두어 설정 (해당 블루프린트 라우트는 URL 앞에 '/user'가 자동으로 붙음)
# __init__.py 파일에서 해당 파일을 불러와서 사용

from flask import Flask
from flask_app.routes import user_routes

app = Flask(__name__)
app.register_blueprint(user_routes.bp)

@app.route('/')
def index():
    return 'Hello World!'

(... 생략  ...)

 

 

Jinja

  • 웹 템플릿 엔진 (Web Template Engine)
  • 템플릿 엔진은 맞춤형 웹 페이지를 자동으로 생산할 수 있도록 도와준다.
  • 장고(Django)의 템플릿 엔진을 모델링함
  • 파이썬 문법과 친화적인 도구라 어렵지 않게 익히고 사용가능
  • Jinja2는 Flask 설치와 함께 오기 때문에 추가 설치가 필요 X

 

Jinja 표현

HTML 파일에서 Jinja를 사용할 때는 중괄호 '{ }'를 많이 사용

<body>
  <h1>
   {{ title }}
  </h1>
</body>

⇒ title 변수를 <h1> 태그 안에 넣어서 렌더링 하는 방식

Jinja에서 주로 활용되는 표현식 :

  • {%... %} : 구문에 사용 (if, for 등).
  • {{... }} : 템플릿 결과(html)에 출력할 표현 (변수 등)
  • {#... #} : 주석 처리할 때 사용

 

Flask에서 Jinja로 변수 넘기기

Jinja에 변수 전달할 때 render_template 함수를 사용.
해당 함수를 실행할 때 인수로 변수를 넘겨주면 html 파일에서 받아 사용할 수 있음

# apple, banana 넘겨줌
(... 생략 ...)
@app.route('/')
def index():
    apple = 'red'
    apple_count = 10
    return render_template('index.html', fruit_color=apple, number=apple_count)

<!-—html 파일—->
(... 생략 ...)

<body>
   <h2>
	  Apple is {{ fruit_color }}
   </h2>
   <h2>
	  {{ number }} 개의 과일이 있습니다.
   </h2>
</body>

(... 생략 ...)

 

Jinja 기능

객체 태그

Flask 애플리케이션에서 파이썬 변수 넘겨받아 사용 가능 (문자열, 숫자, 딕셔너리, 리스트 등 사용 가능)

표현 방식 : {{ 변수명 }}

# var=[1, 2, 3] 
{{ var }}

파이썬 딕셔너리나 리스트 같은 경우 점 표기(dot notation)나 괄호 표기(bracket notation)로 세부적인 선택 가능

# fruits = { 'apple' : 'red', 'banana' : 'yellow' }에서 apple의 키 값만 출력
{{ fruits.apple }}

# vegetables = [ 'cucumber', 'spinach' ]에서 0번째 인덱스 값 출력
{{ vegetables[0] }}

 

if 구문

{% if True %}
<h1>It is True</h1>
{% endif %}

파이썬과 비슷하게 if... elif... else처럼 사용가능

#{% if %} ... {% elif %} ... {% else %} ... {% endif %}
{% if True %}
<h1>It is True</h1>
{% elif False %}
<h1>It is False</h1>
{% else %}
<h1>It is not True</h1>
{% endif %}

 

for 구문

for 구문은 리스트를 받거나 딕셔너리를 받았을 때 매우 유용하게 사용가능.

⇒ 각 반복마다 Jinja에서 제공하는 loop 활용해 추가 정보를 얻을 수 있다.

 

loop 속성 설명

loop.index 반복 순서 1부터 1씩 증가
loop.index0 반복 순서 0부터 1씩 증가
loop.first 반복 순서가 처음일 경우 True 아니면 False
loop.last 반복 순서가 마지막일 경우 True 아니면 False

 

Jinja 상속

Jinja 핵심 기능 중 하나인 상속은 반복적으로 사용되는 부분들을 하나로 묶어서 사용할 수 있게끔 해준다.

  • {% extends %}
  • {% block %}... {% endblock %}

 

상속

다른 템플릿 파일을 상속받아 사용가능. 즉, 부모 - 자식 관계 형성 가능

<!-- base.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    {% block head %}
    <title>{% block title %}{% endblock %} - My Webpage</title>
    {% endblock %}
</head>
<body>
    <div id="content">{% block content %}{% endblock %}</div>
    <div id="footer">
        {% block footer %}
        &copy; Copyright 2008 by <a href="<http://domain.invalid/>">you</a>.
        {% endblock %}
    </div>
</body>
</html>

<!-- child.html파일을 base.html파일과 같은 경로에 생성, base.html 파일 내용을 상속 -->
{% extends "base.html" %}
{% block title %}Index{% endblock %}
{% block head %}
    {{ super() }}
{% endblock %}
{% block content %}
    <h1>Index</h1><p class="important">
      Welcome to my awesome homepage.
    </p>
{% endblock %}

⇒ child.html 은 base.html로부터 상속받음

⇒ 상속은 첫 줄에 위치해야 함!

 

※ 127.0.0.1:5000/main으로 접속했을 때 어떤 함수가 실행될까??

→ main 함수!!

 

진자 블록

<head>
    {% block head %}
    <title>{% block title %}{% endblock %} - My Webpage</title>
    {% endblock %}
</head>

 

템플릿 엔진이 상속했을 때에 구별할 수 있도록 이름을 지어주는 것, 자식이 부모 블록의 내용을 사용하려면 super로 사용 가능

 

Bootstrap

  • 프론트엔드에 대한 최소한의 지식으로 다양하고 예쁘게 꾸밀 수 있도록 도와주는 도구
  • 단순한 웹 애플리케이션을 제작하고 프론트엔드에 큰 비중이 없을 때 최소한의 HTML, CSS 지식으로 쉽게 사용할 수 있다

 

설치

부트스트랩은 설치하지 않고 HTML 헤더 부분에 자바스크립트와 CSS 링크만 넣으면 동작

<!-- CSS only --> : 부트스트랩의 스타일만 가지고 올 때 사용. 모양만 부트스트랩에서부터 가지고 올 수 있는 링크

<!-- JavaScript Bundle with Popper --> : 동작이 필요한 경우 같이 삽입

 

컴포넌트

부트스트랩에서 사전에 스타일링 등 설정을 거친 상태이기 때문에 HTML 만 복사해서 사용가능하다.

  • 바) : 웹 페이지 제일 상단에 메뉴 생성 가능
  • Buttons(버튼) : 클릭할 때 많이 사용

이외에도 많은 종류의 컴포넌트가 있다! 공식 페이지에서 확인 가능!!!

저작자표시 비영리 변경금지 (새창열림)

'코드스테이츠 AI 부트캠프 > Section 4' 카테고리의 다른 글

시간과 부호  (0) 2023.06.12
BI & Dashboard  (0) 2023.06.12
Docker(도커)  (0) 2023.06.07
NoSQL(Not Only SQL)  (0) 2023.06.02
API(Application Programming Interface)  (0) 2023.05.31

관련글

댓글

티스토리툴바