Visual Studio Code에서 Flask 튜토리얼

Flask는 URL 라우팅 및 페이지 렌더링의 기본 사항을 제공하는 웹 애플리케이션을 위한 경량 Python 프레임워크입니다.

Flask는 폼 유효성 검사, 데이터베이스 추상화, 인증과 같은 기능을 직접 제공하지 않기 때문에 "마이크로" 프레임워크라고 합니다. 이러한 기능은 대신 Flask 확장이라는 특수 Python 패키지를 통해 제공됩니다. 확장은 Flask와 원활하게 통합되어 마치 Flask 자체의 일부인 것처럼 보입니다. 예를 들어 Flask는 페이지 템플릿 엔진을 제공하지 않지만, Flask를 설치하면 기본적으로 Jinja 템플릿 엔진이 포함됩니다. 편의를 위해 이러한 기본값을 일반적으로 Flask의 일부로 간주합니다.

이 Flask 튜토리얼에서는 공통 기본 템플릿을 사용하는 세 개의 페이지가 있는 간단한 Flask 앱을 만듭니다. 진행하면서 Visual Studio Code의 터미널, 편집기, 디버거, 코드 조각 등 다양한 기능을 경험하게 됩니다.

이 Flask 튜토리얼의 완성된 코드 프로젝트는 GitHub에서 찾을 수 있습니다: python-sample-vscode-flask-tutorial.

문제가 있는 경우 답변을 검색하거나 Python 확장 토론 Q&A에서 질문할 수 있습니다.

전제 조건

이 Flask 튜토리얼을 성공적으로 완료하려면 다음을 수행해야 합니다 (이는 일반 Python 튜토리얼과 동일한 단계입니다).

Python 확장을 설치합니다.
Python 3 버전 (이 튜토리얼은 이를 기반으로 작성됨)을 설치합니다. 옵션은 다음과 같습니다.
- (모든 운영 체제) python.org에서 다운로드합니다. 일반적으로 페이지에 처음 나타나는 다운로드 버튼을 사용합니다.
- (Linux) 내장 Python 3 설치로도 잘 작동하지만, 다른 Python 패키지를 설치하려면 터미널에서 sudo apt install python3-pip를 실행해야 합니다.
- (macOS) macOS에서 Homebrew를 통해 brew install python3 명령으로 설치합니다.
- (모든 운영 체제) Anaconda (데이터 과학용)에서 다운로드합니다.
Windows의 경우 Python 인터프리터의 위치가 PATH 환경 변수에 포함되어 있는지 확인합니다. 명령 프롬프트에서 path를 실행하여 위치를 확인할 수 있습니다. Python 인터프리터 폴더가 포함되어 있지 않으면 Windows 설정을 열고 "환경"을 검색한 다음 **계정에 대한 환경 변수 편집**을 선택한 다음 **Path** 변수를 편집하여 해당 폴더를 포함시킵니다.

Flask 튜토리얼 프로젝트 환경 만들기

이 섹션에서는 Flask를 설치할 가상 환경을 만듭니다. 가상 환경을 사용하면 Flask를 전역 Python 환경에 설치하는 것을 방지하고 애플리케이션에서 사용되는 라이브러리를 정확하게 제어할 수 있습니다.

파일 시스템에서 이 튜토리얼을 위한 폴더를 만듭니다. 예를 들어 hello_flask입니다.
터미널에서 폴더로 이동하여 code .를 실행하거나 VS Code를 실행하고 파일 > 폴더 열기 명령을 사용하여 이 폴더를 VS Code에서 엽니다.
VS Code에서 명령 팔레트 (보기 > 명령 팔레트 또는 (⇧⌘P (Windows, Linux Ctrl+Shift+P)))를 엽니다. 그런 다음 Python: 환경 만들기 명령을 선택하여 작업 영역에 가상 환경을 만듭니다. venv를 선택한 다음 만들려는 Python 환경을 선택합니다.

참고: 환경을 수동으로 만들거나 환경 생성 과정에서 오류가 발생하는 경우 환경 페이지를 방문하십시오.
가상 환경 생성이 완료된 후 명령 팔레트에서 터미널: 새 터미널 만들기 (⌃⇧` (Windows, Linux Ctrl+Shift+`))를 실행하여 터미널을 만들고 활성화 스크립트를 실행하여 가상 환경을 자동으로 활성화합니다.

참고: Windows에서 기본 터미널 유형이 PowerShell인 경우 스크립트 실행이 비활성화되어 있기 때문에 activate.ps1을 실행할 수 없다는 오류가 표시될 수 있습니다. 오류는 스크립트를 허용하는 방법에 대한 정보 링크를 제공합니다. 그렇지 않으면 터미널: 기본 프로필 선택을 사용하여 "명령 프롬프트" 또는 "Git Bash"를 기본값으로 설정하십시오.
VS Code 터미널에서 다음 명령을 실행하여 가상 환경에 Flask를 설치합니다.
```
python -m pip install flask
```

이제 Flask 코드를 작성할 준비가 된 독립적인 환경이 있습니다. VS Code는 터미널: 새 터미널 만들기를 사용할 때 환경을 자동으로 활성화합니다. 별도의 명령 프롬프트나 터미널을 여는 경우 source .venv/bin/activate (Linux/macOS) 또는 .venv\Scripts\Activate.ps1 (Windows)를 실행하여 환경을 활성화합니다. 명령 프롬프트 시작 부분에 (.venv)가 표시되면 환경이 활성화된 것입니다.

