[TIL] Flask, Jinja, Bootstrap

hyewon·2021년 12월 2일
0

TIL

목록 보기
32/59
post-thumbnail

Flask

Flask란 파이썬에서 사용하는 웹 프레임워크로 웹 페이지를 만들때 틀을 제공해준다.

파이썬에서 웹 페이지를 만들 때 주로 사용하는 프레임워크는 플라스크와 장고가 있는데 플라스크는 가볍고, 장고는 무겁다. 여기서 무겁다는 뜻은 프레임워크가 제공하는 기능이 많다는 뜻이다. 장고는 새로운 기능을 추가하거나, 현재 기능의 변경이 어려운 편이지만 플라스크는 쉬운 편이다. 집을 짓는다고 예를 들면 장고는 집의 뼈대, 방 위치, 개수, 화장실의 위치 등을 정해주지만 플라스크는 집의 뼈대만 제공해준다. 때문에 플라스크에서 새로운 기능을 추가하거나 현재 기능을 변경할 때 어려움 없이 쉽게 바꿀 수 있다. 다시 말해서 플라스크는 정말 최소한의 도구들을 모아놓은 프레임워크인 것이다.

실행

# flask_app/__init__.py

from flask import Flask

app = Flask(__name__) # 어플리케이션 이름 지정

# CLI

FLASK_APP=flask_app flask run

위의 __init__.py 파일은 flask_app이라는 폴더 안에 있는 파일이므로, FLASK_APP 에는 flask_app 폴더명이 들어간다.
app = Flask(__name__)을 어디서 선언하느냐에 따라서 FLASK_APP에 들어갈 이름이 달라지게 되므로 위치가 중요하다. 만약 __init__.py 파일이 없고, app.py에서 app를 선언하게 된다면 FLASK_APP에는 app가 들어가게 된다.

__init__.py 에서 app를 선언한다면 __init__.py 파일이 속해있는 폴더 이름을 FLASK_APP에 넣어주면 된다. 왜 __init__.py 파일에서 app를 선언하면 FLASK_APP에 폴더 이름을 넣어주게 될까? 그 이유는 __init__.py는 폴더 자체를 모듈화 시키기 때문이다. 폴더를 일반 폴더라고 인식하지 않고 파이썬 모듈이라고 인식시켜주기 때문이다.

route

# flask_app/__init__.py

from flask import Flask

app = Flask(__name__) # 어플리케이션 이름 지정

@app.route('/')
def index():
	return 'Hi Flask'

@app.route('/') 의 뜻은 어플리케이션의 루트 주소('/')에 접속했을 때 실행하라는 뜻으로, 플라스크를 실행하면 바로 뜨는 화면의 주소라고 생각하면 된다.
route는 URL에 따라서 실행하게 될 함수를 지정하는 역할을 하고 있다.

127.0.0.1:5000/
127.0.0.1:5000/user

위의 주소에서 "/", "/user" 처럼 주소의 끝자락에 있는 것들을 바로 엔드포인트(endpoint)라고 불리며 router는 아래와 같이 엔드포인트 활용해서 함수를 지정해준다.

@app.route('/user')

추가적으로 엔드포인트를 작성할 때 슬래쉬(/)가 빠지게되면 에러를 일으킨다. 이유는 기본적으로 URL 뒤에는 슬래쉬가 붙기 때문이다.

세부 엔드포인트

URL에는 슬래쉬로 이어진 긴 엔드포인트들이 있는데 이때 주소를 세부적으로 지정하고 주소에 값을 전달할 수도 있다.

@app.route('/user/<username>')
def index(username):
	return f'Hi {username}'

위와 같이 엔드포인트에 <> 모양으로 변수를 받겠다고 설정해줄 수 있다. 변수를 받을 때는 <str:username>과 같이 타입을 지정해줄 수도 있다. 또한, defaults 값을 지정해서 변수가 입력되지 않았을 때 defaults 값을 넣어줄 수도 있다.

