자습서: Visual Studio에서 보기 및 페이지 템플릿을 사용하여 Django 앱 만들기

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

Visual Studio를 사용하면 프로젝트에 대한 보다 광범위한 시작점을 제공하는 프로젝트 템플릿에서 Django 애플리케이션을 만들 수 있습니다. 자습서 시리즈 1단계에서는 하나 이상의 Django 웹앱을 지원하기 위해 Django 웹 프로젝트에 대한 사이트 수준 구성 파일을 만드는 방법을 설명합니다. 2단계에서는 Django 웹 프로젝트에 콘텐츠를 추가하여 렌더링된 여러 보기가 있는 단일 페이지로 첫 번째 Django 웹앱을 만듭니다.

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

필수 구성 요소

• 1단계에서 만든 Visual Studio 솔루션 및 Django 프로젝트: Visual Studio 솔루션 만들기 및 Django 프로젝트.

• Django 템플릿 버전, Visual Studio 프로젝트 및 Django 프로젝트 및 Mac의 Python 개발에 대한 자세한 내용은 이 자습서 시리즈의 1단계에서 필수 구성 요소 섹션을 검토하세요.

기본 구조를 사용하여 Django 앱 만들기

Django 앱은 특정 목적을 위해 관련된 파일 집합을 포함하는 별도의 Python 패키지입니다. Django 프로젝트에는 웹 호스트가 단일 도메인 이름에서 여러 개의 개별 진입점(또는 경로)을 제공하는 데 도움이 되는 많은 앱이 포함될 수 있습니다. 예를 들어 contoso.com 같은 도메인에 대한 Django 프로젝트에는 www.contoso.com 경로용 앱 1개, support.contoso.com 경로용 두 번째 앱, docs.contoso.com 경로에 대한 세 번째 앱이 포함될 수 있습니다. 이 시나리오에서 Django 프로젝트는 urls.py 및 settings.py 파일에서 사이트 수준 URL 라우팅 및 설정을 처리합니다. 각 앱에는 내부 라우팅, 뷰, 모델, 정적 파일 및 관리 인터페이스를 통해 고유한 스타일 지정 및 동작이 있습니다.

Django 앱의 개발은 일반적으로 표준 파일 집합으로 시작됩니다. Visual Studio는 Django 프로젝트 내에서 이러한 파일을 사용하여 Django 앱을 초기화하는 템플릿을 제공합니다. 동일한 용도로 사용되는 통합 메뉴 명령도 있습니다.

템플릿을 사용하여 앱 만들기

템플릿에서 앱을 만들려면 다음 단계를 수행합니다.

1. 솔루션 탐색기Visual Studio 프로젝트(BasicProject)를 마우스 오른쪽 단추로 클릭하고 >새 항목추가를 선택합니다.

   visual Studio 2022에서 프로젝트에 새 항목을 추가하는 방법을 보여 주는

   

2. 새 항목 추가 대화 상자에서 Django 1.9 앱 템플릿을 선택합니다.

   1. 앱 이름HelloDjangoApp입력합니다.

   2. 추가를 선택합니다.

   Visual Studio 2022에서 Django 1.9 앱 템플릿을 구성하는 방법을 보여 주는

   Visual Studio에서 Django 1.9 앱 템플릿을 구성하는 방법을 보여 주는

통합 메뉴 명령을 사용하여 앱 만들기

다음 단계에 따라 통합 Django 메뉴 명령을 사용하여 앱을 만듭니다.

1. 솔루션 탐색기Visual Studio 프로젝트(BasicProject)를 마우스 오른쪽 단추로 클릭하고 추가>Django 앱선택합니다.

   

   Visual Studio의 솔루션 탐색기의 상황에 맞는 메뉴에서 새 Django 앱을 추가하는 방법을 보여 주는

2. Add Django App 대화 상자에서 앱 이름을 'HelloDjangoApp'으로 입력합니다.

   Visual Studio 2022에서 새 Django 앱의 이름을 입력하는 방법을 보여 주는

   

3. 확인을 선택한 다음을(를) 선택하십시오.

Django 앱 폴더 탐색

HelloDjangoApp 앱을 만들 때 Visual Studio는 Visual Studio 프로젝트에서 이름이 같은 폴더를 만듭니다.

