자습서: Visual Studio에서 Flask와 함께 정적 파일 제공 및 템플릿 상속 사용

아티클
01/26/2025

이 문서에서는 Visual Studio Flask 웹 프레임워크로 작업하기자습서 시리즈의 3단계를 제공합니다.

이 자습서 시리즈의 이전 단계에서는 자체 포함 HTML의 단일 페이지를 사용하여 최소 Flask 앱을 만듭니다. 최신 웹앱은 일반적으로 많은 페이지로 구성되며 CSS 및 JavaScript 파일과 같은 공유 리소스를 사용하여 일관된 스타일 지정 및 동작을 제공합니다. 3단계에서는 Visual Studio 항목 템플릿을 사용하여 Flask 프로젝트에 콘텐츠를 추가하고 애플리케이션의 기능을 확장합니다.

자습서의 3단계에서는 다음 방법을 알아봅니다.

Visual Studio 항목 템플릿을 사용하여 상용구 코드로 새 파일을 빠르게 추가
Flask 코드에서 정적 파일 제공
Flask 앱에 페이지 추가
템플릿 상속을 사용하여 페이지 간에 머리글 및 탐색 만들기

필수 구성 요소

Visual Studio 솔루션 및 Flask 애플리케이션 프로젝트는 1단계: Flask 프로젝트 만들기 만들고 2단계에서 업데이트됨: Flask 프로젝트리팩터링합니다.

Visual Studio에서 항목 템플릿 살펴보기

Flask 애플리케이션을 개발할 때 일반적으로 Python, HTML, CSS 및 JavaScript 파일을 더 많이 추가합니다. Visual Studio는 각 파일 형식(및 배포에 필요할 수 있는 web.config 같은 기타 파일)에 대해 시작하는 데 편리한 항목 템플릿을 제공합니다. 이러한 템플릿을 사용하여 상용구 코드를 사용하여 다양한 형식의 새 파일을 빠르게 추가할 수 있습니다.

사용 가능한 템플릿을 보려면 Visual Studio에서 솔루션 탐색기 이동하여 프로젝트 구조를 엽니다.
파일을 새로 만들고자 하는 폴더를 마우스 오른쪽 버튼으로 클릭한 다음, 추가>새 항목을 선택합니다. 새 항목 추가 대화 상자가 열립니다.

Visual Studio 2022의 새 항목 추가 대화 상자에서 사용 가능한 템플릿을 보여 주는

Visual Studio의 새 항목 추가 대화 상자에서 사용 가능한 템플릿을 보여 주는
템플릿을 사용하려면 원하는 템플릿을 선택하고 파일 이름을 입력한 다음 추가선택합니다.

Visual Studio는 현재 프로젝트에 파일을 추가하고 소스 제어에 대한 변경 내용을 표시합니다.

Visual Studio에서 항목 템플릿을 식별하는 방법 이해

Visual Studio 프로젝트 파일(.pyproj)에는 파일을 Python 프로젝트로 표시하는 프로젝트 형식 식별자가 포함되어 있습니다. Visual Studio는 이 형식 식별자를 사용하여 프로젝트 형식에 적합한 항목 템플릿만 인식하고 표시합니다. Visual Studio는 매번 정렬을 요청하지 않고 다양한 프로젝트 형식에 대해 다양한 항목 템플릿 집합을 제공하는 이 방법을 따릅니다.

앱에서 정적 파일 제공

Python을 사용하여 빌드된 웹앱에서(프레임워크를 사용하여) Python 파일은 항상 웹 호스트의 서버에서 실행되며 사용자의 컴퓨터로 전송되지 않습니다. CSS 및 JavaScript와 같은 다른 파일은 브라우저에서만 사용되므로 호스트 서버는 요청 시 as-is 전달하기만 합니다. 이러한 형식의 파일을 "정적" 파일이라고 하며, Flask는 코드를 작성할 필요 없이 파일을 자동으로 배달할 수 있습니다. 예를 들어 HTML 파일 내에서 프로젝트의 상대 경로를 사용하여 정적 파일을 참조할 수 있습니다. 이 섹션의 첫 번째 절차에서는 기존 페이지 템플릿과 함께 정적 CSS 파일을 사용하는 방법을 보여 줍니다.

API 엔드포인트 구현과 같은 코드에서 정적 파일을 제공해야 하는 경우 Flask는 편리한 방법을 제공합니다. 프로젝트 루트에서 정적 폴더 내의 상대 경로를 사용하여 파일을 참조할 수 있습니다. 이 섹션의 두 번째 절차에서는 코드에서 간단한 정적 데이터 파일을 사용하는 방법을 보여 줍니다.

두 절차 모두 기본 설정에 따라 정적 폴더 아래에 파일을 구성할 수 있습니다.