최소 Flask 앱 만들기 및 실행

VS Code에서 메뉴의 파일 > 새로 만들기를 사용하거나 Ctrl+N을 누르거나 탐색기 보기의 새 파일 아이콘 (아래 참조)을 사용하여 프로젝트 폴더에 app.py라는 새 파일을 만듭니다.
app.py에서 Flask를 가져오고 Flask 객체 인스턴스를 만드는 코드를 추가합니다. 이 코드를 복사하여 붙여넣는 대신 직접 입력하는 경우 VS Code의 IntelliSense 및 자동 완성 기능을 관찰할 수 있습니다.
```
from flask import Flask
app = Flask(__name__)
```
또한 app.py에 콘텐츠 (이 경우 간단한 문자열)를 반환하는 함수를 추가하고 Flask의 app.route 데코레이터를 사용하여 URL 경로 /를 해당 함수에 매핑합니다.
```
@app.route("/")
def home():
    return "Hello, Flask!"
```
팁: 같은 함수에 대해 원하는 경로 수에 따라 한 줄에 하나씩 여러 데코레이터를 사용할 수 있습니다.
app.py 파일을 저장합니다 (⌘S (Windows, Linux Ctrl+S)).
통합 터미널에서 python -m flask run을 입력하여 앱을 실행합니다. 이 명령은 Flask 개발 서버를 실행합니다. 개발 서버는 기본적으로 app.py를 찾습니다. Flask를 실행하면 다음과 유사한 출력이 표시됩니다.
```
(.venv) D:\py\\hello_flask>python -m flask run
 * Environment: production
   WARNING: Do not use the development server in a production environment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
```
Flask 모듈을 찾을 수 없다는 오류가 표시되면 이전 섹션 끝에 설명된 대로 가상 환경에서 python -m pip install flask를 실행했는지 확인하십시오.

또한 다른 IP 주소나 포트에서 개발 서버를 실행하려면 --host=0.0.0.0 --port=80과 같이 호스트 및 포트 명령줄 인수를 사용합니다.
렌더링된 페이지로 기본 브라우저를 열려면 터미널에서 http://127.0.0.1:5000/ URL을 Ctrl+클릭합니다.
/와 같은 URL에 액세스할 때 디버그 터미널에 HTTP 요청을 보여주는 메시지가 나타나는 것을 확인합니다.
```
127.0.0.1 - - [11/Jul/2018 08:40:15] "GET / HTTP/1.1" 200 -
```
터미널에서 Ctrl+C를 사용하여 앱을 중지합니다.

팁: app.py와 다른 파일 이름 (예: webapp.py)을 사용하는 경우 FLASK_APP이라는 환경 변수를 정의하고 값을 선택한 파일로 설정해야 합니다. 그러면 Flask의 개발 서버는 기본 파일 app.py 대신 FLASK_APP의 값을 사용합니다. 자세한 내용은 Flask 명령줄 인터페이스를 참조하십시오.

디버거에서 앱 실행

디버깅을 통해 특정 코드 줄에서 실행 중인 프로그램을 일시 중지할 수 있습니다. 프로그램이 일시 중지되면 변수를 검사하고 디버그 콘솔 패널에서 코드를 실행하고 디버깅에 설명된 기능을 활용할 수 있습니다. 디버거를 실행하면 디버깅 세션 시작 전에 수정된 파일이 자동으로 저장됩니다.

시작하기 전에: 이전 섹션 끝에서 터미널에서 Ctrl+C를 사용하여 실행 중인 앱을 중지했는지 확인하십시오. 앱을 한 터미널에서 계속 실행하면 해당 포트가 계속 사용됩니다. 결과적으로 디버거에서 동일한 포트를 사용하여 앱을 실행할 때 원래 실행 중인 앱이 모든 요청을 처리하며 디버깅 중인 앱에서는 활동이 표시되지 않고 프로그램이 중단점에서 중지되지 않습니다. 즉, 디버거가 작동하지 않는 것처럼 보이면 앱의 다른 인스턴스가 아직 실행 중이지 않은지 확인하십시오.

app.py의 내용을 다음 코드로 바꾸고 두 번째 경로와 함수를 추가하여 디버거에서 단계별로 실행할 수 있도록 합니다.
```
import re
from datetime import datetime

from flask import Flask

app = Flask(__name__)


@app.route("/")
def home():
    return "Hello, Flask!"


@app.route("/hello/<name>")
def hello_there(name):
    now = datetime.now()
    formatted_now = now.strftime("%A, %d %B, %Y at %X")

    # Filter the name argument to letters only using regular expressions. URL arguments
    # can contain arbitrary text, so we restrict to safe characters only.
    match_object = re.match("[a-zA-Z]+", name)

    if match_object:
        clean_name = match_object.group(0)
    else:
        clean_name = "Friend"

    content = "Hello there, " + clean_name + "! It's " + formatted_now
    return content
```
새 URL 경로 /hello/<name>에 사용된 데코레이터는 추가 값을 허용할 수 있는 엔드포인트 /hello/를 정의합니다. 경로의 < 및 > 안의 식별자는 함수에 전달되고 코드에서 사용할 수 있는 변수를 정의합니다.

