이 출시되었습니다! 11월의 새로운 기능 및 수정 사항을 읽어보세요.

Visual Studio Code에서 Django 튜토리얼

Django는 빠르고 안전하며 확장 가능한 웹 개발을 위해 설계된 고급 Python 프레임워크입니다. Django는 URL 라우팅, 페이지 템플릿, 데이터 작업에 대한 풍부한 지원을 포함합니다.

이 Django 튜토리얼에서는 공통 기본 템플릿을 사용하는 세 페이지로 구성된 간단한 Django 앱을 만듭니다. Visual Studio Code 컨텍스트에서 이 앱을 만들어 VS Code 터미널, 편집기 및 디버거에서 Django와 함께 작업하는 방법을 이해합니다. 이 튜토리얼에서는 데이터 모델 작업 및 관리 인터페이스 생성과 같은 Django 자체에 대한 다양한 세부 정보를 다루지 않습니다. 이러한 측면에 대한 지침은 이 튜토리얼 끝에 있는 Django 설명서 링크를 참조하십시오.

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

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

전제 조건

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

  1. Python 확장을 설치합니다.

  2. Python 3 버전을 설치합니다 (이 튜토리얼은 이를 위해 작성되었습니다). 옵션은 다음과 같습니다.

    • (모든 운영 체제) python.org에서 다운로드합니다. 일반적으로 페이지에 먼저 나타나는 **Download Python 3.9.1** 버튼 (또는 최신 버전)을 사용합니다.
    • (Linux) 내장 Python 3 설치는 잘 작동하지만 다른 Python 패키지를 설치하려면 터미널에서 sudo apt install python3-pip를 실행해야 합니다.
    • (macOS) macOS의 Homebrew를 통해 brew install python3를 사용하여 설치합니다 (macOS의 시스템 Python 설치는 지원되지 않습니다).
    • (모든 운영 체제) Anaconda에서 다운로드합니다 (데이터 과학 목적).

  3. Windows에서는 Python 인터프리터의 위치가 PATH 환경 변수에 포함되어 있는지 확인하십시오. 명령 프롬프트에서 path를 실행하여 위치를 확인할 수 있습니다. Python 인터프리터 폴더가 포함되어 있지 않으면 Windows 설정을 열고 "environment"를 검색한 다음 **계정에 대한 환경 변수 편집**을 선택하고 **Path** 변수를 편집하여 해당 폴더를 포함합니다.

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

이 섹션에서는 Django가 설치된 가상 환경을 만듭니다. 가상 환경을 사용하면 전역 Python 환경에 Django를 설치하는 것을 방지하고 애플리케이션에 사용되는 라이브러리를 정확하게 제어할 수 있습니다. 가상 환경은 또한 환경에 대한 requirements.txt 파일 만들기를 쉽게 합니다.

  1. 파일 시스템에서 이 튜토리얼을 위한 프로젝트 폴더를 생성합니다. 예를 들어 hello_django입니다.

  2. 해당 폴더에서 다음 명령을 사용하여 현재 인터프리터를 기반으로 .venv라는 가상 환경을 만듭니다 (컴퓨터에 적합한 대로).

    # Linux
sudo apt-get install python3-venv    # If needed
python3 -m venv .venv
source .venv/bin/activate

# macOS
python3 -m venv .venv
source .venv/bin/activate

# Windows
py -3 -m venv .venv
.venv\scripts\activate

    참고: 위의 명령을 실행할 때는 일반 Python 설치를 사용하십시오. Anaconda 설치의 python.exe를 사용하면 ensurepip 모듈을 사용할 수 없기 때문에 오류가 발생하고 환경이 미완성 상태로 남겨집니다.

  3. code .를 실행하거나 VS Code를 실행하고 **파일** > **폴더 열기** 명령을 사용하여 프로젝트 폴더를 VS Code에서 엽니다.

  4. VS Code에서 명령 팔레트를 엽니다 (**보기** > **명령 팔레트** 또는 (⇧⌘P (Windows, Linux Ctrl+Shift+P))). 그런 다음 **Python: 인터프리터 선택** 명령을 선택합니다.

    Django tutorial: opening the Command Palette in VS Code

  5. 이 명령은 VS Code가 자동으로 찾을 수 있는 사용 가능한 인터프리터 목록을 표시합니다 (목록은 다를 수 있습니다. 원하는 인터프리터가 보이지 않으면 Python 환경 구성을 참조하십시오). 목록에서 프로젝트 폴더에 있는 ./.venv 또는 .\.venv로 시작하는 가상 환경을 선택합니다.

    Django tutorial: Selecting the virtual environment for Python

  6. 명령 팔레트에서 **터미널: 새 터미널 만들기** (⌃⇧` (Windows, Linux Ctrl+Shift+`))를 실행하여 터미널을 만들고 해당 활성화 스크립트를 실행하여 가상 환경을 자동으로 활성화합니다.

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

  7. 선택한 환경은 VS Code 상태 표시줄의 오른쪽에 표시되며, 가상 환경을 사용하고 있음을 나타내는 **('.venv': venv)** 표시기를 확인합니다.

    Django tutorial: selected environment showing in the VS Code status bar

  8. VS Code 터미널에서 다음 명령을 실행하여 가상 환경의 pip를 업데이트합니다.

    python -m pip install --upgrade pip

  9. VS Code 터미널에서 다음 명령을 실행하여 가상 환경에 Django를 설치합니다.

    python -m pip install django

이제 Django 코드를 작성할 준비가 된 독립적인 환경이 갖춰졌습니다. VS Code는 **터미널: 새 터미널 만들기** (⌃⇧` (Windows, Linux Ctrl+Shift+`))를 사용하면 환경을 자동으로 활성화합니다. 별도의 명령 프롬프트 또는 터미널을 열면 source .venv/bin/activate (Linux/macOS) 또는 .venv\Scripts\Activate.ps1 (Windows)를 실행하여 환경을 활성화하십시오. 명령 프롬프트 시작 부분에 **(.venv)**가 표시되면 환경이 활성화된 것입니다.

최소한의 Django 앱 만들기 및 실행

Django 용어로 "Django 프로젝트"는 여러 사이트 수준 구성 파일과 웹 호스트에 배포하여 전체 웹 애플리케이션을 만드는 하나 이상의 "앱"으로 구성됩니다. Django 프로젝트는 여러 앱을 포함할 수 있으며, 각 앱은 일반적으로 프로젝트에서 독립적인 기능을 수행하며, 동일한 앱이 여러 Django 프로젝트에 포함될 수 있습니다. 앱 자체는 Django가 예상하는 특정 규칙을 따르는 Python 패키지일 뿐입니다.

따라서 최소한의 Django 앱을 만들려면 먼저 앱을 담을 Django 프로젝트를 만든 다음 앱 자체를 만들어야 합니다. 두 목적 모두 Django 패키지를 설치할 때 설치되는 Django 관리 유틸리티인 django-admin을 사용합니다.

