Flask Static Files
웹 애플리케이션은 종종 javascript 파일 혹은 CSS 파일과 같이 웹 페이지를 보여주는데 도움을 주는 정적(static) 파일이 필요합니다. 보통 웹 서버는 정적 파일을 사용할 수 있게 설정되어 있지만, 개발 과정 중에는 정적 파일은 package 내 혹은 모듈 옆의 static 폴더에서 제공됩니다. 혹은 정적 파일은 애플리케이션의 /static에서 사용할 수 있습니다.
특별한 종단점(endpoint)인 ‘static’은 static 파일의 URL을 생성하는데 사용됩니다.
아래의 예시 코드를 살펴보겠습니다. hello.js에 정의되어 있는 javascript 함수가 index.html 내의 HTML 버튼의 OnClick 이벤트에서 호출되고 있습니다. index.html은 Flask 애플리케이션의 ‘/’ URL을 나타나는 스크립트입니다.
먼저 Flask 웹 애플리케이션 코드입니다. ‘/’ URL에서 index.html 스크립트를 보여줄 것입니다. 특별한 내용은 없습니다.
from flask import Flask, render_template
app = Flask(__name__) @app.route("/") def index(): return render_template("index.html") if __name__ == '__main__': app.run(debug = True) |
다음은 index.html 코드입니다. head에서 url_for() api를 사용하여 ‘static’ 폴더 내의 ‘hello.js’ 스크립트를 읽어옵니다. body에서 button을 하나 생성하고, 클릭이 발생하면 sayHello() 함수를 호출할 것입니다. button에는 “Say Hello”가 써있습니다.
<html>
<head> <script type = "text/javascript" src = "{{ url_for('static', filename = 'hello.js') }}" ></script> </head> <body> <input type = "button" onclick = "sayHello()" value = "Say Hello" /> </body </html> |
다음은 sayHello() 함수를 포함하고 있는 hello.js 코드입니다. 앞에서 설명한대로 button을 누르면 이 javascript의 sayHello()가 호출됩니다. 기능은 단순하게 경보용 창을 뛰워서 “Hello Wolrd”를 보여줍니다.
function sayHello() {
alert("Hello World") } |
먼저 Flask 웹 애플리케이션 코드를 실행하고, URL http://localhost:5000/을 입력합니다. 그러면 index.html 스크립트가 브라우저에 표시됩니다. index.html에서 버튼을 생성하였고, 버튼에는 “Say Hello”라는 문구가 들어가 있습니다. 다음과 같은 창을 볼 수 있을 것입니다.
그리고 이 버튼을 누르면 onClick 이벤트로 등록해둔 sayHello() 함수가 호출됩니다. sayHello() 함수는 head 태그 안에서 참조하는 hello.js 파일에서 가져옵니다. hello.js 파일 내의 sayHello() 함수의 기능은 단순합니다. Hello World가 표시된 경고창을 보여주는 것이 전부입니다. 결과는 다음과 같을 것입니다.
이 기능을 담당하는 hello.js 파일은 static 폴더에 저장되어 있고, Flask의 url_for() 함수로 파일의 경로를 지정해주었습니다. 결과적으로 웹 애플리케이션이 실행되고 index.html 스크립트가 실행될 때 hello.js 파일을 /static/hello.js 파일을 찾아서 sayHello() 함수가 실행됩니다.
댓글 없음:
댓글 쓰기