URL 경로는 대소문자를 구분합니다. 예를 들어 경로 /hello/<name>는 /Hello/<name>과 다릅니다. 동일한 함수가 두 가지 모두를 처리하도록 하려면 각 변형에 대해 데코레이터를 사용합니다.

코드 주석에 설명된 대로 임의의 사용자 제공 정보를 항상 필터링하여 앱에 대한 다양한 공격을 방지하십시오. 이 경우 코드는 name 인수를 필터링하여 문자만 포함하도록 하여 제어 문자, HTML 등의 삽입을 방지합니다. (다음 섹션에서 템플릿을 사용할 때 Flask는 자동 필터링을 수행하므로 이 코드는 필요하지 않습니다.)
다음 중 하나를 수행하여 hello_there 함수의 첫 번째 코드 줄 (now = datetime.now())에 중단점을 설정합니다.
- 해당 줄에 커서를 놓고 F9를 누르거나,
- 해당 줄에 커서를 놓고 실행 > 중단점 토글 메뉴 명령을 선택하거나,
- 줄 번호 왼쪽에 있는 여백을 직접 클릭합니다 (거기서 마우스를 올리면 흐릿한 빨간색 점이 나타납니다).
중단점은 왼쪽 여백에 빨간색 점으로 표시됩니다.
VS Code의 실행 및 디버그 보기로 전환합니다 (왼쪽 활동 막대 또는 ⇧⌘D (Windows, Linux Ctrl+Shift+D) 사용). "실행 및 디버그 사용자 지정을 위해 launch.json 파일을 만드세요."라는 메시지가 표시될 수 있습니다. 이는 디버그 구성을 포함하는 launch.json 파일이 아직 없다는 것을 의미합니다. VS Code에서 launch.json 파일 만들기 링크를 클릭하면 VS Code가 자동으로 생성할 수 있습니다.
링크를 선택하면 VS Code에서 디버그 구성을 묻는 메시지가 표시됩니다. 드롭다운 목록에서 Flask를 선택하면 VS Code가 Flask 실행 구성으로 새 launch.json 파일을 채웁니다. launch.json 파일에는 여러 디버그 구성이 포함되어 있으며, 각 구성은 configuration 배열 내의 별도 JSON 객체입니다.
"Python: Flask"라는 이름의 구성을 찾아보세요. 이 구성에는 "module": "flask",가 포함되어 있어 VS Code에 디버거를 시작할 때 -m flask로 Python을 실행하도록 지시합니다. 또한 env 속성에 FLASK_APP 환경 변수를 정의하여 시작 파일 (기본값은 app.py)을 식별하지만 다른 파일을 쉽게 지정할 수 있습니다. 호스트 및/또는 포트를 변경하려면 args 배열을 사용할 수 있습니다.
```
{
    "name": "Python Debugger: Flask",
    "type": "debugpy",
    "request": "launch",
    "module": "flask",
    "env": {
        "FLASK_APP": "app.py",
        "FLASK_DEBUG": "1"
    },
    "args": [
        "run",
        "--no-debugger",
        "--no-reload"
    ],
    "jinja": true,
    "justMyCode": true
},
```
참고: 구성에 "FLASK_APP": "${workspaceFolder}/app.py"라는 env 항목이 포함되어 있으면 이를 "FLASK_APP": "app.py"로 변경하십시오 (위와 같이). 그렇지 않으면 프로젝트 폴더가 있는 드라이브 문자인 "C" 모듈을 가져올 수 없습니다."와 같은 오류 메시지가 발생할 수 있습니다.

참고: launch.json이 생성되면 편집기에 구성 추가 버튼이 나타납니다. 해당 버튼을 클릭하면 구성 목록 시작 부분에 추가할 추가 구성 목록이 표시됩니다. (실행 > 구성 추가 메뉴 명령도 동일한 작업을 수행합니다.).
launch.json을 저장합니다 (⌘S (Windows, Linux Ctrl+S)). 디버그 구성 드롭다운 목록에서 Python: Flask 구성을 선택합니다.
실행 > 디버깅 시작 메뉴 명령을 선택하거나 목록 옆의 녹색 디버깅 시작 화살표 (F5)를 선택하여 디버거를 시작합니다.

상태 표시줄의 색상이 변경되어 디버깅 중임을 나타내는 것을 확인합니다.