Django 프로젝트 만들기

  1. 가상 환경이 활성화된 VS Code 터미널에서 다음 명령을 실행합니다.

    django-admin startproject web_project .

    이 startproject 명령은 현재 폴더를 프로젝트 폴더로 가정하고 (끝에 . 사용) 다음과 같은 파일을 생성합니다.

    • manage.py: 프로젝트를 위한 Django 명령줄 관리 유틸리티입니다. python manage.py <command> [options]를 사용하여 프로젝트 관리 명령을 실행합니다.

    • web_project라는 하위 폴더로, 다음 파일을 포함합니다.

      • __init__.py: 이 폴더가 Python 패키지임을 Python에 알리는 빈 파일입니다.
      • asgi.py: ASGI 호환 웹 서버가 프로젝트를 서빙하는 진입점입니다. 일반적으로 이 파일은 프로덕션 웹 서버에 대한 후크를 제공하므로 그대로 둡니다.
      • settings.py: Django 프로젝트 설정을 포함하며, 웹 앱 개발 중에 수정합니다.
      • urls.py: Django 프로젝트의 목차를 포함하며, 개발 중에 수정합니다.
      • wsgi.py: WSGI 호환 웹 서버가 프로젝트를 서빙하는 진입점입니다. 일반적으로 이 파일은 프로덕션 웹 서버에 대한 후크를 제공하므로 그대로 둡니다.

  2. 다음 명령을 실행하여 빈 개발 데이터베이스를 만듭니다.

    python manage.py migrate

    서버를 처음 실행하면 개발용으로 사용되는 db.sqlite3 파일에 기본 SQLite 데이터베이스가 생성됩니다. 이 데이터베이스는 낮은 볼륨의 웹 앱의 경우 프로덕션에서도 사용할 수 있습니다. 데이터베이스에 대한 추가 정보는 데이터베이스 유형 섹션을 참조하십시오.

  3. Django 프로젝트를 확인하려면 가상 환경이 활성화되었는지 확인하고 python manage.py runserver 명령을 사용하여 Django 개발 서버를 시작하십시오. 서버는 기본 포트 8000에서 실행되며, 터미널 창에 다음과 같은 출력이 표시됩니다.

    Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
June 13, 2023 - 18:38:07
Django version 4.2.2, using settings 'web_project.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

    Django의 내장 웹 서버는 *로컬 개발 목적으로만* 사용됩니다. 그러나 웹 호스트에 배포할 때 Django는 호스트의 웹 서버를 대신 사용합니다. Django 프로젝트의 wsgi.py 및 asgi.py 모듈은 프로덕션 서버와 연결되는 후크를 처리합니다.

    기본값인 8000이 아닌 다른 포트를 사용하려면 명령줄에서 포트 번호를 지정하십시오. 예를 들어 python manage.py runserver 5000입니다.

  4. 터미널 출력 창의 http://127.0.0.1:8000/ URL을 Ctrl+클릭하여 기본 브라우저를 해당 주소로 엽니다. Django가 올바르게 설치되었고 프로젝트가 유효한 경우 아래에 표시된 기본 페이지가 표시됩니다. VS Code 터미널 출력 창에는 서버 로그도 표시됩니다.

    Django tutorial: default view of empty Django project

  5. 완료되면 브라우저 창을 닫고 터미널 출력 창에 표시된 대로 VS Code에서 Ctrl+C를 사용하여 서버를 중지합니다.

Django 앱 만들기

  1. 가상 환경이 활성화된 VS Code 터미널에서 프로젝트 폴더 (manage.py가 있는 곳)에서 관리 유틸리티의 startapp 명령을 실행합니다.

    python manage.py startapp hello

    이 명령은 hello라는 폴더를 생성하며, 여기에는 여러 코드 파일과 하나의 하위 폴더가 포함됩니다. 이 중 views.py (웹 앱의 페이지를 정의하는 함수 포함) 및 models.py (데이터 객체를 정의하는 클래스 포함)를 자주 사용하게 됩니다. migrations 폴더는 이 튜토리얼에서 나중에 설명할 데이터베이스 버전을 관리하기 위해 Django 관리 유틸리티에서 사용됩니다. 또한 apps.py (앱 구성), admin.py (관리 인터페이스 생성용) 및 tests.py (테스트 생성용) 파일도 있지만 여기서는 다루지 않습니다.

  2. hello/views.py를 다음과 같이 수정하여 앱의 홈 페이지에 대한 단일 뷰를 만드는 코드를 작성합니다.

    from django.http import HttpResponse

def home(request):
    return HttpResponse("Hello, Django!")

  3. hello/urls.py 파일을 다음 내용으로 만듭니다. urls.py 파일은 다른 URL을 적절한 뷰로 라우팅하는 패턴을 지정하는 곳입니다. 아래 코드는 앱의 루트 URL ("")을 hello/views.py에 방금 추가한 views.home 함수에 매핑하는 하나의 경로를 포함합니다.

    from django.urls import path
from hello import views

urlpatterns = [
    path("", views.home, name="home"),
]

  4. web_project 폴더에는 urls.py 파일도 있습니다. 이 파일은 실제 URL 라우팅이 처리되는 곳입니다. web_project/urls.py를 열고 다음 코드와 일치하도록 수정합니다 (원하는 경우 설명 주석을 그대로 유지할 수 있습니다). 이 코드는 django.urls.include를 사용하여 앱의 hello/urls.py를 가져옵니다. 이렇게 하면 앱의 경로가 앱 내에 포함됩니다. 프로젝트에 여러 앱이 포함된 경우 이 분리가 유용합니다.

    from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path("", include("hello.urls")),
    path('admin/', admin.site.urls)
]

  5. 수정된 모든 파일을 저장합니다.

  6. VS Code 터미널에서 가상 환경이 활성화된 상태로 python manage.py runserver로 개발 서버를 실행하고 브라우저에서 http://127.0.0.1:8000/으로 이동하여 "Hello, Django"가 렌더링된 페이지를 봅니다.

    Django tutorial: the basic Django app running in a browser

디버거 실행 프로필 만들기

매번 python manage.py runserver를 입력하는 번거로움 없이 서버를 실행하고 앱을 테스트하는 더 쉬운 방법이 있는지 궁금할 것입니다. 다행히도 있습니다! VS Code에서 사용자 지정 실행 프로필을 만들 수 있습니다. 이는 디버깅의 불가피한 작업에도 사용됩니다.

  1. VS Code의 **실행** 보기로 전환합니다 (왼쪽 활동 표시줄 또는 F5 사용). "실행 및 디버그 사용자 지정하려면 launch.json 파일 만들기" 메시지가 표시될 수 있습니다. 이는 디버그 구성이 포함된 launch.json 파일이 아직 없음을 의미합니다. VS Code에서 **launch.json 파일 만들기** 링크를 클릭하면 이를 만들 수 있습니다.

    Django tutorial: initial view of the debug panel

  2. 링크를 선택하면 VS Code에서 디버그 구성을 묻는 메시지를 표시합니다. 드롭다운에서 **Django**를 선택하면 VS Code에서 Django 실행 구성으로 새 launch.json 파일을 채웁니다. launch.json 파일에는 여러 디버그 구성이 포함되어 있으며, 각 구성은 configuration 배열 내의 별도 JSON 객체입니다.

  3. 아래로 스크롤하여 "Python: Django"라는 이름의 구성을 확인합니다.

    {
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Python Debugger: Django",
      "type": "debugpy",
      "request": "launch",
      "program": "${workspaceFolder}\\manage.py",
      "args": ["runserver"],
      "django": true,
      "justMyCode": true
    }
  ]
}

    이 구성은 VS Code에게 선택한 Python 인터프리터와 args 목록의 인수를 사용하여 "${workspaceFolder}/manage.py"를 실행하도록 지시합니다. 따라서 이 구성으로 VS Code 디버거를 시작하는 것은 활성화된 가상 환경으로 VS Code 터미널에서 python manage.py runserver를 실행하는 것과 같습니다. (원하는 경우 args에 "5000"과 같은 포트 번호를 추가할 수 있습니다.) "django": true 항목은 또한 VS Code에게 Django 페이지 템플릿 디버깅을 활성화하도록 지시하며, 이는 이 튜토리얼의 뒷부분에서 볼 수 있습니다.

  4. 구성을 테스트하려면 **실행** > **디버깅 시작** 메뉴 명령을 선택하거나 목록 옆의 녹색 **디버깅 시작** 화살표 (F5)를 선택합니다.

    Django tutorial: start debugging/continue arrow on the debug toolbar

  5. 터미널 출력 창의 http://127.0.0.1:8000/ URL을 Ctrl+클릭하여 브라우저를 열고 앱이 제대로 실행되고 있는지 확인합니다.

  6. 완료되면 브라우저를 닫고 디버거를 중지합니다. 디버거를 중지하려면 중지 도구 모음 단추 (빨간색 사각형) 또는 **실행** > **디버깅 중지** 명령 (⇧F5 (Windows, Linux Shift+F5))을 사용합니다.

  7. 이제 언제든지 **실행** > **디버깅 시작**을 사용하여 앱을 테스트할 수 있으며, 수정된 모든 파일을 자동으로 저장하는 이점도 있습니다.