@app.route('/user, defaults={'username':'hyewon'})
@app.route('/user/<username>')

Blueprint

플라스크의 공식 문서를 참고해보면 Blueprint는 다음과 같다.

Flask uses a concept of blueprints for making application components and supporting common patterns within an application or across applications.
Blueprints can greatly simplify how large applications work and provide a central means for Flask extensions to register operations on applications

응용 프로그램 간의 공통적인 패턴을 지원하기 위해서 blueprint를 사용한다. 대규모 응용 프로그램의 작동 방식을 크게 단순화하고 flask 확장이 응용 프로그램에 대한 작업을 등록하는 중앙 수단을 제공할 수 있다고 한다.

아래의 구조와 같이 생긴 프로젝트가 있을 때 blueprint를 사용할 수 있다.

flask_app
∟ __init__.py
∟ routes
   ∟ user_routes.py
# user_routes.py

from flask import Blueprint

bp = Blueprint('user', __name__, url_prefix='/user')
			# 'bp이름', bp import 이름, URL 엔드포인트 설정

@bp.route('/')
def user:
	return 'User page'

@bp.route('/<name>'):
	return f'{name} page'

여기서 주의할 점은 url_prefix 인수이다. url_prefix='/user'는 기본 URL의 엔드포인트에 '/user'가 들어가야한다는 뜻이다.
'127.0.0.1:5000'이 기본 URL이라면 user_routes.py 안의 user함수를 실행하기 위해서는 '127.0.0.1:5000/'이 아닌 '127.0.0.1:5000/user'으로 접속해야한다.

위와 같이 bp를 선언했다면 마지막으로 __init__.py에서 bp를 추가해줘야한다. 추가해주지 않으면 bp가 선언된지 flask가 모르기때문에 제대로 된 주소로 접속을 해도 에러가 뜨게 된다.

# __init__.py

from flask_app.routes import user_routes

...

app.register_blueprint(user_routes.bp)

...

Jinja

진자는 웹 템플릿 엔진으로 맞춤형 웹 페이지를 좀 더 편리하게 만들 수 있도록 도와준다. 진자는 주로 HTML 문서에서 {{ 변수명 }} 과 같은 형식으로 사용되며, 플라스크에서 진자로 변수를 넘겨서 받아 사용하는 방식이다.

# index.html

<h1> {{ title }} </h1>
# app.py

...
@app.route('/')
def index():
	color = 'red'
    return render_template('index.html', color=color)

...

또한 {{ }} 안에 if문, for문 등을 넣어서 파이썬처럼 사용할 수도 있다. 그리고 진자의 장점 중 하나는 상속이 가능하다는 점이다.

상속

진자에서는 다른 템플릿 파일을 상속 받아서 사용할 수 있는데 부모 템플릿의 경로를 자식 템플릿의 첫줄에 적어주면 사용할 수 있다.

~ 추가 예정 ... ~

Bootstrap

전에 배웠던 Bootstrap과 이름만 같고 다른 친구인데 웹에서의 Bootstrap은 프론트엔드를 다양하고 예쁘게 꾸밀 수 있도록 도와주는 도구이다. 부트스트랩의 장점 중 하나는 설치를 하지 않고 head 태그 안에 링크를 넣어주면 작동한다는 점이다.

Bootstrap 페이지에서 제공하는 CSS 링크와 JS 링크를 붙여넣으면 사용이 가능하다. CSS만 사용하고 싶다면 CSS 링크만, 둘 다 사용하고 싶다면 둘 다 넣어주면 된다.

Bootstrap 페이지에서는 컴포넌트들과 폼, 테이블 등 다양한 내용을 제공하고 있어서 내가 쉽게 구현하고자 하는 것이 있다면 부트스트랩 페이지를 참고해서 손쉽게 구현할 수 있다.

profile
우당탕탕 코린이

0개의 댓글