플라스크(Flask) ; 정적 파일과 템플릿(HTML/CSS/JavaScript)

 이번 포스팅에서는 정적 파일과 템플릿에 대해서 적었습니다.

 아마 다들 마찬가지시겠지만, 플라스크를 이용해 서버를 띄우고 난 뒤에는 당연하게 드는 의문이 있습니다.

 지금까지야 단순하게 문자열 형태를 리턴하여 화면에 출력했는데, HTML 파일 같은 경우는 어떻게 가져와서 출력할까? 라는 생각입니다. 물론 텍스트로 파싱(Parsing) 해도 되기야 하지만, 아무리 생각해도 적절한 방법은 아닌것 같습니다.

 결론부터 말씀드리자면, 당연하게도 플라스크에서도 HTML이나 CSS, JavaScript와 같은 파일들을 읽어 사용할 수 있습니다. 이에 대해 간략히 소개해보겠습니다. 우선 지금까지 우리는 항상 하나의 파일에서 작업을 해 왔습니다. 그러나 이제는 파일들을 분리하고자 합니다. 플라스크에서는 이러한 파일들의 위치를 특정 경로로 지정하고 있습니다..

 현재 아래쪽에 스크린 샷으로 찍어둔 template과 py 파일의 경로를 반드시 지키셔야 하며, 만약 그렇지 않으시려면 하나의 폴더에 모든 파일을 넣는 방법을 택하셔야 합니다.

 그다지 복잡하지는 않습니다. 실행하려는 py 파일과 같은 경로상에 templates 폴더를 생성하여 두고 사용합니다. static 폴더의 경우 임의로 지정한 값입니다. css나 icon 등과 같은 정적 파일들을 폴더없이 관리할 경우 매우 지저분해지기 때문에, 해당 폴더를 만들었습니다. 이 static 과 같은 폴더에 접근하는 방식은 다음과 같습니다.

url_for('static', filename='style.css')

 위 url_for의 리턴값은 /static/style.css 입니다. 이 부분에 대한 설명은 이 정도만 드리도록 하겠습니다.

 위 스크린샷은 작성해야 할 디렉토리 구조입니다. 스크린샷에는 hello.py가 아래쪽에만 표시되어 있지만 실제로 src 폴더 내에 static, template 폴더와 함께 들어있습니다. 이제 폴더를 만드셨다면, templates 폴더 안에 임의의 html 파일을 작성해 보겠습니다.

<!-- hello.html -->
hello {{ name }}!!

 사실 위에 작성한 것은 html이라기에도 생소한 문법을 가지고 있는데, 해당 html에서 {{ ... }} 은 변수나 표현식의 결과값을 의미합니다. 실제로 오리지널 html에서 위와 같이 사용하지는 않지만, 플라스크에 들어있는 신사2 라고 하는 템플릿 엔진이 이러한 방식을 사용할 수 있게 해 준다고 생각하시면 됩니다.

 이제 html을 작성했으니 hello.py의 코드를 아래와 같이 작성합니다.

# hello.py
from flask import Flask, render_template
app = Flask(__name__)

@app.route("/hello/")	
@app.route("/hello/")
def hello(name=None):
	return render_template('hello.html', name=name)
	
if __name__ == "__main__":
	app.run()

 이전 포스팅(동적 URI)에서 사용했던 예제와 별달리 크게 바뀐 것은 없습니다. 우선 flask로부터 render_template 모듈을 import 한 뒤에 app 함수의 리턴값을 render_template 함수의 리턴값으로 설정하고 있습니다. 첫번째 인자는 읽어야 할 템플릿명이고, 두번째 인자부터는 입력되는 변수입니다. 여기서 변수는 key=value의 형태로 입력됩니다.

 위쪽의 app.route("/hello/<name>") 부분에-앞으로는 route() 데코레이터라고 부르겠습니다- 대해서는 이전에 설명드렸듯이 <변수>의 형태로 동적 URI를 사용할 수 있고, 이 값을 현재 hello 함수에서 인자로 받고 있습니다. 그리고 이 인자는 결국 render_template 함수에서 사용되고 있습니다.

 과연 잘 수행되는지를 확인하기 위해서, cmd 창을 열어 해당 /src/ 폴더로 이동한 뒤 "python hello.py"로 실행해보았습니다. 이후 브라우저로 확인해보면 이전 포스팅(동적 URI)에서 만들었던 것과 기능상으로는 같은 화면이 만들어 집니다.

 동일한 기능이라면 물론 간단한 편이 좋겠지만, 이제 우리는 템플릿을 불러와 사용할 수 있게되었고, 화면이 더 복잡해지더라도 좀 더 스마트하게 웹 서비스를 만들 수 있게 되었습니다.