디버거 탐색

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

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

  1. hello/urls.py에서 urlpatterns 목록에 경로를 추가합니다.

    path("hello/<name>", views.hello_there, name="hello_there"),

    path의 첫 번째 인수는 *name*이라는 변수 문자열을 허용하는 "hello/" 경로를 정의합니다. 이 문자열은 path의 두 번째 인수로 지정된 views.hello_there 함수에 전달됩니다.

    URL 경로는 대소문자를 구분합니다. 예를 들어 /hello/<name> 경로는 /Hello/<name>과 다릅니다. 두 경로 모두 동일한 뷰 함수를 처리하려면 각 변형에 대해 경로를 정의하십시오.

  2. views.py의 내용을 다음 코드로 대체하여 디버거에서 단계별로 실행할 수 있는 hello_there 함수를 정의합니다.

    import re
from django.utils.timezone import datetime
from django.http import HttpResponse

def home(request):
    return HttpResponse("Hello, Django!")

def hello_there(request, 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 HttpResponse(content)

    URL 경로에서 정의된 name 변수는 hello_there 함수의 인수로 제공됩니다. 코드 주석에서 설명한 대로 항상 임의의 사용자 제공 정보를 필터링하여 앱에 대한 다양한 공격을 방지하십시오. 이 경우 코드는 name 인수를 필터링하여 문자만 포함하도록 하여 제어 문자, HTML 등의 주입을 방지합니다. (다음 섹션에서 템플릿을 사용할 때 Django는 자동 필터링을 수행하므로 이 코드가 필요하지 않습니다.)

  3. hello_there 함수의 첫 번째 코드 줄 (now = datetime.now())에 다음 중 하나를 수행하여 중단점을 설정합니다.

    • 해당 줄에 커서를 놓고 F9를 누르거나,
    • 해당 줄에 커서를 놓고 **실행** > **중단점 전환** 메뉴 명령을 선택하거나,
    • 줄 번호 왼쪽 여백을 직접 클릭합니다 (거기에 마우스를 올리면 흐릿한 빨간 점이 나타납니다).

    중단점은 왼쪽 여백에 빨간 점으로 나타납니다.

    Django tutorial: a breakpoint set on the first line of the hello_there function

  4. **실행** > **디버깅 시작** 메뉴 명령을 선택하거나 목록 옆의 녹색 **디버깅 시작** 화살표 (F5)를 선택하여 디버거를 시작합니다.

    Django tutorial: start debugging/continue arrow on the debug toolbar

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

    Django tutorial: appearance of the debugging status bar

    VS Code에 디버깅 도구 모음 (아래 표시)이 나타나며, 다음 순서로 명령이 포함됩니다: 일시 중지 (또는 계속, F5), 단계별 실행 (F10), 단계별 진입 (F11), 단계별 나가기 (⇧F11 (Windows, Linux Shift+F11)), 다시 시작 (⇧⌘F5 (Windows, Linux Ctrl+Shift+F5)), 그리고 중지 (⇧F5 (Windows, Linux Shift+F5)). 각 명령에 대한 설명은 VS Code 디버깅을 참조하십시오.

    Django tutorial: the VS Code debug toolbar

  5. "Python 디버그 콘솔"이라는 터미널에 출력이 표시됩니다. 브라우저를 열고 http://127.0.0.1:8000/hello/VSCode로 이동합니다. 페이지가 렌더링되기 전에 VS Code에서 설정한 중단점에서 프로그램이 일시 중지됩니다. 중단점의 작은 노란색 화살표는 실행할 다음 코드 줄임을 나타냅니다.

    Django tutorial: VS Code paused at a breakpoint

  6. 단계별 실행을 사용하여 now = datetime.now() 문을 실행합니다.

  7. VS Code 창의 왼쪽에 now와 같은 로컬 변수와 name과 같은 인수를 표시하는 **변수** 창이 있습니다. 그 아래에는 **감시**, **호출 스택**, **중단점** 창이 있습니다 (자세한 내용은 VS Code 디버깅 참조). **로컬** 섹션에서 다른 값을 확장해 보십시오. 값을 두 번 클릭하거나 (Enter (Windows, Linux F2))를 사용하여 수정할 수도 있습니다. 그러나 now와 같은 변수를 변경하면 프로그램이 중단될 수 있습니다. 개발자는 일반적으로 코드가 처음부터 올바른 값을 생성하지 않았을 때 값을 수정하기 위해 변경합니다.

    Django tutorial: local variables and arguments in VS Code during debugging

  8. 프로그램이 일시 중지되면 **디버그 콘솔** 패널 (터미널 패널의 "Python 디버그 콘솔"과 다름)을 사용하면 표현식을 실험하고 현재 프로그램 상태를 사용하여 코드 조각을 시도해 볼 수 있습니다. 예를 들어, now = datetime.now() 줄을 단계별로 실행한 후 다른 날짜/시간 형식을 실험할 수 있습니다. 편집기에서 now.strftime("%A, %d %B, %Y at %X")라고 읽는 코드를 선택하고 마우스 오른쪽 버튼을 클릭한 다음 **디버그: 평가**를 선택하여 해당 코드를 디버그 콘솔로 보내 실행합니다.

    now.strftime("%A, %d %B, %Y at %X")
'Friday, 07 September, 2018 at 07:46:32'

    팁: **디버그 콘솔**에는 터미널에 표시되지 않는 앱 내의 예외도 표시됩니다. 예를 들어 **실행 및 디버그** 보기의 **호출 스택** 영역에서 "예외에서 일시 중지됨" 메시지가 표시되면 **디버그 콘솔**로 전환하여 예외 메시지를 확인하십시오.

  9. 해당 줄을 디버그 콘솔 하단의 > 프롬프트에 복사하고 서식을 변경해 보세요.

    now.strftime("%A, %d %B, %Y at %X")
'Tuesday, 13 June, 2023 at 18:03:19'
now.strftime("%a, %d %b, %Y at %X")
'Tue, 13 Jun, 2023 at 18:03:19'
now.strftime("%a, %d %b, %y at %X")
'Tue, 13 Jun, 23 at 18:03:19'

  10. 원하는 경우 몇 줄의 코드를 더 단계별로 실행한 다음 계속 (F5)을 선택하여 프로그램을 실행하십시오. 브라우저 창에 결과가 표시됩니다.

    Django tutorial: result of the modified program

  11. 코드를 수정하여 다른 datetime 형식을 사용하도록 합니다. 예를 들어 now.strftime("%a, %d %b, %y at %X")를 사용하고 파일을 저장합니다. Django 서버가 자동으로 다시 로드되므로 디버거를 다시 시작할 필요 없이 변경 사항이 적용됩니다. 브라우저에서 페이지를 새로 고쳐 업데이트를 확인합니다.

  12. 완료되면 브라우저를 닫고 디버거를 중지합니다. 디버거를 중지하려면 중지 도구 모음 단추 (빨간색 사각형) 또는 **실행** > **디버깅 중지** 명령 (⇧F5 (Windows, Linux Shift+F5))을 사용합니다.

팁: http://127.0.0.1:8000/hello/VSCode와 같이 특정 URL로 반복적으로 이동하는 것을 쉽게 하려면 views.py와 같은 파일에 print 문을 사용하여 해당 URL을 출력하십시오. URL은 VS Code 터미널에 표시되며, Ctrl+클릭을 사용하여 브라우저에서 열 수 있습니다.

정의로 이동 및 정의 엿보기 명령

Django 또는 다른 라이브러리를 사용하는 동안 해당 라이브러리 자체의 코드를 검사해야 할 수 있습니다. VS Code는 모든 코드에서 클래스 및 기타 객체의 정의로 직접 이동하는 두 가지 편리한 명령을 제공합니다.

  • **정의로 이동**은 코드에서 객체가 정의된 코드로 이동합니다. 예를 들어 views.py에서 home 함수의 HttpResponse를 마우스 오른쪽 버튼으로 클릭하고 **정의로 이동**을 선택하거나 (F12)를 사용하면 Django 라이브러리의 클래스 정의로 이동합니다.

  • **정의 엿보기** (⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10), 마우스 오른쪽 클릭 컨텍스트 메뉴에서도 사용 가능)는 유사하지만 클래스 정의를 편집기에서 직접 표시하여 (편집기 창에 공간을 만들어 코드를 가리지 않도록) 표시합니다. Peek 창을 닫으려면 Esc를 누르거나 오른쪽 상단의 **x**를 사용합니다.

    Django tutorial: Peek Definition showing the Flask class inline

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