폴더에는 다음 항목이 포함됩니다.

"HelloDjangoApp"이라는 이름을 사용하면 apps.py 파일의 내용이 다음과 같이 표시됩니다.

from django.apps import AppConfig

class HelloDjangoAppConfig(AppConfig):
    name = 'HelloDjangoApp'

Visual Studio 또는 명령줄에서 앱 만들기

추가>Django 앱 명령 및 추가>새 항목 명령(Django 애플리케이션 템플릿과 결합)은 Django CLI 명령 manage.py startapp <app_name>동일한 파일을 생성합니다. Visual Studio에서 Django 앱을 만들 때의 이점은 앱 폴더와 모든 파일이 프로젝트에 자동으로 통합된다는 것입니다. 동일한 Visual Studio 명령을 사용하여 프로젝트에 원하는 수의 앱을 만들 수 있습니다.

앱별 페이지 보기 추가

기본 도구 모음에서 디버그>디버깅 시작(F5) 또는 웹 서버 선택하여 Visual Studio에서 현재 프로젝트를 실행하는 경우 기본 Django 페이지가 표시됩니다. 웹앱에는 일반적으로 보기가 다른 여러 페이지가 있습니다. 앱 URL 주소에 대한 고유 경로는 앱의 각 페이지를 식별합니다.

다음 단계에 따라 앱별 페이지 보기를 정의하고 Django 프로젝트에 앱을 추가합니다.

1. Visual Studio 프로젝트의 HelloDjangoApp 하위 폴더에서 views.py 파일의 내용을 다음 코드로 바꿉니다.

   from django.shortcuts import render
   from django.http import HttpResponse
   
   def index(request):
       return HttpResponse("Hello, Django!")
   

   이 코드는 필요한 렌더링 및 HTTP 정의를 가져오고 index보기를 정의합니다.

2. Visual Studio 프로젝트의 BasicProject 하위 폴더에서 다음 코드와 일치하도록 urls.py 파일을 수정합니다. 원하는 대로 현재 파일에 설명 주석을 유지할 수 있습니다.

   from django.urls import include, re_path
   import HelloDjangoApp.views
   
   # Django processes URL patterns in the order they appear in the array
   urlpatterns = [
       re_path(r'^$', HelloDjangoApp.views.index, name='index'),
       re_path(r'^home$', HelloDjangoApp.views.index, name='home')
   ]
   