템플릿에서 정적 CSS 파일 사용

템플릿에서 정적 파일을 사용하려면 다음 단계를 수행합니다.

솔루션 탐색기에서 프로젝트의 HelloFlask 폴더를 마우스 오른쪽 버튼으로 클릭한 다음, 추가>새 폴더를 선택하고 폴더 이름을 정적으로 지정하세요.
정적 폴더를 마우스 오른쪽 단추로 클릭하고 추가>새 항목선택합니다.
새 항목 추가 대화 상자에서 스타일시트 템플릿을 선택하고, 파일을 site.cs로 이름을 지정한 후 추가를 선택합니다.

Visual Studio는 프로젝트에 site.css 파일을 추가하고 편집기에서 파일을 엽니다. 업데이트된 Flask 프로젝트 구조의 예는 다음과 같습니다.

솔루션 탐색기의 정적 파일 구조를 보여 주는
site.css 파일의 내용을 다음 스타일로 바꿉니다.
```
.message {
    font-weight: 600;
    color: blue;
}
```
HelloFlask/templates/index.html 파일의 내용을 다음 태그로 바꿉니다.
```
<html>
   <head>
      <title>{{ title }}</title>
      <link rel="stylesheet" type="text/css" href="/static/site.css" />
   </head>
   <body>
      <span class="message">{{ message }}</span>{{ content }}
   </body>
</html>
```
이 코드는 자습서 시리즈의 2단계에서 <strong> HTML 요소를 message 스타일 클래스를 참조하는 <span> 요소로 바꿉니다. 이러한 방식으로 스타일 클래스를 사용하면 HTML 요소의 스타일을 유연하게 지정할 수 있습니다.
파일>모두 저장을 선택하여 프로젝트 변경 사항을 저장하거나 Ctrl+Shift+S 바로 가기 키를 사용합니다. (프로젝트를 개발할 때 Visual Studio에서 파일을 자동으로 저장하므로 이 단계는 필요하지 않습니다.)
프로젝트를 실행하고 결과를 관찰합니다. 완료되면 앱을 중지합니다.
(선택 사항) 변경 내용을 소스 제어에 커밋하고 원격 리포지토리를 업데이트할 수 있습니다. 자세한 내용은 이 자습서 시리즈의 2단계에서 소스 제어 변경 내용 커밋을 참조하세요.

코드에서 정적 파일 제공

Flask는 프로젝트의 정적 폴더 내의 모든 파일을 참조하기 위해 코드에서 호출할 수 있는 send_static_file 함수를 제공합니다. 다음 프로세스에서는 정적 데이터 파일을 반환하는 간단한 API 엔드포인트를 만듭니다.

정적 폴더에서 data.json정적 JSON 데이터 파일을 만듭니다. Text 파일 템플릿을 파일의 기초로 사용할 수 있습니다.
JSON 파일의 내용을 메커니즘을 보여 주는 몇 가지 샘플 데이터를 제공하는 다음 코드로 바꿉니다.
```
{
   "01": {
      "note" : "Sample data to demonstrate the mechanism."
   }
}
```
HelloFlask/views.py 파일에서 send_static_file 메서드를 사용하여 정적 데이터 파일을 반환하는 경로 /api/data 엔드포인트가 있는 함수를 추가합니다.
```
@app.route('/api/data')
def get_data():
  return app.send_static_file('data.json')
```
프로젝트 변경 내용을 저장하고 프로젝트를 다시 실행합니다. /api/data 경로 엔드포인트로 이동하여 앱이 정적 파일을 반환하는지 확인합니다.
완료되면 앱을 중지합니다.

정적 파일 및 폴더 구성

프로젝트 요구 사항에 따라 정적 폴더에 다른 CSS, JavaScript 및 HTML 파일을 추가할 수 있습니다. 정적 파일을 구성하는 일반적인 방법은 글꼴, 스크립트및 콘텐츠 (스타일시트 및 기타 파일의 경우)라는 하위 폴더를 만드는 것입니다.

API에서 URL 경로 및 쿼리 매개 변수 사용

Flask를 사용할 때 API를 사용하여 URL 변수 및 쿼리 매개 변수를 처리할 수 있습니다. 자세한 내용은 이 자습서 시리즈의 1단계에서 변수 URL 경로 및 쿼리 매개 변수 사용 참조하세요.

Flask 애플리케이션에 페이지 추가

Flask 애플리케이션에 다른 페이지를 추가하려면 다음 작업이 포함됩니다.

뷰를 정의하는 Python 함수 추가
페이지의 HTML 태그에 대한 템플릿 추가
Flask 프로젝트의 views.py 파일에서 URL 경로 업데이트

다음 단계에 따라 BasicProject Flask 프로젝트에 정보(/about) 페이지를 추가하고 홈페이지에서 해당 페이지에 대한 링크를 추가합니다.