이 튜토리얼에서 지금까지 만든 앱은 Python 코드로만 일반 텍스트 웹 페이지만 생성합니다. 코드로 직접 HTML을 생성하는 것도 가능하지만, 이는 앱을 교차 사이트 스크립팅 (XSS) 공격에 노출시키므로 개발자는 이러한 관행을 피합니다. 예를 들어 이 튜토리얼의 hello_there 함수에서는 content = "<h1>Hello there, " + clean_name + "!</h1>"과 같이 코드로 출력을 형식화하는 것을 생각할 수 있으며, 여기서 content의 결과는 직접 브라우저로 전달됩니다. 이 개방성은 공격자가 URL에 악성 HTML (JavaScript 코드 포함)을 포함하여 clean_name에 들어가고 브라우저에서 실행되도록 허용합니다.

훨씬 더 나은 방법은 **템플릿**을 사용하여 코드를 완전히 분리하는 것입니다. 이렇게 하면 코드는 데이터 값에만 관련되고 렌더링과는 관련이 없습니다.

Django에서 템플릿은 코드에서 런타임에 제공하는 값의 자리 표시자를 포함하는 HTML 파일입니다. 그런 다음 Django 템플릿 엔진이 렌더링 시 대체 작업을 수행하고 XSS 공격을 방지하기 위한 자동 이스케이프 기능을 제공합니다 (즉, 데이터 값에 HTML을 사용하려고 하면 HTML이 일반 텍스트로만 렌더링됩니다). 따라서 코드는 데이터 값에만 관련되고 템플릿은 마크업에만 관련됩니다. Django 템플릿은 템플릿 상속과 같은 유연한 옵션을 제공합니다. 이를 통해 공통 마크업으로 기본 페이지를 정의하고 해당 기본을 페이지별 추가 기능으로 확장할 수 있습니다.

이 섹션에서는 템플릿을 사용하여 단일 페이지를 만드는 것부터 시작합니다. 이후 섹션에서는 앱이 정적 파일을 서빙하도록 구성한 다음, 기본 템플릿에서 탐색 모음이 포함된 여러 페이지를 앱에 만듭니다. Django 템플릿은 제어 흐름 및 반복도 지원하며, 이는 이 튜토리얼의 뒷부분에서 템플릿 디버깅 컨텍스트에서 확인할 수 있습니다.

  1. 프로젝트의 web_project/settings.py 파일에서 INSTALLED_APPS 목록을 찾고 다음 항목을 추가합니다. 이렇게 하면 프로젝트가 앱을 인식하여 템플릿을 처리할 수 있습니다.

    'hello',

  2. hello 폴더 안에 templates라는 폴더를 만들고, 앱 이름과 일치하는 hello라는 하위 폴더를 만듭니다 (이 계층적 폴더 구조는 일반적인 Django 규칙입니다).

  3. templates/hello 폴더 안에 hello_there.html이라는 파일을 다음 내용으로 만듭니다. 이 템플릿에는 "name" 및 "date"라는 두 개의 데이터 값 자리 표시자가 있으며, 이는 중괄호 쌍 {{ 및 }}로 구분됩니다. 다른 모든 불변 텍스트는 템플릿의 일부이며, 형식화 마크업 (<strong> 등)도 포함됩니다. 보시다시피 템플릿 자리 표시자에는 형식화도 포함될 수 있습니다. 파이프 | 기호 뒤의 표현식은 이 경우 Django의 내장 date 필터 및 time 필터를 사용합니다. 따라서 코드는 미리 형식화된 문자열이 아닌 datetime *값*만 전달하면 됩니다.

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Hello, Django</title>
    </head>
    <body>
        <strong>Hello there, {{ name }}!</strong> It's {{ date | date:"l, d F, Y" }} at {{ date | time:"H:i:s" }}
    </body>
</html>

  4. views.py의 맨 위에 다음 import 문을 추가합니다.

    from django.shortcuts import render

  5. 또한 views.py에서 hello_there 함수를 수정하여 django.shortcuts.render 메서드를 사용하여 템플릿을 로드하고 *템플릿 컨텍스트*를 제공합니다. 컨텍스트는 템플릿 내에서 사용할 변수 집합입니다. render 함수는 요청 객체를 받고, 템플릿에 대한 경로 (templates 폴더를 기준으로 함), 컨텍스트 객체를 받습니다. (개발자는 일반적으로 템플릿 이름을 해당 템플릿을 사용하는 함수와 동일하게 지정하지만, 코드에서 정확한 파일 이름을 항상 참조하므로 이름이 일치할 필요는 없습니다.)

    def hello_there(request, name):
    print(request.build_absolute_uri()) #optional
    return render(
        request,
        'hello/hello_there.html',
        {
            'name': name,
            'date': datetime.now()
        }
    )

    코드가 훨씬 간단해졌으며 마크업과 형식화가 모두 템플릿에 포함되어 있으므로 데이터 값에만 관련되어 있음을 알 수 있습니다.

  6. 프로그램을 (디버거 안팎에서, ⌃F5 (Windows, Linux Ctrl+F5) 사용) 시작하고, /hello/name URL로 이동하고, 결과를 관찰합니다.

  7. 또한 <a%20value%20that%20could%20be%20HTML>와 같은 이름으로 /hello/name URL로 이동하여 Django의 자동 이스케이프가 작동하는 것을 확인합니다. "name" 값은 렌더링되는 실제 요소 대신 브라우저에 일반 텍스트로 표시됩니다.