디버깅 명령 (일시 중지 (또는 계속, F5), 단계별 실행 (F10), 단계별 코드 실행 (F11), 단계별 코드 제외 (⇧F11 (Windows, Linux Shift+F11)), 다시 시작 (⇧⌘F5 (Windows, Linux Ctrl+Shift+F5)), 중지 (⇧F5 (Windows, Linux Shift+F5)))가 포함된 디버깅 도구 모음 (아래 참조)도 VS Code에 나타납니다. 각 명령에 대한 설명은 VS Code 디버깅을 참조하십시오.
"Python 디버그 콘솔" 터미널에 출력이 표시됩니다. 해당 터미널에서 http://127.0.0.1:5000/ 링크를 Ctrl+클릭하여 해당 URL로 브라우저를 엽니다. 브라우저 주소 표시줄에서 http://127.0.0.1:5000/hello/VSCode로 이동합니다. 페이지가 렌더링되기 전에 VS Code는 설정한 중단점에서 프로그램을 일시 중지합니다. 중단점에 있는 작고 노란색 화살표는 다음 실행될 코드 줄임을 나타냅니다.
단계별 실행을 사용하여 now = datetime.now() 문을 실행합니다.
VS Code 창의 왼쪽에서 로컬 변수 (now 등) 및 인수 (name 등)를 보여주는 **변수** 패널이 표시됩니다. 그 아래에는 **조사식**, **호출 스택**, **중단점** (자세한 내용은 VS Code 디버깅 참조)에 대한 패널이 있습니다. **로컬** 섹션에서 다른 값을 확장해 보세요. 또한 값을 두 번 클릭하거나 (Enter (Windows, Linux F2))를 사용하여 값을 수정할 수 있습니다. 그러나 now와 같은 변수를 변경하면 프로그램이 중단될 수 있습니다. 개발자는 일반적으로 코드가 처음에 올바른 값을 생성하지 않았을 때 값을 수정하기 위해서만 변경합니다.
프로그램이 일시 중지되면 (터미널의 "Python 디버그 콘솔"과 다른) **디버그 콘솔** 패널을 사용하여 표현식을 실험하고 프로그램의 현재 상태를 사용하여 코드 조각을 테스트할 수 있습니다. 예를 들어 now = datetime.now() 줄을 단계별로 실행한 후 다른 날짜/시간 형식을 실험할 수 있습니다. 편집기에서 now.strftime("%A, %d %B, %Y at %X")를 읽는 코드를 선택한 다음 마우스 오른쪽 버튼을 클릭하고 **디버그 콘솔에서 평가**를 선택하여 해당 코드를 디버그 콘솔로 보내 실행합니다.
```
now.strftime("%A, %d %B, %Y at %X")
'Wednesday, 31 October, 2018 at 18:13:39'
```
팁: **디버그 콘솔**에는 터미널에 나타나지 않는 앱 내의 예외도 표시됩니다. 예를 들어 **실행 및 디버그** 보기의 **호출 스택** 영역에서 "예외에서 일시 중지됨"이라는 메시지가 표시되면 **디버그 콘솔**로 전환하여 예외 메시지를 확인하십시오.

해당 줄을 디버그 콘솔의 맨 아래에 있는 > 프롬프트로 복사한 다음 서식을 변경해 보세요.

now.strftime("%a, %d %B, %Y at %X")
'Wed, 31 October, 2018 at 18:13:39'
now.strftime("%a, %d %b, %Y at %X")
'Wed, 31 Oct, 2018 at 18:13:39'
now.strftime("%a, %d %b, %y at %X")
'Wed, 31 Oct, 18 at 18:13:39'

원하는 경우 몇 줄의 코드를 더 단계별로 실행한 다음 계속 (F5)를 선택하여 프로그램을 실행합니다. 브라우저 창에 결과가 표시됩니다.
코드의 줄을 다른 날짜/시간 형식 (예: now.strftime("%a, %d %b, %y at %X"))을 사용하도록 변경하고 파일을 저장합니다. Flask 서버가 자동으로 다시 로드되므로 디버거를 다시 시작할 필요 없이 변경 사항이 적용됩니다. 브라우저에서 페이지를 새로 고쳐 업데이트를 확인합니다.
완료되면 브라우저를 닫고 디버거를 중지합니다. 디버거를 중지하려면 중지 도구 모음 버튼 (빨간색 사각형) 또는 실행 > 디버깅 중지 명령 (⇧F5 (Windows, Linux Shift+F5))을 사용합니다.

팁: http://127.0.0.1:5000/hello/VSCode와 같은 특정 URL로 반복적으로 이동하는 것을 더 쉽게 만들려면 해당 URL을 print 문을 사용하여 출력합니다. URL은 브라우저에서 열기 위해 Ctrl+클릭할 수 있는 터미널에 나타납니다.

정의로 이동 및 정의 미리 보기 명령

Flask 또는 다른 라이브러리를 작업하는 동안 해당 라이브러리 자체의 코드를 검사해야 할 수 있습니다. VS Code는 객체의 정의로 직접 이동하는 두 가지 편리한 명령을 제공합니다.

**정의로 이동**은 코드에서 객체를 정의하는 코드로 점프합니다. 예를 들어 app.py에서 app = Flask(__name__) 줄의 Flask 클래스를 마우스 오른쪽 버튼으로 클릭하고 **정의로 이동**을 선택하거나 (F12), Flask 라이브러리의 클래스 정의로 이동합니다.
**정의 미리 보기** (⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10), 마우스 오른쪽 버튼 클릭 컨텍스트 메뉴에서도 사용 가능)는 비슷하지만 편집기에서 클래스 정의를 직접 표시합니다 (편집기 창에 공간을 만들어 코드를 가리지 않도록 함). 미리 보기 창을 닫으려면 Escape를 누르거나 오른쪽 상단의 x를 사용합니다.

템플릿을 사용하여 페이지 렌더링