솔루션 탐색기에서, 프로젝트의 HelloFlask/templates 폴더를 마우스 오른쪽 단추로 클릭한 다음, 추가>새 항목을 선택합니다.

팁

추가 메뉴에 새 항목 명령이 표시되지 않으면 필요에 따라 Visual Studio가 디버깅 모드를 종료하도록 Flask 앱을 중지해야 합니다.
새 항목 추가 대화 상자에서 HTML 페이지 템플릿을 선택하고 파일 이름을 about.html이름을 지정한 다음 추가를 선택합니다.

about.html 파일의 내용을 다음 HTML 태그로 바꿉니다.

<html>
   <head>
      <title>{{ title }}</title>
      <link rel="stylesheet" type="text/css" href="/static/site.css" />
   </head>
   <body>
      <div><a href="home">Home</a></div>
      {{ content }}
   </body>
</html>

이후 단계에서는 홈페이지에 대한 명시적 링크를 탐색 모음으로 바꿉 있습니다.

HelloFlask/views.py 파일에서 템플릿을 사용하는 about 함수를 추가합니다.

@app.route('/about')
def about():
   return render_template(
      "about.html",
      title = "About HelloFlask",
      content = "Example app page for Flask.")

HelloFlask/templates/index.html 파일에서 다음 태그를 <body> 요소의 첫 번째 문으로 추가합니다.
```
<div><a href="about">About</a></div>
```
이 태그는 Flask 앱의 /about 페이지에 대한 링크를 추가합니다. 이후 단계에서는 이 링크를 탐색 모음으로 바꿉 있습니다.
프로젝트 변경 내용을 저장하고 프로젝트를 다시 실행합니다. /about 페이지로 이동하여 다양한 앱 페이지 간 탐색을 확인합니다.
완료되면 앱을 중지합니다.

페이지 함수 이름 지정

Flask는 페이지 함수의 이름에 대한 제한 사항이나 요구 사항을 적용하지 않습니다. @app.route 데코레이터는 Flask가 응답을 생성하기 위해 함수를 호출하는 URL을 결정합니다. 개발자는 일반적으로 페이지 함수 이름을 경로에 일치하지만 이러한 유형의 일치는 필요하지 않습니다.

헤더 및 탐색에 템플릿 상속 사용

각 페이지의 명시적 탐색 링크 대신, 많은 웹앱에는 가장 중요한 페이지 링크, 팝업 메뉴 등을 제공하는 브랜딩 헤더와 탐색 모음이 있습니다. 앱 내에서 일관성을 유지하려면 머리글 및 탐색 모음이 모든 페이지에서 동일해야 하지만 모든 페이지 템플릿에서 동일한 코드를 반복할 필요는 없습니다. 단일 파일에서 모든 페이지의 공통 부분을 정의할 수 있습니다.

Flask의 템플릿 시스템(기본적으로 Jinja)은 여러 템플릿에서 특정 요소를 다시 사용하는 두 가지 방법을 제공합니다.

에 포함된은 {% include <template_path> %}구문을 사용하여 참조 템플릿의 특정 위치에 삽입하는 다른 페이지 서식 파일입니다. 코드에서 경로를 동적으로 변경하려는 경우 변수를 사용할 수도 있습니다. 포함은 일반적으로 페이지의 특정 위치에서 공유 템플릿을 끌어오기 위해 페이지 본문에 사용됩니다.
상속 페이지 템플릿의 시작 부분에 {% extends <template_path> %} 구문을 사용하여, 참조 템플릿이 기반으로 삼는 공유 기본 템플릿을 지정합니다. 상속은 일반적으로 앱 페이지의 공유 레이아웃, 탐색 모음 및 기타 구조를 정의하는 데 사용됩니다. 이 방법을 사용하려면, 블록이라는 기본 템플릿의 특정 영역만 추가하거나 수정하기 위해 참조 템플릿을 사용해야 합니다.

두 접근 방식 모두에서 <template_path> 값은 앱의 템플릿 폴더를 기준으로 합니다 (../ 또는 ./ 도 허용됩니다).

기본 템플릿은 {% block <block_name> %} 및 {% endblock %} 태그를 사용하여 블록을 설명합니다. 참조 템플릿에서 블록 이름이 같은 태그를 사용하는 경우 참조 템플릿의 블록 콘텐츠가 기본 템플릿에서 일치하는 블록을 재정의합니다.

다음 단계에서는 템플릿 상속을 보여 줍니다.

솔루션 탐색기에서 HelloFlask/templates 폴더를 오른쪽 클릭하고, HTML 페이지 템플릿에서 이름이 layout.html인 새 파일을 만듭니다.