정적 파일 서빙

정적 파일은 CSS 파일과 같이 특정 요청에 대해 있는 그대로 반환하는 웹 앱의 콘텐츠 조각입니다. 정적 파일 서빙에는 settings.py의 INSTALLED_APPS 목록에 기본적으로 포함된 django.contrib.staticfiles가 포함되어 있어야 합니다.

Django에서 정적 파일 서빙은 특히 프로덕션에 배포할 때 예술의 경지에 이릅니다. 여기서 보여주는 것은 Django 개발 서버와 Gunicorn과 같은 프로덕션 서버 모두에서 작동하는 간단한 접근 방식입니다. 그러나 정적 파일의 전체 처리는 이 튜토리얼의 범위를 벗어나므로 자세한 내용은 Django 설명서의 정적 파일 관리를 참조하십시오.

프로덕션으로 전환할 때 settings.py로 이동하여 DEBUG=False를 설정하고 ALLOWED_HOSTS = ['*']를 변경하여 특정 호스트를 허용하십시오. 이렇게 하면 컨테이너를 사용할 때 추가 작업이 발생할 수 있습니다. 자세한 내용은 Issue 13을 참조하십시오.

정적 파일을 위한 앱 준비

  1. 프로젝트의 web_project/urls.py에서 다음 import 문을 추가합니다.

    from django.contrib.staticfiles.urls import staticfiles_urlpatterns

  2. 동일한 파일에서 마지막에 다음 줄을 추가합니다. 이 줄은 프로젝트가 인식하는 목록에 표준 정적 파일 URL을 포함합니다.

    urlpatterns += staticfiles_urlpatterns()

템플릿에서 정적 파일 참조

  1. hello 폴더 안에 static이라는 폴더를 만듭니다.

  2. static 폴더 안에 앱 이름과 일치하는 hello라는 하위 폴더를 만듭니다.

    이 추가 하위 폴더가 있는 이유는 Django 프로젝트를 프로덕션 서버에 배포할 때 모든 정적 파일을 단일 폴더로 수집한 다음 전용 정적 파일 서버에서 서빙하기 때문입니다. static/hello 하위 폴더는 앱의 정적 파일이 수집될 때 프로젝트 내의 다른 앱의 파일과 충돌하지 않도록 앱별 하위 폴더에 있도록 보장합니다.

  3. static/hello 폴더 안에 site.css라는 파일을 다음 내용으로 만듭니다. 이 코드를 입력한 후 VS Code가 CSS 파일에 대해 제공하는 구문 강조 표시 (색상 미리 보기 포함)도 관찰합니다.

    .message {
    font-weight: 600;
    color: blue;
}

  4. templates/hello/hello_there.html에서 <title> 요소 뒤에 다음 줄을 추가합니다. {% load static %} 태그는 사용자 지정 Django 템플릿 태그 세트로, {% static %}을 사용하여 스타일시트와 같은 파일을 참조할 수 있습니다.

    {% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'hello/site.css' %}" />

  5. 또한 templates/hello/hello_there.html에서 <body> 요소의 내용을 <strong> 태그 대신 message 스타일을 사용하는 다음 마크업으로 바꿉니다.

    <span class="message">Hello, there {{ name }}!</span> It's {{ date | date:'l, d F, Y' }} at {{ date | time:'H:i:s' }}.

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

collectstatic 명령 사용

프로덕션 배포의 경우 일반적으로 python manage.py collectstatic 명령을 사용하여 앱의 모든 정적 파일을 단일 폴더로 수집합니다. 그런 다음 전용 정적 파일 서버를 사용하여 해당 파일을 서빙할 수 있으며, 이는 일반적으로 더 나은 전반적인 성능을 제공합니다. 다음 단계는 이 수집이 어떻게 이루어지는지 보여주지만, Django 개발 서버로 실행할 때는 수집을 사용하지 않습니다.

  1. web_project/settings.py에서 collectstatic 명령을 사용할 때 정적 파일이 수집되는 위치를 정의하는 다음 줄을 추가합니다.

    STATIC_ROOT = BASE_DIR / 'static_collected'

  2. 터미널에서 python manage.py collectstatic 명령을 실행하고 hello/site.css가 manage.py 옆의 최상위 static_collected 폴더로 복사되는 것을 관찰합니다.

  3. 실제로는 정적 파일을 변경할 때마다 그리고 프로덕션에 배포하기 전에 collectstatic을 실행합니다.

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

대부분의 웹 앱은 하나 이상의 페이지를 가지며, 이러한 페이지는 일반적으로 많은 공통 요소를 공유하므로 개발자는 이러한 공통 요소를 기본 페이지 템플릿으로 분리하고 다른 페이지 템플릿이 해당 템플릿을 확장하도록 합니다. (이를 템플릿 상속이라고도 하며, 확장된 페이지가 기본 페이지의 요소를 상속한다는 의미입니다.)

또한 동일한 템플릿을 확장하는 많은 페이지를 만들 가능성이 있으므로, 새 페이지 템플릿을 빠르게 초기화하는 데 사용할 수 있는 VS Code의 코드 조각을 만드는 것이 유용합니다. 조각은 지루하고 오류가 발생하기 쉬운 복사-붙여넣기 작업을 피하는 데 도움이 됩니다.

다음 섹션에서는 이 프로세스의 다양한 부분을 단계별로 살펴봅니다.

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

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

다음 단계에서는 기본 템플릿을 만드는 방법을 보여줍니다.

  1. templates/hello 폴더 안에 layout.html이라는 파일을 다음 내용으로 만듭니다. 이 파일에는 "title" 및 "content"라는 블록이 포함됩니다. 보시다시피 마크업은 홈, 정보, 연락처 페이지에 대한 링크가 있는 간단한 탐색 모음 구조를 정의합니다. 이러한 페이지는 나중에 섹션에서 만듭니다. Django의 {% url %} 태그를 사용하여 관련 URL 패턴의 이름을 통해 다른 페이지를 참조하는 것을 주의하십시오. 상대 경로가 아니라.

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

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

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

  2. static/hello/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을 확장하므로, 기본 템플릿에 대한 적절한 참조로 새 템플릿 파일을 초기화하는 **코드 스니펫**을 만드는 것이 시간을 절약해 줍니다. 코드 스니펫은 단일 소스에서 일관된 코드 조각을 제공하므로, 기존 코드를 복사하여 붙여넣을 때 발생할 수 있는 오류를 방지할 수 있습니다.

  1. VS Code에서 파일(Windows/Linux) 또는 Code(macOS) 메뉴를 선택한 다음 기본 설정 > 사용자 스니펫을 선택합니다.

  2. 나타나는 목록에서 html을 선택합니다. (이전에 스니펫을 만든 경우 목록의 기존 스니펫 섹션에 "html.json"으로 표시될 수 있습니다.)

  3. VS Code에서 html.json을 연 후, 기존 중괄호 안에 아래 코드를 추가합니다. (여기에 표시되지 않은 설명 주석은 $0 줄이 스니펫을 삽입한 후 VS Code가 커서를 놓는 위치를 나타내는 등의 세부 정보를 설명합니다.)

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

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

  4. html.json 파일을 저장합니다. (⌘S (Windows, Linux Ctrl+S)).

  5. 이제 스니펫의 접두사(예: djext)를 입력하기 시작하면 VS Code에서 다음 섹션에 표시된 대로 스니펫을 자동 완성 옵션으로 제공합니다. 스니펫 삽입 명령을 사용하여 메뉴에서 스니펫을 선택할 수도 있습니다.

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