지금까지 이 튜토리얼에서 만든 앱은 Python 코드로 일반 텍스트 웹 페이지만 생성합니다. 코드에서 직접 HTML을 생성하는 것이 가능하지만, 개발자는 이러한 관행을 피합니다. 왜냐하면 이는 앱을 크로스 사이트 스크립팅 (XSS) 공격에 취약하게 만들기 때문입니다. 예를 들어 이 튜토리얼의 hello_there 함수에서 content = "<h1>Hello there, " + clean_name + "!</h1>"와 같이 코드로 출력을 형식 지정하는 것을 고려할 수 있으며, 여기서 content의 결과는 직접 브라우저로 전달됩니다. 이는 공격자가 clean_name에 들어가 결국 브라우저에서 실행되는 URL에 악성 HTML (JavaScript 코드 포함)을 삽입할 수 있게 합니다.

훨씬 더 나은 방법은 **템플릿**을 사용하여 코드에서 HTML을 완전히 분리하는 것입니다. 이렇게 하면 코드는 데이터 값에만 집중하고 렌더링에는 관여하지 않습니다.

템플릿은 런타임에 코드가 제공하는 값에 대한 자리 표시자가 포함된 HTML 파일입니다. 템플릿 엔진은 페이지를 렌더링할 때 대체를 처리합니다. 따라서 코드는 데이터 값에만 집중하고 템플릿은 마크업에만 집중합니다.
Flask의 기본 템플릿 엔진은 Jinja이며, Flask를 설치하면 자동으로 설치됩니다. 이 엔진은 자동 이스케이프 (XSS 공격 방지) 및 템플릿 상속과 같은 유연한 옵션을 제공합니다. 상속을 사용하면 공통 마크업이 있는 기본 페이지를 정의한 다음 페이지별 추가로 해당 기본을 확장할 수 있습니다.

이 섹션에서는 템플릿을 사용하여 단일 페이지를 만듭니다. 다음 섹션에서는 앱이 정적 파일을 서빙하도록 구성한 다음, 각 페이지에 기본 템플릿의 탐색 모음이 포함된 여러 페이지를 앱에 만듭니다.

hello_flask 폴더 안에 Flask가 기본적으로 템플릿을 찾는 templates라는 폴더를 만듭니다.
templates 폴더 안에 다음 내용으로 hello_there.html이라는 파일을 만듭니다. 이 템플릿에는 "name"과 "date"라는 두 개의 자리 표시자가 있으며, 이는 중괄호 쌍인 {{ 및 }}로 구분됩니다. 보시다시피 템플릿에 직접 서식 코드를 포함할 수도 있습니다.
```
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Hello, Flask</title>
    </head>
    <body>
        {%if name %}
            <strong>Hello there, {{ name }}!</strong> It's {{ date.strftime("%A, %d %B, %Y at %X") }}.
        {% else %}
            What's your name? Provide it after /hello/ in the URL.
        {% endif %}
    </body>
</html>
```
팁: Flask 개발자는 strftime 대신 flask-babel 확장을 사용하여 날짜 형식 지정을 하는 경우가 많습니다. flask-babel은 지역 및 시간대를 고려합니다.
app.py에서 파일 상단 근처에 Flask의 render_template 함수를 가져옵니다.
```
from flask import render_template
```
또한 app.py에서 hello_there 함수를 수정하여 render_template을 사용하여 템플릿을 로드하고 명명된 값을 적용하며 (이름이 없는 경우를 인식하는 경로 추가) 합니다. render_template은 첫 번째 인수가 templates 폴더를 기준으로 한다고 가정합니다. 일반적으로 개발자는 사용하는 함수와 템플릿의 이름을 같게 지정하지만, 코드에서 정확한 파일 이름을 항상 참조하므로 이름 일치가 필수는 아닙니다.
```
@app.route("/hello/")
@app.route("/hello/<name>")
def hello_there(name = None):
    return render_template(
        "hello_there.html",
        name=name,
        date=datetime.now()
    )
```
이제 코드가 훨씬 간단해졌으며 마크업과 서식이 모두 템플릿에 포함되어 있으므로 데이터 값에만 집중하는 것을 볼 수 있습니다.
프로그램을 시작하고 (디버거 안팎에서 ⌃F5 (Windows, Linux Ctrl+F5) 사용), /hello/name URL로 이동하여 결과를 확인합니다.
또한 <a%20value%20that%20could%20be%20HTML>와 같은 이름을 사용하여 /hello/name URL로 이동하여 Flask의 자동 이스케이프가 작동하는 것을 확인하십시오. "name" 값은 실제 요소를 렌더링하는 대신 브라우저에 일반 텍스트로 표시됩니다.

정적 파일 서빙

정적 파일에는 두 가지 유형이 있습니다. 첫째, 페이지 템플릿에서 직접 참조할 수 있는 스타일 시트와 같은 파일입니다. 이러한 파일은 앱의 모든 폴더에 있을 수 있지만 일반적으로 static 폴더 내에 배치됩니다.

두 번째 유형은 코드에서 주소 지정하려는 파일로, 정적 파일을 반환하는 API 엔드포인트를 구현하려는 경우와 같습니다. 이를 위해 Flask 객체에는 앱의 static 폴더에 포함된 정적 파일로 응답을 생성하는 내장 메서드인 send_static_file이 있습니다.

다음 섹션에서는 두 유형의 정적 파일을 모두 시연합니다.

템플릿에서 정적 파일 참조