layout.html 파일의 내용을 다음 HTML 태그로 바꿉니다.

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>{{ title }}</title>
   <link rel="stylesheet" type="text/css" href="/static/site.css" />
</head>

<body>
   <div class="navbar">
      <a href="/" class="navbar-brand">Hello Flask</a>
      <a href="{{ url_for('home') }}" class="navbar-item">Home</a>
      <a href="{{ url_for('about') }}" class="navbar-item">About</a>
   </div>

   <div class="body-content">
      {% block content %}
      {% endblock %}
      <hr/>
      <footer>
         <p>&copy; 2024</p>
      </footer>
   </div>
</body>
</html>

이 템플릿에는 참조 페이지가 대체해야 하는 모든 콘텐츠를 식별하는 content블록이 포함되어 있습니다.

HelloFlask/static/site.css 파일의 끝에 다음 스타일을 추가합니다.

.navbar {
   background-color: lightslategray;
   font-size: 1em;
   font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   color: white;
   padding: 8px 5px 8px 5px;
}

.navbar a {
   text-decoration: none;
   color: inherit;
}

.navbar-brand {
   font-size: 1.2em;
   font-weight: 600;
}

.navbar-item {
   font-variant: small-caps;
   margin-left: 30px;
}

.body-content {
   padding: 5px;
   font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

이러한 스타일 정의는 이 연습에서 흥미로운 결과를 생성합니다. 이 안내서에서는 반응형 디자인을 보여 주지 않습니다.

HelloFlask/templates/index.html 파일의 내용을 다음 태그로 바꿉니다.
```
{% extends "layout.html" %}
{% block content %}
<span class="message">{{ message }}</span>{{ content }}
{% endblock %}
```
이제 index 템플릿은 기본 템플릿을 참조하고 content 블록을 재정의합니다. 상속을 사용하여 이 템플릿이 간소화된 것을 볼 수 있습니다.
HelloFlask/templates/about.html 파일의 내용을 다음 태그로 바꿉니다. 따라서 about 템플릿도 기본 템플릿을 참조하고 content 블록을 재정의합니다.
```
{% extends "layout.html" %}
{% block content %}
{{ content }}
{% endblock %}
```
앱을 다시 실행하고 결과를 관찰합니다. 탐색 모음 링크를 사용하여 앱 페이지 간에 전환합니다.

템플릿 상속을 사용하여 모든 페이지에서 머리글 및 탐색 모음을 렌더링하는 수정된 Flask 앱을 보여 주는
완료되면 앱을 중지하고 프로젝트 변경 내용을 저장합니다.
앱을 크게 변경했기 때문에 변경 내용을 Git 리포지토리에 저장하는 것이 좋습니다. 자세한 내용은 이 자습서 시리즈의 2단계에서 소스 제어 변경 내용 커밋을 참조하세요.

자습서 검토

Visual Studio의 Flask에서 이 자습서를 완료한 것을 축하합니다.

이 자습서에서는 다음 방법을 알아보았습니다.

여러 페이지가 있는 Flask 프로젝트 만들기
템플릿을 사용하여 다른 페이지 보기 만들기
정적 파일 제공, 페이지 추가 및 템플릿 상속 사용

Jinja 템플릿 디자이너 설명서(jinja.pocoo.org)
Flask 애플리케이션 개체 설명서의 url_for(flask.pocoo.org)
GitHub의 자습서 소스 코드(Microsoft/python-sample-vs-learning-flask)

다음을 통해 공유

자습서: Visual Studio에서 Flask와 함께 정적 파일 제공 및 템플릿 상속 사용

필수 구성 요소

Visual Studio에서 항목 템플릿 살펴보기

Visual Studio에서 항목 템플릿을 식별하는 방법 이해

앱에서 정적 파일 제공

템플릿에서 정적 CSS 파일 사용

코드에서 정적 파일 제공

정적 파일 및 폴더 구성

API에서 URL 경로 및 쿼리 매개 변수 사용

Flask 애플리케이션에 페이지 추가

페이지 함수 이름 지정

헤더 및 탐색에 템플릿 상속 사용

자습서 검토

피드백

추가 리소스

다음을 통해 공유

자습서: Visual Studio에서 Flask와 함께 정적 파일 제공 및 템플릿 상속 사용

필수 구성 요소

Visual Studio에서 항목 템플릿 살펴보기

Visual Studio에서 항목 템플릿을 식별하는 방법 이해

앱에서 정적 파일 제공

템플릿에서 정적 CSS 파일 사용

코드에서 정적 파일 제공

정적 파일 및 폴더 구성

API에서 URL 경로 및 쿼리 매개 변수 사용

Flask 애플리케이션에 페이지 추가

페이지 함수 이름 지정

헤더 및 탐색에 템플릿 상속 사용

자습서 검토

관련 콘텐츠

피드백

추가 리소스