코드 스니펫을 사용하여 페이지 추가

코드 스니펫을 배치하면 홈, 정보, 연락처 페이지에 대한 템플릿을 빠르게 만들 수 있습니다.

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

    Django tutorial: autocompletion for the djextlayout code snippet

    완성 옵션을 선택하면 스니펫 코드가 커서가 스니펫의 삽입 지점에 있는 상태로 나타납니다.

    Django tutorial: insertion of the djextlayout code snippet

  2. "title" 블록의 삽입 지점에 Home을 입력하고, "content" 블록에 <p>Home page for the Visual Studio Code Django tutorial.</p>를 입력한 후 파일을 저장합니다. 이 줄들은 확장된 페이지 템플릿의 유일한 고유한 부분입니다.

  3. templates/hello 폴더에 about.html을 만들고, 스니펫을 사용하여 보일러플레이트 마크업을 삽입하고, "title" 및 "content" 블록에 각각 About us 및 <p>About page for the Visual Studio Code Django tutorial.</p>를 삽입한 후 파일을 저장합니다.

  4. 이전 단계를 반복하여 Contact us와 <p>Contact page for the Visual Studio Code Django tutorial.</p>를 사용하여 templates/hello/contact.html을 만듭니다.

  5. 앱의 urls.py에 /about 및 /contact 페이지에 대한 경로를 추가합니다. path 함수의 name 인수는 템플릿의 {% url %} 태그에서 페이지를 참조하는 데 사용하는 이름을 정의한다는 점에 유의하십시오.

    path("about/", views.about, name="about"),
path("contact/", views.contact, name="contact"),

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

    # Replace the existing home function with the one below
def home(request):
    return render(request, "hello/home.html")

def about(request):
    return render(request, "hello/about.html")

def contact(request):
    return render(request, "hello/contact.html")

앱 실행

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

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

데이터, 데이터 모델 및 마이그레이션 작업

많은 웹 앱은 데이터베이스에 저장된 정보와 함께 작동하며, Django는 모델을 사용하여 해당 데이터베이스의 객체를 쉽게 표현할 수 있도록 합니다. Django에서 모델은 일반적으로 테이블을 나타내는 django.db.models.Model에서 파생된 Python 클래스입니다. 이러한 클래스는 앱의 models.py 파일에 배치합니다.

Django를 사용하면 거의 전적으로 코드에서 정의한 모델을 통해 데이터베이스와 작업합니다. 그런 다음 Django의 "마이그레이션"은 모델을 시간이 지남에 따라 발전시키면서 기본 데이터베이스의 모든 세부 정보를 자동으로 처리합니다. 일반적인 워크플로는 다음과 같습니다.

  1. models.py 파일에서 모델을 변경합니다.
  2. python manage.py makemigrations를 실행하여 migrations 폴더에 현재 상태에서 새 상태로 데이터베이스를 마이그레이션하는 스크립트를 생성합니다.
  3. python manage.py migrate를 실행하여 실제 데이터베이스에 스크립트를 적용합니다.

마이그레이션 스크립트는 시간이 지남에 따라 데이터 모델에 만드는 모든 증분 변경 사항을 효과적으로 기록합니다. 마이그레이션을 적용함으로써 Django는 데이터베이스를 모델에 일치하도록 업데이트합니다. 각 증분 변경 사항에는 자체 스크립트가 있으므로 Django는 임의의 이전 버전의 데이터베이스(새 데이터베이스 포함)를 현재 버전으로 자동으로 마이그레이션할 수 있습니다. 결과적으로 models.py의 모델에만 집중하면 되며, 기본 데이터베이스 스키마나 마이그레이션 스크립트에는 신경 쓰지 않아도 됩니다. Django가 그 부분을 처리하도록 하십시오!

코드에서도 모델을 통해 전적으로 데이터를 저장하고 검색합니다. Django가 기본 세부 정보를 처리합니다. 한 가지 예외는 Django 관리 유틸리티 loaddata 명령을 사용하여 데이터베이스에 데이터를 쓸 수 있다는 것입니다. 이 유틸리티는 migrate 명령이 스키마를 초기화한 후 데이터 세트를 초기화하는 데 자주 사용됩니다.

db.sqlite3 파일을 사용할 때 SQLite 브라우저와 같은 도구를 사용하여 데이터베이스와 직접 작업할 수도 있습니다. 이러한 도구를 사용하여 테이블에 레코드를 추가하거나 삭제하는 것은 괜찮지만, 데이터베이스 스키마를 변경하는 것은 피해야 합니다. 그렇지 않으면 데이터베이스가 앱의 모델과 동기화되지 않습니다. 대신 모델을 변경하고 makemigrations를 실행한 다음 migrate를 실행하십시오.

데이터베이스 유형

기본적으로 Django는 개발 작업에 적합한 앱 데이터베이스에 db.sqlite3 파일을 포함합니다. SQLite 사용 시기(sqlite.org)에 설명된 대로 SQLite는 하루 100K 히트 미만의 저~중간 트래픽 사이트에 적합하지만, 더 높은 트래픽에는 권장되지 않습니다. 또한 단일 컴퓨터로 제한되므로 로드 밸런싱 및 지리적 복제와 같은 다중 서버 시나리오에서는 사용할 수 없습니다.

이러한 이유로 PostgreSQL, MySQL, SQL Server와 같은 프로덕션 수준 데이터 저장소를 사용하는 것을 고려하십시오. 다른 데이터베이스에 대한 Django의 지원에 대한 정보는 데이터베이스 설정을 참조하십시오. 또한 Azure SDK for Python을 사용하여 테이블 및 블롭과 같은 Azure 저장소 서비스와 작업할 수 있습니다.

모델 정의

Django 모델은 다시 django.db.model.Models에서 파생된 Python 클래스이며, 앱의 models.py 파일에 배치합니다. 데이터베이스에서 각 모델에는 id라는 고유 ID 필드가 자동으로 부여됩니다. 다른 모든 필드는 CharField(제한된 텍스트), TextField(무제한 텍스트), EmailField, URLField, IntegerField, DecimalField, BooleanField, DateTimeField, ForeignKey, ManyToMany 등 django.db.models의 유형을 사용하여 클래스의 속성으로 정의됩니다. (자세한 내용은 Django 설명서의 모델 필드 참조를 참조하십시오.)

각 필드는 max_length와 같은 일부 속성을 가집니다. blank=True 속성은 필드가 선택 사항임을 의미합니다. null=true는 값이 선택 사항임을 의미합니다. 또한 값을 데이터 값/표시 값 튜플 배열의 값으로 제한하는 choices 속성도 있습니다.

예를 들어, 간단한 메시지 로그에 대한 날짜별 항목을 나타내는 데이터 모델을 정의하기 위해 models.py에 다음 클래스를 추가합니다.

from django.db import models
from django.utils import timezone

class LogMessage(models.Model):
    message = models.CharField(max_length=300)
    log_date = models.DateTimeField("date logged")

    def __str__(self):
        """Returns a string representation of a message."""
        date = timezone.localtime(self.log_date)
        return f"'{self.message}' logged on {date.strftime('%A, %d %B, %Y at %X')}"

모델 클래스에는 다른 클래스 속성에서 계산된 값을 반환하는 메서드가 포함될 수 있습니다. 모델은 일반적으로 인스턴스의 문자열 표현을 반환하는 __str__ 메서드를 포함합니다.