hello_flask 폴더 안에 static이라는 폴더를 만듭니다.
static 폴더 안에 다음 내용으로 site.css라는 파일을 만듭니다. 이 코드를 입력한 후 VS Code에서 CSS 파일에 제공하는 구문 강조 표시 (색상 미리 보기 포함)도 관찰하십시오.
```
.message {
    font-weight: 600;
    color: blue;
}
```
templates/hello_there.html에서 </head> 태그 앞에 다음 줄을 추가하여 스타일 시트에 대한 참조를 만듭니다.
```
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='site.css')}}" />
```
여기서 사용된 Flask의 url_for 태그는 파일에 대한 적절한 경로를 생성합니다. 변수를 인수로 받을 수 있기 때문에 url_for을 사용하면 원하는 경우 생성된 경로를 프로그래밍 방식으로 제어할 수 있습니다.

또한 templates/hello_there.html에서 <body> 요소의 내용을 다음 마크업으로 바꾸고, <strong> 태그 대신 message 스타일을 사용합니다 (이름 없이 hello/ URL만 사용하는 경우 메시지를 표시하기도 함).

{%if name %}
    <span class="message">Hello there, {{ name }}!</span> It's {{ date.strftime("%A, %d %B, %Y at %X") }}.
{% else %}
    <span class="message">What's your name? Provide it after /hello/ in the URL.</span>
{% endif %}

앱을 실행하고 /hello/name URL로 이동하여 메시지가 파란색으로 렌더링되는 것을 확인합니다. 완료되면 앱을 중지합니다.

코드에서 정적 파일 서빙

static 폴더 안에 다음 내용으로 data.json이라는 JSON 데이터 파일을 만듭니다 (의미 없는 샘플 데이터임).
```
{
  "01": {
    "note": "This data is very simple because we're demonstrating only the mechanism."
  }
}
```
app.py에 /api/data 경로를 가진 함수를 추가하고 send_static_file 메서드를 사용하여 정적 데이터 파일을 반환합니다.
```
@app.route("/api/data")
def get_data():
    return app.send_static_file("data.json")
```
앱을 실행하고 /api/data 엔드포인트로 이동하여 정적 파일이 반환되는 것을 확인합니다. 완료되면 앱을 중지합니다.

기본 템플릿을 확장하는 여러 템플릿 만들기

대부분의 웹 앱에는 여러 페이지가 있고, 이러한 페이지는 일반적으로 많은 공통 요소를 공유하므로 개발자는 이러한 공통 요소를 기본 페이지 템플릿으로 분리하여 다른 페이지 템플릿이 확장할 수 있도록 합니다 (템플릿 상속이라고도 함).

또한 같은 템플릿을 확장하는 많은 페이지를 만들 가능성이 높으므로 VS Code에서 새 페이지 템플릿을 신속하게 초기화하는 **코드 조각**을 만드는 것이 유용합니다. 코드 조각은 번거롭고 오류가 발생하기 쉬운 복사-붙여넣기 작업을 피하는 데 도움이 되는 일관된 코드 조각을 제공합니다.

다음 섹션에서는 이 과정의 다양한 부분을 살펴봅니다.

기본 페이지 템플릿 및 스타일 만들기

Flask의 기본 페이지 템플릿에는 CSS 파일, 스크립트 파일 등에 대한 참조를 포함하여 일련의 페이지의 공유 부분이 모두 포함됩니다. 기본 템플릿은 또한 다른 템플릿이 확장할 때 재정의해야 하는 하나 이상의 **블록** 태그를 정의합니다. 블록 태그는 기본 템플릿과 확장된 템플릿 모두에서 {% block <name> %} 및 {% endblock %}으로 구분됩니다.

다음 단계에서는 기본 템플릿을 만드는 과정을 시연합니다.

templates 폴더 안에 다음 내용으로 layout.html이라는 파일을 만듭니다. 이 파일에는 "title"과 "content"라는 블록이 포함되어 있습니다. 보시다시피 마크업은 홈, 정보, 연락처 페이지에 대한 링크가 있는 간단한 탐색 모음 구조를 정의하며, 이는 다음 섹션에서 만들 것입니다. 각 링크는 다시 Flask의 url_for 태그를 사용하여 일치하는 경로에 대한 런타임 링크를 생성합니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>{% block title %}{% endblock %}</title>
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='site.css')}}" />
    </head>

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

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

static/site.css에 다음 스타일을 기존 "message" 스타일 아래에 추가하고 파일을 저장합니다. 이 튜토리얼에서는 반응형 디자인을 시연하려고 하지 않습니다. 이러한 스타일은 단순히 합리적으로 흥미로운 결과를 생성합니다.

.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;
}

이 시점에서 앱을 실행할 수 있지만, 아직 기본 템플릿을 사용하지 않았고 코드 파일도 변경하지 않았으므로 결과는 이전 단계와 동일합니다. 최종 결과를 보려면 나머지 섹션을 완료하십시오.

코드 조각 만들기

다음 섹션에서 만드는 세 페이지가 layout.html을 확장하므로, 적절한 기본 템플릿 참조로 새 템플릿 파일을 초기화하는 **코드 조각**을 만드는 것이 시간을 절약합니다. 코드 조각은 기존 코드에서 복사-붙여넣기하여 발생하는 오류를 방지하는 일관된 코드 조각을 제공합니다.

