시작에 앞서
해당 내용은 <가장 빠른 풀스택을 위한 Flask & FastAPI>, Dave Lee 지음. BJ Public 출판.
내용을 토대로 작성되었습니다. 보다 자세한 사항은 해당 교재를 참고하시기 바랍니다.
정적 파일(Static files)
정적 파일은 웹 서버가 따로 처리 없이 그대로 전달해주는 파일을 말한다. (이미지, CSS, 자바스크립트 파일 등의 리소스)
이러한 정적 파일들은 사용자의 액션에 따라 변경되지 않고, 미리 서버에 저장되어 있다.
플라스크에서 정적 파일 다루기
app.py 파일 안에서 플라스크 인스턴스를 생성하고, 이미지를 제공할 라우트를 설정.
플라스크는 이미 /static 경로로 저적 파일을 제공하는 기본 설정이 있기 때문에 추가적인 설정 없이도 파일을 제공한다.
그럼에도 특정 경로로 파일을 제공하고 싶을 때는 send_from_directory() 함수를 사용한다.
#send_from_directory() 함수 사용법
from flask import Flask, send_from_directory
app = Flask(__name__)
@app.route('/image')
def get_image():
return send_from_directory(app.static_folder, 'image.jpg')▶ app.static_folder 는 플라스크가 기본으로 사용하는 정적 파일의 디렉터리 경로를 참조한다.
이 경우 기본값은 프로젝트 폴더 내의 static 이며, 디렉터리명을 아래와 같이 직접 작성할 수도 있다.
send_from_directory('static', 'image.jpg')정적 파일과 웹페이지 구현
플라스크를 사용하는 프로젝트의 폴더 구조는 일반적으로 아래와 같다.
- static: 정적 파일이 저장되는 폴더. 이미지, 자바스크립트, CSS 파일 등을 이곳에 저장한다
- templates: HTML 템플릿 파일이 저장되는 폴더. 플라스크는 Jinja2 템플릿 엔진을 사용하여 HTML을 랜더링한다.
app.py 파일에서 플라스크 애플리케이션 설정과 라우트 설정을 아래와 같이 한다.
from flask import Flask, render_template
app = Flask(__name__)
# 메인 페이지 라우트
@app.route("/")
def home():
return render_template("index.html")
templates 폴더 안에 위치한 index.html 파일은 다음과 같이 작성한다.
<!DOCTYPE html>
<head>
<meta charset="UTF-8>"
<title>Flask and Static Files</title>
</head>
<body>
<h1>Welcome to Flask!</h1>
<img src="{{ url_for('static', filename='image.jpg' ) }}"
alt="Example Image">
</body>
</html>
그리고 플라스크 애플리케이션에서 flask run 실행 후 http://127.0.0.1:5000/ 에 접속하면
플라스크에서 정적 파일과 템플릿을 사용하는 것은 웹사이트 개발에서 매우 일반적인 작업이다. 정적 파일은 CSS와 자바스크립트 등을 포함하여 사용자 경험을 풍부하게 하고, 템플릿은 서버에서 HTML을 동적으로 생성하여 사용자에게 전달한다.
플라스크는 웹 개발의 기본적인 요소들을 간단하게 구현할 수 있게 해주며, static과 templates 디렉터리의 사용을 통해 프로젝트의 구조를 명확하게 구분한다. 이를 통해 개발자들은 코드를 보다 체계적으로 관리하고, 협업할 때 각자의 코드 부분을 쉽게 찾을 수 있도록 돕는다.
캐싱(caching)은 웹 성능을 향상시키는 중요한 기능 중 하나이다. 정적 파일은 변하지 않기 때문에 한 번 로딩된 정적 파일을 사용자의 브라우저가 임시 저장해두면 다음에 빠르게 불러올 수 있다.
단, 정적 파일이 수정되면 웹페이지상에 정상 반영이 안될 수 있는데, 이런 경우에는 url_for() 함수의 version 인자를 사용하여 캐시 문제를 해결할 수 있다.
<link rel="stylesheet" href="{{ url_for('static', filename='style.css', version='1.0') }}">기존 웹페이지 통합
플라스크를 사용하여 웹 애플리케이션을 개발할 때, 가끔은 기존에 이미 작성된 웹페이지를 플라스크 내에서 동작하도록 만들어야 할 때가 있다. 이러한 경우, 플라스크 설정을 약간만 조절하면 기존 웹페이지를 쉽게 통합할 수 있다.
예를 들어, 기존에 이미 작성된 index.html 이 있다고 가정하고
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page!</h1>
<img src="img/image.jpg" alt="Example Image">
</body>
</html>
프로젝트의 폴더 구조를 아래와 같이 설정한다.
- app.py: 플라스크 애플리케이션의 메인 실행 파일
- static/: 정적 파일을 저장하는 폴더
- img/: 이미지 파일을 저장하는 하위 폴더
- image.jpg: 웹 페이지에서 사용할 이미지 파일
- templates/: HTML 템플릿을 저장하는 폴더
- index.html: 앞의 예제 HTML 파일
◆ 코드를 수정하여 사용하는 방법
index.html 에 있는 이미지 경로를 플라스크의 기본 정적 파일 경로인 /static/로 변경하는 방법
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page!</h1>
<!-- 이미지 경로를 플라스크의 정적 파일 경로로 변경-->
<img src="/static/img/image.jpg" alt="Example Image">
</body>
</html>
페이지가 정상적으로 로딩되고 이미지가 표시되면 제대로 변경된 것이다.
◆ 코드 수정 없이 사용하는 방법 1
기존의 /img/ 경로를 그대로 사용한 index.html이 있다고 가정하고
아래의 코드를 통해 /img/로 들어오는 요청을 static/img 디렉터리로 리디렉션하여 처리한다.
from flask import Flask, send_from_directory, render_template
app = Flask(__name__)
# '/img/' 경로에 대한 라우트를 추가하여 정적 이미지 파일 제공
@app.route('/img/<path:filename>')
def custom_static(filename):
return send_from_directory('static/img', filename)
@app.route('/')
def home():
return render_template('index.html')
역시 http://127.0.0.1:5000/ 페이지가 잘 로딩되고 이미지가 잘 표시되면 성공이다.
◆ 코드 수정 없이 사용하는 방법 2
static_url_path를 사용하여 정적 파일 경로를 임의 폴더로 설정할 수도 있다.
from flask import Flask, render_template
app = Flask(__name__, static_url_path='/img', static_folder='static/img')
@app.route('/')
def home():
return render_template('index.html')
이 역시 http://127.0.0.1:5000/ 페이지가 잘 로딩되고 이미지가 잘 표시되면 성공이다.
이 설정을 사용하면, /img/ 경로를 통해 접근하는 정적 파일 요청이 static/img 폴더로 리디렉션 된다. 이 경우에도 기존 index.html 파일을 수정할 필요가 없다.
'[파이썬 Projects] > <파이썬 웹개발>' 카테고리의 다른 글
| [파이썬] 플라스크(Flask) - 세션과 쿠키 (0) | 2024.07.15 |
|---|---|
| [파이썬] 플라스크(Flask) - 블루프린트 (0) | 2024.07.15 |
| [파이썬] 플라스크(Flask) - 템플릿 (1) | 2024.07.14 |
| [파이썬] 플라스크(Flask) - 요청과 응답 (1) | 2024.07.14 |
| [파이썬] 플라스크(Flask) - 라우팅 (2) (1) | 2024.07.14 |