데이터베이스 마이그레이션

models.py를 편집하여 데이터 모델을 변경했으므로 데이터베이스 자체를 업데이트해야 합니다. VS Code에서 가상 환경이 활성화된 터미널을 열고 (터미널: 새 터미널 만들기 명령, ⌃⇧` (Windows, Linux Ctrl+Shift+`))) 프로젝트 폴더로 이동하여 다음 명령을 실행합니다.

python manage.py makemigrations
python manage.py migrate

migrations 폴더를 살펴보면 makemigrations가 생성하는 스크립트를 볼 수 있습니다. 데이터베이스 자체를 살펴봐서 스키마가 업데이트되었는지 확인할 수도 있습니다.

명령을 실행할 때 오류가 발생하면 이전 단계에서 남은 디버그 터미널을 사용하고 있지 않은지 확인하십시오. 이러한 터미널은 가상 환경이 활성화되지 않았을 수 있습니다.

모델을 통해 데이터베이스 사용

모델을 설정하고 데이터베이스를 마이그레이션하면 모델만을 사용하여 데이터를 저장하고 검색할 수 있습니다. 이 섹션에서는 메시지를 기록할 수 있는 폼 페이지를 앱에 추가합니다. 그런 다음 이러한 메시지를 표시하도록 홈 페이지를 수정합니다. 여기서 많은 코드 파일을 수정하므로 세부 사항에 주의하십시오.

  1. hello 폴더(views.py가 있는 곳)에 다음 코드로 forms.py라는 새 파일을 만듭니다. 이 코드는 데이터 모델 LogMessage에서 가져온 필드를 포함하는 Django 폼을 정의합니다.

    from django import forms
from hello.models import LogMessage

class LogMessageForm(forms.ModelForm):
    class Meta:
        model = LogMessage
        fields = ("message",)   # NOTE: the trailing comma is required

  2. templates/hello 폴더에 log_message.html이라는 새 템플릿을 다음 내용으로 만듭니다. 이 템플릿은 폼의 본문을 정의하기 위해 form이라는 변수가 템플릿에 전달된다고 가정합니다. 그런 다음 "Log"라는 레이블이 있는 제출 버튼을 추가합니다.

    {% extends "hello/layout.html" %}
{% block title %}
    Log a message
{% endblock %}
{% block content %}
    <form method="POST" class="log-form">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit" class="save btn btn-default">Log</button>
    </form>
{% endblock %}

    참고: Django의 {% csrf_token %} 태그는 사이트 간 요청 위조로부터 보호를 제공합니다. 자세한 내용은 Django 설명서의 사이트 간 요청 위조 보호를 참조하십시오.

  3. 앱의 static/hello/site.css 파일에 입력 폼을 더 넓게 만들기 위한 규칙을 추가합니다.

    input[name=message] {
    width: 80%;
}

  4. 앱의 urls.py 파일에 새 페이지에 대한 경로를 추가합니다.

    path("log/", views.log_message, name="log"),

  5. views.py에서 URL 경로에서 참조하는 log_message라는 뷰를 정의합니다. 이 뷰는 HTTP GET 및 POST 사례를 모두 처리합니다. GET 사례(else: 섹션)에서는 이전 단계에서 정의한 폼을 표시합니다. POST 사례에서는 폼의 데이터를 데이터 객체(message)로 가져오고 타임스탬프를 설정한 다음 해당 객체를 저장하여 데이터베이스에 기록합니다.

    # Add these to existing imports at the top of the file:
from django.shortcuts import redirect
from hello.forms import LogMessageForm
from hello.models import LogMessage

# Add this code elsewhere in the file:
def log_message(request):
    form = LogMessageForm(request.POST or None)

    if request.method == "POST":
        if form.is_valid():
            message = form.save(commit=False)
            message.log_date = datetime.now()
            message.save()
            return redirect("home")
    else:
        return render(request, "hello/log_message.html", {"form": form})

  6. 모든 것을 시도해 보기 전에 마지막 단계입니다! templates/hello/layout.html에 "navbar" div에 메시지 로깅 페이지에 대한 링크를 추가합니다.

    <!-- Insert below the link to Home -->
<a href="{% url 'log' %}" class="navbar-item">Log Message</a>

  7. 앱을 실행하고 홈 페이지를 브라우저에서 엽니다. 네비게이션 바에서 메시지 기록 링크를 선택하면 메시지 로깅 페이지가 표시되어야 합니다.

    Django tutorial: the message logging page added to the app

  8. 메시지를 입력하고 기록을 선택하면 홈 페이지로 다시 이동해야 합니다. 홈 페이지에는 아직 기록된 메시지가 표시되지 않습니다(곧 해결할 것입니다). 몇 개의 메시지를 더 자유롭게 기록하십시오. 원하는 경우 SQLite 브라우저와 같은 도구를 사용하여 데이터베이스를 확인하여 레코드가 생성되었는지 확인할 수 있습니다. 데이터베이스를 읽기 전용으로 열거나, 그렇지 않으면 앱을 사용하기 전에 데이터베이스를 닫는 것을 잊지 마십시오. 그렇지 않으면 데이터베이스가 잠겨 앱이 실패합니다.

  9. 완료되면 앱을 중지하십시오.

  10. 이제 홈 페이지를 수정하여 기록된 메시지를 표시합니다. 먼저 앱의 templates/hello/home.html 파일의 내용을 아래 마크업으로 바꿉니다. 이 템플릿은 message_list라는 컨텍스트 변수를 예상합니다. 이를 수신하면({% if message_list %} 태그로 확인) 해당 목록을 반복하여({% for message in message_list %} 태그) 각 메시지에 대한 테이블 행을 생성합니다. 그렇지 않으면 페이지에 아직 메시지가 기록되지 않았음을 나타냅니다.

    {% extends "hello/layout.html" %}
{% block title %}
    Home
{% endblock %}
{% block content %}
    <h2>Logged messages</h2>

    {% if message_list %}
        <table class="message_list">
            <thead>
            <tr>
                <th>Date</th>
                <th>Time</th>
                <th>Message</th>
            </tr>
            </thead>
            <tbody>
            {% for message in message_list %}
                <tr>
                    <td>{{ message.log_date | date:'d M Y' }}</td>
                    <td>{{ message.log_date | time:'H:i:s' }}</td>
                    <td>
                        {{ message.message }}
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    {% else %}
        <p>No messages have been logged. Use the <a href="{% url 'log' %}">Log Message form</a>.</p>
    {% endif %}
{% endblock %}

  11. static/hello/site.css에 테이블을 약간 포맷하기 위한 규칙을 추가합니다.

    .message_list th,td {
    text-align: left;
    padding-right: 15px;
}

  12. views.py에서 홈 페이지를 구현하는 데 사용할 Django의 일반 ListView 클래스를 가져옵니다.

    from django.views.generic import ListView

  13. 또한 views.py에서 home 함수를 ListView에서 파생된 HomeListView라는 *클래스*로 바꾸고, 이 클래스는 LogMessage 모델에 연결하고 템플릿에 대한 컨텍스트를 생성하기 위해 get_context_data 함수를 구현합니다.

    # Remove the old home function if you want; it's no longer used