VS Code에서 파일 > 환경 설정 > 코드 조각 구성을 선택합니다.
나타나는 목록에서 html을 선택합니다. 이미 스니펫을 만든 경우 목록의 **기존 스니펫** 섹션에 "html.json"으로 나타날 수 있습니다.

VS Code가 html.json을 열면 기존 중괄호 안에 다음 항목을 추가합니다 (여기에 표시되지 않은 설명 주석은 $0 줄이 스니펫 삽입 후 VS Code에서 커서 위치를 나타내는 것과 같은 세부 정보를 설명합니다).

"Flask Tutorial: template extending layout.html": {
    "prefix": "flextlayout",
    "body": [
        "{% extends \"layout.html\" %}",
        "{% block title %}",
        "$0",
        "{% endblock %}",
        "{% block content %}",
        "{% endblock %}"
    ],

    "description": "Boilerplate template that extends layout.html"
},

html.json 파일을 저장합니다 (⌘S (Windows, Linux Ctrl+S)).
이제 스니펫의 접두사 (예: flext)를 입력하기 시작하면 VS Code에서 다음 섹션에 표시된 대로 자동 완성 옵션으로 스니펫을 제공합니다. **스니펫 삽입** 명령을 사용하여 메뉴에서 스니펫을 선택할 수도 있습니다.

코드 조각에 대한 자세한 내용은 코드 조각 만들기를 참조하십시오.

코드 조각을 사용하여 페이지 추가

코드 조각이 설정되면 홈, 정보, 연락처 페이지에 대한 템플릿을 신속하게 만들 수 있습니다.

templates 폴더 안에 새 파일 home.html을 만듭니다. 그런 다음 flext를 입력하기 시작하면 스니펫이 완성으로 나타나는 것을 볼 수 있습니다.

완성 항목을 선택하면 스니펫 코드가 스니펫 삽입 지점에서 커서와 함께 나타납니다.
"title" 블록의 삽입 지점에 Home을 작성하고, "content" 블록에 <p>Home page for the Visual Studio Code Flask tutorial.</p>를 작성한 다음 파일을 저장합니다. 이 줄들은 확장된 페이지 템플릿의 유일하게 고유한 부분입니다.
templates 폴더 안에 about.html을 만듭니다. 스니펫을 사용하여 기본 마크업을 삽입하고, "title" 및 "content" 블록에 각각 About us 및 <p>About page for the Visual Studio Code Flask tutorial.</p>를 삽입한 다음 파일을 저장합니다.
이전 단계를 반복하여 Contact us와 <p>Contact page for the Visual Studio Code Flask tutorial.</p>를 두 개의 콘텐츠 블록에 사용하여 templates/contact.html을 만듭니다.

app.py에 /about/ 및 /contact/ 경로에 대한 함수를 추가하여 해당 페이지 템플릿을 참조하도록 합니다. 또한 home 함수를 수정하여 home.html 템플릿을 사용하도록 합니다.

# Replace the existing home function with the one below
@app.route("/")
def home():
    return render_template("home.html")

# New functions
@app.route("/about/")
def about():
    return render_template("about.html")

@app.route("/contact/")
def contact():
    return render_template("contact.html")

앱 실행

모든 페이지 템플릿이 준비되면 app.py를 저장하고 앱을 실행한 다음 브라우저를 열어 결과를 확인합니다. 페이지 간을 이동하여 페이지 템플릿이 기본 템플릿을 올바르게 확장하는지 확인합니다.

Flask tutorial: app rendering a common nav bar from the base template

참고: 최신 변경 사항이 표시되지 않는 경우 캐시된 파일을 보지 않도록 페이지를 강제 새로고침해야 할 수 있습니다.

선택적 활동

다음 섹션에서는 Python 및 Visual Studio Code 작업을 수행하는 데 도움이 될 수 있는 추가 단계에 대해 설명합니다.

환경에 대한 requirements.txt 파일 만들기

소스 제어 또는 다른 수단을 통해 앱 코드를 공유할 때 가상 환경의 모든 파일을 복사하는 것은 의미가 없습니다. 수신자는 항상 직접 환경을 다시 만들 수 있기 때문입니다.

따라서 개발자는 일반적으로 소스 제어에서 가상 환경 폴더를 생략하고 대신 requirements.txt 파일을 사용하여 앱의 종속성을 설명합니다.

파일을 수동으로 만들 수도 있지만, pip freeze 명령을 사용하여 활성화된 환경에 설치된 정확한 라이브러리를 기반으로 파일을 생성할 수도 있습니다.

Python: 선택 인터프리터 명령을 사용하여 선택한 환경을 선택한 후 터미널: 새 터미널 만들기 명령(⌃⇧` (Windows, Linux Ctrl+Shift+`)))을 실행하여 해당 환경이 활성화된 터미널을 엽니다.
터미널에서 pip freeze > requirements.txt를 실행하여 프로젝트 폴더에 requirements.txt 파일을 만듭니다.

프로젝트 복사본을 받는 모든 사람(또는 모든 빌드 서버)은 pip install -r requirements.txt 명령을 실행하여 원본 환경에 패키지를 다시 설치하기만 하면 됩니다. (단, 수신자는 자신의 가상 환경을 만들어야 합니다.)