각 URL 패턴은 Django가 특정 사이트 상대 URL(즉, URL 주소 https://www.___domain.com/뒤에 있는 경로 부분)을 라우팅하는 뷰를 설명합니다.

• 정규식 ^$ 시작하는 urlPatterns 정의의 첫 번째 항목은 /사이트 루트 페이지에 대한 라우팅입니다.
• 두 번째 항목인 ^home$애플리케이션 /home 페이지로 라우팅됩니다.

이 예제 코드의 정의는 동일한 보기에 여러 라우팅을 가질 수 있음을 보여 줍니다.

(r) 접두사를 사용하여 원시 경로 문자열 정의

Python에서 경로 문자열의 r 접두사는 "원시"를 의미합니다. 이 접두사는 Python에 경로 문자열 내의 문자를 이스케이프하지 않도록 지시합니다. 경로 문자열의 정규식은 많은 특수 문자를 사용합니다. 경로 문자열의 r 접두사는 \이스케이프 문자보다 읽기 쉽습니다.

경로에서 캐리트(^) 및 달러($) 문자 사용

URL 패턴을 정의하는 정규식에서 ^ 캐리트 기호는 "줄의 시작"을 의미하고 달러 기호 $ "줄 끝"을 의미합니다. 사이트 루트(앱 주소 https://www.___domain.com/뒤에 있는 부분)를 기준으로 URL에서 이러한 문자에 대한 몇 가지 용도가 있습니다.

• 정규식 ^$ 사실상 "공백"을 의미하며 앱의 사이트 루트에 대한 전체 URL 주소와 일치합니다. https://www.___domain.com/.
• 패턴 ^home$은 정확히 https://www.___domain.com/home/과 일치하며, 이는 /home가 따르는 사이트 경로입니다. (Django는 패턴 일치에서 후행/을 사용하지 않습니다.)
• ^home 경로 문자열과 같이 정규식에서 후행 달러 기호 $ 사용하지 않는 경우 URL 패턴 일치는 home, homework, homestead, home192837등과 같은 home 시작하는 URL을 적용됩니다.

다른 정규식을 실험하려면 pythex.orgregex101.com 같은 온라인 도구를 사용해 보세요.

Django 프로젝트에서 앱 실행

앱별 콘텐츠를 추가한 후 앱을 다시 실행하고 브라우저에서 경로 보기를 확인합니다.

1. 애플리케이션이 브라우저에서 열리면 브라우저에서 /(사이트 루트) 및 /home URL 경로 모두에 대한 페이지 보기를 확인합니다. 두 경로에 대해 애플리케이션은 브라우저에서 Hello, Django! 메시지를 표시합니다.

2. 완료되면 콘솔 창에서 Ctrl +C선택한 다음, 키를 선택하여 애플리케이션을 중지합니다. 디버그>디버깅 중지도 선택할 수 있습니다.

3. 애플리케이션에 대해 열려 있는 브라우저 창을 닫습니다.

소스 제어에 변경 내용 커밋

Django 앱 코드를 업데이트하고 업데이트를 테스트한 후 변경 내용을 검토하고 소스 제어에 커밋할 수 있습니다.

이 자습서 시리즈의 후속 절차는 이 섹션을 참조하여 소스 제어에 변경 내용을 커밋하는 단계를 참조할 수 있습니다.

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

views.py 파일의 index 함수는 Django 앱 페이지에 대한 일반 텍스트 HTTP 응답을 생성합니다. 대부분의 실제 웹 페이지는 라이브 데이터를 통합하는 풍부한 HTML 페이지로 응답합니다. 개발자가 함수를 사용하여 뷰를 정의하는 주된 이유는 동적으로 콘텐츠를 생성하기 위해서입니다.

HttpResponse 메서드에 대한 인수는 문자열일 뿐입니다. 동적 콘텐츠를 사용하여 문자열 내에서 HTML을 빌드할 수 있습니다. 태그를 데이터와 구분하는 것이 가장 좋으므로 태그를 템플릿에 배치하고 데이터를 코드에 유지하는 것이 좋습니다.

인라인 HTML을 사용하도록 보기 조정

일부 동적 콘텐츠가 있는 페이지에 인라인 HTML을 사용하도록 보기 처리를 변환합니다.

1. Visual Studio 프로젝트의 HelloDjangoApp 하위 폴더에서 views.py 파일을 엽니다.

2. index 함수를 다음 코드로 바꿉니다(기존 from 문 유지).

   from datetime import datetime
   
   def index(request):
      now = datetime.now()
   
      html_content = "<html><head><title>Hello, Django</title></head><body>"
      html_content += "<strong>Hello Django!</strong> on " + now.strftime("%A, %d %B, %Y at %X")
      html_content += "</body></html>"
   
      return HttpResponse(html_content)
   

   수정된 index 함수는 페이지를 새로 고칠 때마다 업데이트되는 동적 콘텐츠를 사용하여 HTML 응답을 생성합니다.

3. 변경 내용을 저장하고 앱을 다시 실행합니다. 이제 페이지에는 현재 날짜 및 시간과 함께 "Hello Django!" 메시지가 표시됩니다.

4. 페이지를 몇 번 새로 고쳐 날짜 및 시간이 업데이트되는지 확인합니다. 완료되면 앱을 중지합니다.

페이지 보기에 대한 HTML 템플릿 만들기

코드에서 HTML을 생성하는 것은 작은 페이지에 적합합니다. 그러나 페이지가 더 정교해짐에 따라 페이지의 정적 HTML 부분(CSS 및 JavaScript 파일에 대한 참조와 함께)을 "페이지 템플릿"으로 유지 관리해야 합니다. 그런 다음 동적 코드 생성 콘텐츠를 페이지 템플릿에 삽입할 수 있습니다. 이전 섹션에서는 now.strftime 호출의 날짜와 시간만 동적이므로 다른 모든 콘텐츠를 페이지 템플릿에 배치할 수 있습니다.

"Django 페이지 템플릿은 '변수'라고 불리는 여러 대체 토큰을 포함하는 HTML 블록입니다. 중괄호 {{와 }}이 변수를 나누며, 예를 들어 {{ content }}와 같은 변수가 있습니다." 그런 다음 Django의 템플릿 모듈은 변수를 코드에서 제공하는 동적 콘텐츠로 대체합니다.

HTML 템플릿을 사용하도록 페이지 렌더링 프로세스를 변환하려면 다음 단계를 수행합니다.

1. Visual Studio 프로젝트의 HelloDjangoApp 하위 폴더에서 settings.py 파일을 엽니다.

2. 앱 이름 HelloDjangoApp포함하도록 INSTALLED_APPS 정의에서 애플리케이션 참조를 업데이트합니다. 앱 이름을 목록의 첫 번째 항목으로 추가합니다.

   INSTALLED_APPS = [
       'HelloDjangoApp',
       # Existing entries in the list ...
   ]
   

   목록에 앱을 추가하면 Django 프로젝트에 앱이 포함된 HelloDjangoApp 폴더가 있음을 알 수 있습니다.

3. TEMPLATES 개체 구성 설정값을 APP_DIRS에 True로 설정합니다.

   'APP_DIRS': True,
   

   이 문은 Django가 설치된 애플리케이션에 대한 템플릿 폴더에서 템플릿을 찾도록 지시합니다. (이 문은 기본적으로 정의에 포함되어야 합니다.)

4. HelloDjangoApp 하위 폴더에서 템플릿/HelloDjangoApp/index.html 페이지 템플릿 파일을 엽니다.

5. 파일에 {{ content }}이라는 변수가 하나만 포함되어 있는지 확인하십시오.

   <html>
     <head>
       <title></title>
     </head>
   
     <body>
       {{ content }}
     </body>
   </html>
   

   {{ content }} 문은 코드에서 값을 제공하는 자리 표시자 또는 대체 토큰(템플릿 변수이라고도 함)입니다.

6. Visual Studio 프로젝트의 HelloDjangoApp 하위 폴더에서 views.py 파일을 엽니다.

7. index 함수를 django.shortcuts.render 도우미 함수를 사용하는 다음 코드로 바꿉니다(기존 from 문 유지).

   def index(request):
      now = datetime.now()
   
      return render(
         request,
         "HelloDjangoApp/index.html",  # Relative path from the 'templates' folder to the template file
         {
            'content': "<strong>Hello Django!</strong> on " + now.strftime("%A, %d %B, %Y at %X")
         }
      )
   

   render 도우미 함수는 페이지 템플릿을 사용하기 위한 간소화된 인터페이스를 제공합니다. 이 함수에는 다음과 같은 세 가지 인수가 있습니다.

   • 요청 객체입니다.
   • 앱의 템플릿 폴더 내의 템플릿 파일에 대한 상대 경로입니다. 템플릿 파일의 이름은 해당하는 경우 지원하는 보기의 이름이 지정됩니다.
   • 템플릿이 참조하는 변수 사전입니다. 템플릿의 변수가 {{ object.property }}참조할 수 있는 개체를 사전에 포함할 수 있습니다.

8. 프로젝트 변경 내용을 저장하고 앱을 다시 실행합니다.

   템플릿 엔진(Jinja)이 HTML 콘텐츠를 자동으로 이스케이프하므로 content 값 내의 인라인 HTML 구문(\<strong> ...)은 HTML로 렌더링되지 않습니다. 자동 이스케이프는 삽입 공격에 대한 실수로 인한 취약성을 방지합니다.

   개발자는 종종 한 페이지에서 입력을 수집하고 템플릿 자리 표시자를 사용하여 다른 페이지에서 값으로 사용합니다. 이스케이플 처리 기능은 HTML을 코드에서 제외하는 것이 가장 좋다는 것을 상기시켜줍니다.

   완료되면 앱을 중지합니다.

고유 자리 표시자 사용

HTML 태그 내의 각 데이터 조각에 대해 고유한 자리 표시자를 사용할 수 있습니다. 그런 다음 index 함수를 다시 조정하여 특정 자리 표시자 값을 제공합니다.

1. 템플릿/HelloDjangoApp/index.html 페이지 템플릿 파일의 내용을 다음 태그로 바꿉니다.

   <html>
     <head>
       <title>{{ title }}</title>
     </head>
     <body>
       <strong>{{ message }}</strong>{{ content }}
     </body>
   </html>
   

   이 HTML 태그는 페이지 제목을 추가하고 페이지 서식 파일의 모든 서식을 유지합니다.

2. HelloDjangoApp/views.py 파일에서 index 함수를 다음 코드로 바꿉다.

   def index(request):
       now = datetime.now()
   
       return render(
           request,
           "HelloDjangoApp/index.html",  # Relative path from the 'templates' folder to the template file
           # "index.html", # Use this code for VS 2017 15.7 and earlier
           {
               'title' : "Hello Django",
               'message' : "Hello Django!",
               'content' : " on " + now.strftime("%A, %d %B, %Y at %X")
           }
       )
   

   이 코드는 페이지 템플릿의 모든 변수에 대한 값을 제공합니다.

3. 변경 내용을 저장하고 앱을 다시 실행합니다. 이번에는 올바르게 렌더링된 출력이 표시됩니다.

   렌더링할 페이지 정보에 HTML 템플릿을 사용하는 실행 중인 애플리케이션을 보여 주는

4. 변경 내용을 소스 제어에 커밋하고 원격 리포지토리를 업데이트할 수 있습니다. 자세한 내용은 변경 내용을 소스 제어에 커밋하기를 참조하세요.

페이지 서식 파일 구분

템플릿은 일반적으로 별도의 HTML 파일에서 유지 관리되지만 인라인 템플릿을 사용할 수도 있습니다. 태그와 코드를 완전히 분리하려면 별도의 파일을 사용하는 것이 좋습니다.

템플릿에 .html 확장 사용

페이지 템플릿 파일의 .html 확장은 전적으로 선택 사항입니다. render_template 함수에 대한 첫 번째 인수에서 파일에 대한 정확한 상대 경로를 항상 식별할 수 있습니다. 그러나 Visual Studio(및 기타 편집기)는 일반적으로 .html 파일을 사용하여 코드 완성 및 구문 색 지정과 같은 기능을 제공하며 이는 페이지 템플릿이 HTML이 아니라는 사실보다 큽니다.

Django 프로젝트를 사용할 때 Visual Studio는 편집 중인 HTML 파일이 실제로 Django 템플릿인지 자동으로 검색하고 특정 자동 완성 기능을 제공합니다. Django 페이지 템플릿 주석({#)을 입력하기 시작하면 Visual Studio에서 닫는 #} 문자를 자동으로 제공합니다. 주석 선택 및 주석 제거 선택 명령(편집>고급 메뉴)에서도 HTML 주석 대신 템플릿 주석을 사용합니다.

문제 해결

앱을 실행할 때 앱의 템플릿 파일과 관련된 문제가 발생할 수 있습니다. 다음 사항을 검토하고 Django 프로젝트 구성이 올바른지 확인합니다.

템플릿을 찾을 수 없음

Django 또는 Visual Studio에서 템플릿을 찾을 수 없는 오류가 표시되면 앱이 INSTALLED_APPS 목록에 있는지 확인합니다. 이 목록은 Visual Studio 프로젝트의 앱 하위 폴더 아래의 settings.py 파일에 있습니다(예: HelloDjangoApp). 목록에 앱에 대한 항목이 없는 경우 Django는 앱의 템플릿 폴더를 찾을 수 없습니다.

중복 템플릿 구조

Django는 render 함수에서 참조되는 템플릿을 찾을 때 상대 경로와 일치하는 첫 번째 파일을 사용합니다. 템플릿에 대해 동일한 폴더 구조를 가진 동일한 프로젝트에 여러 Django 앱이 있는 경우 한 앱이 의도치 않게 다른 앱의 템플릿을 사용할 수 있습니다. 이러한 오류를 방지하려면 항상 중복을 방지하기 위해 앱의 이름과 일치하는 앱의 템플릿 폴더 아래에 하위 폴더를 만듭니다.

다음 단계