class HomeListView(ListView):
    """Renders the home page, with a list of all messages."""
    model = LogMessage

    def get_context_data(self, **kwargs):
        context = super(HomeListView, self).get_context_data(**kwargs)
        return context

  14. 앱의 urls.py에 데이터 모델을 가져옵니다.

    from hello.models import LogMessage

  15. 또한 urls.py에서 최근 LogMessage 객체 다섯 개를 역순으로(즉, 데이터베이스를 쿼리함) 검색하는 새 뷰에 대한 변수를 만들고, 템플릿 컨텍스트(message_list)에서 데이터 이름을 제공하며, 사용할 템플릿을 식별합니다.

    home_list_view = views.HomeListView.as_view(
    queryset=LogMessage.objects.order_by("-log_date")[:5],  # :5 limits the results to the five most recent
    context_object_name="message_list",
    template_name="hello/home.html",
)

  16. urls.py에서 홈 페이지에 대한 경로를 home_list_view 변수를 사용하도록 수정합니다.

        # Replace the existing path for ""
    path("", home_list_view, name="home"),

  17. 앱을 시작하고 홈 페이지를 브라우저에서 엽니다. 이제 메시지가 표시되어야 합니다.

    Django tutorial: app home page displaying message from the database

  18. 완료되면 앱을 중지하십시오.

페이지 템플릿으로 디버거 사용

이전 섹션에서 보았듯이, 페이지 템플릿은 {% url %} 및 {% block %}과 같은 수동, 선언적 요소뿐만 아니라 {% for message in message_list %} 및 {% if message_list %}와 같은 절차적 지시문을 포함할 수 있습니다. 결과적으로 다른 절차적 코드와 마찬가지로 템플릿 내에 프로그래밍 오류가 발생할 수 있습니다.

다행히 VS Code용 Python 확장은 디버깅 구성에 "django": true가 있는 경우(이미 있는 경우) 템플릿 디버깅을 제공합니다. 다음 단계는 이 기능을 보여줍니다.

  1. templates/hello/home.html에서 아래 이미지의 노란색 화살표로 표시된 대로 {% if message_list %} 및 {% for message in message_list %} 줄에 중단점을 설정합니다.

    Django tutorial: breakpoints set in a Django page template

  2. 디버거에서 앱을 실행하고 홈 페이지를 브라우저에서 엽니다. (이미 디버거를 실행 중인 경우 중단점을 설정한 후 앱을 다시 시작할 필요는 없습니다. 페이지를 새로고침하기만 하면 됩니다.) VS Code가 {% if %} 문에서 템플릿으로 디버거를 중단시키고 변수 창에 모든 컨텍스트 변수를 표시하는 것을 관찰합니다.

    Django tutorial: debugger stopped at breakpoints in the page template

  3. 단계별 실행(F10) 명령을 사용하여 템플릿 코드를 단계별로 실행합니다. 디버거가 선언적 문을 모두 건너뛰고 절차적 코드에서 일시 중지되는 것을 관찰합니다. 예를 들어 {% for message in message_list %} 루프를 단계별로 실행하면 message의 각 값을 검사하고 <td>{{ message.log_date | date:'d M Y' }}</td>와 같은 줄로 이동할 수 있습니다.

  4. 디버그 콘솔 창에서도 변수를 작업할 수 있습니다. (하지만 date와 같은 Django 필터는 현재 콘솔에서 사용할 수 없습니다.)

  5. 준비가 되면 계속(F5)을 선택하여 앱 실행을 완료하고 브라우저에서 렌더링된 페이지를 봅니다. 완료되면 디버거를 중지합니다.

선택 활동

다음 섹션에서는 Python 및 Visual Studio Code 작업을 할 때 유용할 수 있는 추가 단계를 설명합니다.

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

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

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

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

  1. Python: 인터프리터 선택 명령을 사용하여 선택한 환경을 선택하고 터미널: 새 터미널 만들기 명령(⌃⇧` (Windows, Linux Ctrl+Shift+`)))을 실행하여 해당 환경이 활성화된 터미널을 엽니다.

  2. 터미널에서 pip freeze > requirements.txt를 실행하여 프로젝트 폴더에 requirements.txt 파일을 만듭니다.

프로젝트 복사본을 받는 모든 사람(또는 모든 빌드 서버)은 pip install -r requirements.txt 명령을 실행하여 활성 환경 내에서 앱이 종속하는 패키지를 다시 설치하기만 하면 됩니다.

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

슈퍼유저 생성 및 관리자 인터페이스 활성화

기본적으로 Django는 인증으로 보호되는 웹 앱에 대한 관리자 인터페이스를 제공합니다. 이 인터페이스는 프로젝트의 INSTALLED_APPS 목록(settings.py)에 기본적으로 포함된 내장 django.contrib.admin 앱을 통해 구현되며, 인증은 기본적으로 INSTALLED_APPS에도 있는 내장 django.contrib.auth 앱으로 처리됩니다.

관리자 인터페이스를 활성화하려면 다음 단계를 수행합니다.

  1. VS Code에서 가상 환경에 대한 터미널을 열고 python manage.py createsuperuser --username=<username> --email=<email> 명령을 실행하여 앱에 슈퍼유저 계정을 만듭니다. 물론 <username> 및 <email>을 개인 정보로 바꿉니다. 명령을 실행하면 Django가 비밀번호를 입력하고 확인하라는 메시지를 표시합니다.

    사용자 이름과 비밀번호 조합을 반드시 기억하십시오. 이는 앱에서 인증하는 데 사용하는 자격 증명입니다.

  2. 프로젝트 수준 urls.py(이 튜토리얼에서는 web_project/urls.py)에 다음 URL 경로를 추가하여 내장 관리자 인터페이스를 가리킵니다.

    # This path is included by default when creating the app
 path("admin/", admin.site.urls),

  3. 서버를 실행한 다음 브라우저를 앱의 /admin 페이지(개발 서버를 사용하는 경우 http://127.0.0.1:8000/admin과 같음)로 엽니다.

  4. django.contrib.auth의 도움으로 로그인 페이지가 나타납니다. 슈퍼유저 자격 증명을 입력합니다.

    Django tutorial: default Django login prompt

  5. 인증되면 기본 관리 페이지가 표시되며, 이 페이지를 통해 사용자 및 그룹을 관리할 수 있습니다.

    Django tutorial: the default Django administrative interface

관리자 인터페이스는 원하는 만큼 사용자 정의할 수 있습니다. 예를 들어 데이터베이스의 항목을 편집하고 제거하는 기능을 제공할 수 있습니다. 사용자 지정에 대한 자세한 내용은 Django 관리 사이트 설명서를 참조하십시오.

Container Tools 확장을 사용하여 Django 앱용 컨테이너 만들기

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

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

다음 단계

Visual Studio Code에서 Django를 사용하여 작동하는 방법에 대한 이 워크스루를 완료하신 것을 축하드립니다!

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

이 튜토리얼에서는 Django가 할 수 있는 모든 것의 표면만 긁었습니다. 뷰, 템플릿, 데이터 모델, URL 라우팅, 관리자 인터페이스, 다른 종류의 데이터베이스 사용, 프로덕션 배포 등에 대한 더 많은 세부 정보는 Django 설명서와 공식 Django 튜토리얼을 방문하십시오.

프로덕션 웹사이트에서 앱을 테스트하려면 Docker 컨테이너를 사용하여 Azure App Service에 Python 앱 배포 튜토리얼을 확인하십시오. Azure는 또한 VS Code 내에서 웹 앱을 배포하는 표준 컨테이너인 Linux의 App Service도 제공합니다.

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

12/10/2025
English 한국어 中文(简体)
© . This site is unofficial and not affiliated with Microsoft.