참고: pip freeze는 현재 환경에 설치된 모든 Python 패키지(현재 사용하지 않는 패키지 포함)를 나열합니다. 이 명령은 정확한 버전 번호가 있는 패키지도 나열합니다. 향후 유연성을 위해 이 버전 번호를 범위로 변환하는 것이 좋습니다. 자세한 내용은 pip 명령 설명서의 Requirements Files를 참조하십시오.

추가 개발을 지원하도록 프로젝트 리팩터링

이 Flask 자습서 전체에서 모든 앱 코드는 단일 app.py 파일에 포함되어 있습니다. 추가 개발을 허용하고 관심사를 분리하기 위해 app.py의 조각을 별도의 파일로 리팩터링하는 것이 좋습니다.

프로젝트 폴더에 앱을 위한 폴더(예: hello_app)를 만들어 VS Code가 설정 및 디버그 구성 파일을 저장하는 .vscode 폴더 및 requirements.txt와 같은 다른 프로젝트 수준 파일과 앱 파일을 분리합니다.
static 및 templates 폴더는 앱 코드를 포함하므로 hello_app으로 이동합니다.

hello_app 폴더에서 라우팅 및 뷰 함수가 포함된 views.py라는 파일을 만듭니다.

from flask import Flask
from flask import render_template
from datetime import datetime
from . import app

@app.route("/")
def home():
    return render_template("home.html")

@app.route("/about/")
def about():
    return render_template("about.html")

@app.route("/contact/")
def contact():
    return render_template("contact.html")

@app.route("/hello/")
@app.route("/hello/<name>")
def hello_there(name = None):
    return render_template(
        "hello_there.html",
        name=name,
        date=datetime.now()
    )

@app.route("/api/data")
def get_data():
    return app.send_static_file("data.json")

hello_app 폴더에서 다음 내용으로 __init__.py 파일을 만듭니다.
```
import flask
app = flask.Flask(__name__)
```

hello_app 폴더에서 다음 내용으로 webapp.py 파일을 만듭니다.

# Entry point for the application.
from . import app    # For application discovery by the 'flask' command.
from . import views  # For import side-effects of setting up routes.

디버그 구성 파일 launch.json을 열고 시작 개체를 가리키도록 env 속성을 다음과 같이 업데이트합니다.
```
"env": {
    "FLASK_APP": "hello_app.webapp"
},
```
내용이 다른 앱 파일로 이동되었으므로 프로젝트 루트의 원본 app.py 파일을 삭제합니다.
이제 프로젝트 구조는 다음과 유사해야 합니다.
모든 것이 올바르게 작동하는지 확인하기 위해 디버거에서 앱을 다시 실행합니다. VS Code 디버거 외부에서 앱을 실행하려면 터미널에서 다음 단계를 사용합니다.
1. FLASK_APP에 대한 환경 변수를 설정합니다. Linux 및 macOS에서는 export set FLASK_APP=webapp을 사용하고, Windows에서는 PowerShell을 사용하는 경우 $env:FLASK_APP=webapp을 사용하거나 명령 프롬프트를 사용하는 경우 set FLASK_APP=webapp을 사용합니다.
2. hello_app 폴더로 이동한 다음 python -m flask run을 사용하여 프로그램을 시작합니다.

컨테이너 도구 확장을 사용하여 Flask 앱용 컨테이너 만들기

Container Tools 확장을 사용하면 Visual Studio Code에서 컨테이너화된 애플리케이션을 쉽게 빌드, 관리 및 배포할 수 있습니다. 이 자습서에서 개발한 Flask 앱에 대한 Python 컨테이너를 만드는 방법에 대한 자세한 내용은 컨테이너 안의 Python 자습서를 확인하십시오. 이 자습서에서는 다음 작업을 수행하는 방법을 안내합니다.

간단한 Python 컨테이너를 설명하는 Dockerfile 파일 만들기.
Flask 앱의 기능을 빌드, 실행 및 확인합니다.
컨테이너에서 실행되는 앱 디버깅.

문제가 있는 경우 답변을 검색하거나 Python 확장 토론 Q&A에서 질문할 수 있습니다.

다음 단계

Visual Studio Code에서 Flask를 사용하여 이 워크스루를 완료하신 것을 축하드립니다!

이 자습서의 완료된 코드 프로젝트는 GitHub에서 찾을 수 있습니다: python-sample-vscode-flask-tutorial.

이 자습서에서는 페이지 템플릿에 대해 표면적인 내용만 다루었으므로 템플릿에 대한 자세한 내용은 Jinja2 설명서를 참조하십시오. 템플릿 디자이너 설명서에는 템플릿 언어에 대한 모든 세부 정보가 포함되어 있습니다. 또한 공식 Flask 자습서와 Flask 확장에 대한 설명서를 검토하는 것이 좋습니다.

실제 웹사이트에서 앱을 사용해 보려면 Docker 컨테이너를 사용하여 Azure App Service에 Python 앱 배포 자습서를 확인하십시오. Azure에는 VS Code 내에서 웹 앱을 배포할 수 있는 표준 컨테이너인 Linux용 App Service도 있습니다.

Python과 관련된 VS Code 설명서의 다음 기사도 검토해 보는 것이 좋습니다.

12/10/2025