자습서: Visual Studio에서 전체 Django 웹 프로젝트 템플릿 사용

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

이 자습서 시리즈의 이전 단계에서는 두 애플리케이션에 대한 Visual Studio 솔루션 및 Django 프로젝트를 만듭니다. BasicProject 는 빈 Django 웹 프로젝트 템플릿을 기반으로 하는 최소 앱이며 HelloDjangoApp 은 Django 1.9 앱 템플릿을 사용하여 HTML 템플릿의 페이지 보기가 있는 정적 파일을 제공합니다.

4단계에서는 전체 Django 웹 프로젝트 템플릿을 기반으로 솔루션에 세 번째 Django 앱을 추가합니다. 이 템플릿을 사용하면 기본 페이지 템플릿에서 상속되는 3개의 페이지가 있는 풀러 Django 앱을 만들 수 있습니다. 앱은 jQuery 및 부트스트랩과 같은 정적 JavaScript 라이브러리를 사용합니다. 템플릿의 인증 기능은 자습서 시리즈의 마지막 단계에서 설명합니다.

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

Django 웹 프로젝트 템플릿을 사용하여 더 완전한 Django 웹 애플리케이션 만들기
템플릿에서 제공하는 Django 프로젝트 구조 검토
프로젝트 템플릿에서 만든 보기 및 페이지 템플릿 살펴보기
템플릿에서 제공하는 URL 라우팅 검사

필수 조건

1단계에서 만든 Visual Studio 솔루션: 빈 Django 웹 프로젝트 템플릿을 사용하는 Visual Studio 프로젝트 및 솔루션 만들기
Django 템플릿 버전, Visual Studio 프로젝트 및 Django 프로젝트 및 Mac의 Python 개발에 대한 자세한 내용은 이 자습서 시리즈의 1단계에서 필수 구성 요소 섹션을 검토하세요.
(선택 사항) Visual Studio에서 엔드 투 엔드 Django 워크플로에 대한 이전 단계의 지침을 검토합니다.
- 2단계: 보기 및 페이지 템플릿을 사용하여 앱 만들기
- 3단계: 정적 파일 제공 및 HTML 템플릿 사용

템플릿에서 프로젝트 만들기

다음 단계에 따라 전체 Django 웹 프로젝트 템플릿에서 Django 웹 앱을 만듭니다.

Visual Studio에서 솔루션 탐색기로 이동하여 LearningDjango 솔루션을 마우스 오른쪽 단추로 클릭하고새 프로젝트추가>를 선택합니다.

비고

자습서 시리즈의 1단계는 이 시리즈에 설명된 모든 Django 프로젝트를 포함하도록 LearningDjango Visual Studio 솔루션을 만듭니다. 모든 Django 프로젝트를 동일한 솔루션에 유지하면 비교를 위해 서로 다른 파일 간에 쉽게 전환할 수 있습니다.

이 자습서 단계에서 Django 프로젝트에 대해 별도의 Visual Studio 솔루션을 사용하려면 대신새>프로젝트파일을> 선택합니다.
새 프로젝트 추가 대화 상자에서 "Django"를 검색하고, Django 웹 프로젝트 템플릿을 선택하고, 다음을 선택합니다.
새 프로젝트를 구성합니다.
1. 프로젝트 이름을DjangoWeb으로 설정합니다.
2. 프로젝트를 저장할 Visual Studio의 위치를 지정합니다. (기본값은 솔루션 및 기존 Django 프로젝트의 현재 위치입니다.)
선택하고생성합니다.

가상 환경 만들기

Visual Studio에서 프로젝트 생성을 시작하면, "DjangoWeb" 프로젝트에서 Python 패키지 사양 파일 "requirements.txt"이 검색되었다는 메시지를 볼 수 있습니다.

이 메시지는 선택한 템플릿에 프로젝트에 대한 가상 환경을 만드는 데 사용할 수 있는 requirements.txt 파일이 포함되어 있음을 나타냅니다.

중요합니다

메시지 프롬프트가 표시되지 않으면 다음 섹션에서 Django 슈퍼 사용자를 만들려고 할 때 오류가 발생할 수 있습니다.

Visual Studio가 프로젝트의 requirements.txt 파일을 인식하는지 확인합니다. 솔루션 탐색기에서 DjangoWeb 프로젝트 폴더를 확장하고 requirements.txt 파일을 엽니다. Visual Studio는 메시지 프롬프트를 예상대로 표시해야 합니다.

가상 환경을 설정하려면 다음 단계를 수행합니다.

메시지 프롬프트에서 설치할 링크를 선택하거나 가상 환경을 만듭니다.
가상 환경 추가 대화 상자에서 만들기를 선택하여 기본값을 적용합니다.

Django 슈퍼 사용자 만들기

Visual Studio에서 DjangoWeb 프로젝트를 만든 후 프로젝트 readme.html 파일이 열립니다. 이 파일에는 프로젝트에 대한 Django 슈퍼 사용자 (즉, 관리자)를 만드는 지침이 포함되어 있습니다.

Django 슈퍼 사용자를 만들려면 다음 단계를 수행합니다.

솔루션 탐색기에서 DjangoWeb 프로젝트를 마우스 오른쪽 단추로 클릭하고 Python을 선택한 다음, Django Superuser 만들기를 선택합니다.
프롬프트에서 사용자 이름, 암호 및 전자 메일 주소를 포함하여 프로젝트에 대한 계정 세부 정보를 입력합니다.

기존 계정에 보안 자격 증명을 사용할 필요가 없습니다. Django 웹앱에서 특별히 사용할 새 사용자 이름 및 암호를 만들 수 있습니다.
나중에 사용할 수 있는 자격 증명을 기록합니다. 웹앱의 인증 기능을 실행하려면 자격 증명이 필요합니다.

Django 웹 프로젝트 실행

이제 Django 웹 애플리케이션을 실행하고 템플릿에서 제공하는 기능을 확인할 준비가 되었습니다.

솔루션 탐색기에서 DjangoWeb 프로젝트를 마우스 오른쪽 단추로 클릭하고 시작 프로젝트로 설정을 선택합니다.

이 명령은 선택한 프로젝트를 Visual Studio 솔루션의 기본 시작 프로젝트 로 설정합니다. 디버거를 시작하면 Visual Studio에서 시작 프로젝트에 대한 코드를 실행합니다. 솔루션 탐색기에서 솔루션의 시작 프로젝트 이름은 굵게 표시됩니다.
디버그>시작 디버깅(F5)을 선택하거나 도구 모음의 웹 서버 단추를 사용하여 서버를 실행합니다.

visual Studio의 주 도구 모음에 있는 웹 서버 명령을 보여 주는

웹앱 페이지 탐색

템플릿에서 만든 앱에는 "홈", "정보" 및 "연락처"의 세 페이지가 있습니다. 탐색 모음의 각 페이지에 대한 링크가 있습니다.

탐색 모음의 옵션을 사용하여 페이지 간을 전환해 봅니다.
페이지 콘텐츠를 포함하여 실행 중인 앱의 여러 부분을 검사합니다. 현재 페이지에 따라 URL 주소 경로가 어떻게 변경되는지 확인합니다.
탐색 모음에서 로그인 옵션을 선택하여 앱에서 인증합니다. 이전 섹션에서 제공한 슈퍼 사용자 자격 증명을 입력합니다.
Django 웹 프로젝트 템플릿에서 만든 앱은 모바일 폼 팩터를 수용하는 반응형 레이아웃에 부트스트랩을 사용합니다. 이 응답성을 보려면 브라우저의 크기를 좁은 보기로 조정하여 콘텐츠가 세로로 렌더링되고 탐색 모음이 메뉴 아이콘으로 바뀝니다.

다음 섹션에서 연습을 위해 앱을 실행 상태로 둘 수 있습니다.

작업을 저장하려면 앱을 중지하고 이 자습서 시리즈의 이전 단계의 지침을 따릅니다.

웹앱 프로젝트 구조 검사

Django 웹 프로젝트 템플릿은 다음과 같은 구조로 Visual Studio에서 웹앱 프로젝트를 만듭니다.

DjangoWeb Visual Studio 프로젝트 루트의 파일:
- manage.py: Django 관리 유틸리티입니다.
- db.sqlite3: 기본 SQLite 데이터베이스입니다.
- requirements.txt: Django 1.x에 대한 종속성이 있는 프로젝트의 패키지를 식별합니다.
- readme.html: 요구 사항 및 중요한 사용 절차를 포함하여 웹앱에 대한 정보를 포함합니다. Visual Studio는 프로젝트를 만든 후 이 파일을 표시합니다. 앞에서 설명한 대로 이 파일에는 앱에 대한 슈퍼 사용자(관리자) 계정을 만드는 지침이 있습니다.
DjangoWeb/app 폴더:

이 폴더에는 보기, 모델, 테스트, 양식을 포함한 모든 앱 파일이 포함됩니다. 이 폴더에는 템플릿, 마이그레이션 및 정적을 비롯한 파일이 있는 하위 폴더도 있습니다. 일반적으로 앱 이름 자체와 같은 보다 고유한 이름을 사용하도록 앱 폴더의 이름을 바꿉니다.
DjangoWeb/DjangoWeb 폴더:

이 폴더는 Django 프로젝트 폴더입니다. 여기에는 __init__.py, settings.py, urls.py및wsgi.py 일반적인 Django 프로젝트 파일이 포함되어 있습니다. settings.py 파일은 프로젝트 템플릿을 사용하여 앱 및 데이터베이스 파일에 대해 이미 구성되어 있습니다. 또한 urls.py 파일은 로그 형식을 포함하여 모든 앱 페이지에 대한 경로로 이미 설정되어 있습니다.

Visual Studio 프로젝트 간에 가상 환경을 공유할 수 있습니다. 그러나 다른 프로젝트는 시간이 지남에 따라 서로 다른 패키지를 사용할 수 있습니다. 공유 가상 환경에는 해당 가상 환경을 사용하는 모든 프로젝트에 대한 모든 패키지가 포함되어야 합니다.

기존 가상 환경을 사용하려면 다음 단계를 수행합니다.

Visual Studio에서 종속성을 설치하라는 메시지가 표시 되면 직접 설치 옵션을 선택합니다.
솔루션 탐색기에서 Python 환경 노드를 마우스 오른쪽 단추로 클릭하고 기존 가상 환경 추가를 선택합니다.
가상 환경이 포함된 폴더로 이동하여 선택한 다음 확인을 선택합니다.

보기 및 페이지 템플릿 검사

Django 웹 프로젝트에서 만든 페이지 보기에 대한 코드는 프로젝트의 앱/views.py 파일에 있습니다. 각 뷰 함수는 django.shortcuts.render 템플릿 경로와 단순 사전 개체를 사용하여 도우미 함수를 호출합니다. 함수는 about 웹앱에서 "정보" 페이지에 대한 보기를 만듭니다.

def about(request):
   """Renders the about page."""
   assert isinstance(request, HttpRequest)
   return render(
      request,
      'app/about.html',
      {
         'title':'About',
         'message':'Your application description page.',
         'year':datetime.now().year,
      }
   )

보기에 대한 HTML 페이지 템플릿은 프로젝트의 앱/템플릿/앱 폴더(일반적으로 이름 바꾸기)에 있습니다. layout.html기본 템플릿이 가장 광범위합니다. 이 파일은 앱 보기에 필요한 모든 정적 파일(JavaScript 및 CSS)을 참조합니다.

또한 이 템플릿은 두 block 개의 섹션 contentscripts을 정의합니다. 다른 웹앱 페이지는 layout.html 파일의 {% block content %} 섹션을 재정의합니다. 주석이 추가된 이 layout.html 파일 버전에서 요소 내 <body> 의 두 block 섹션을 볼 수 있습니다.

<!DOCTYPE html>
<html>

<head>
   <meta charset="utf-8" />

   <!-- Define viewport for Bootstrap's responsive rendering -->
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{{ title }} - My Django Application</title>

   {% load staticfiles %}
   <link rel="stylesheet" type="text/css" href="{% static 'app/content/bootstrap.min.css' %}" />
   <link rel="stylesheet" type="text/css" href="{% static 'app/content/site.css' %}" />
   <script src="{% static 'app/scripts/modernizr-2.6.2.js' %}"></script>
</head>

<body>
   <!-- Navigation bar section omitted in this excerpt -->

   <div class="container body-content">

<!-- Content block - App pages override this block -->
{% block content %}
{% endblock %}

      <!-- App header and footer content -->
      <hr/>
      <footer>
         <p>&copy; {{ year }} - My Django Application</p>
      </footer>

   </div>

   <script src="{% static 'app/scripts/jquery-1.10.2.js' %}"></script>
   <script src="{% static 'app/scripts/bootstrap.js' %}"></script>
   <script src="{% static 'app/scripts/respond.js' %}"></script>

<!-- Scripts block - List page-specific scripts in this block -->
{% block scripts %}
{% endblock %}

</body>

</html>

개별 HTML 페이지 템플릿, about.html, contact.html및 index.html각각 기본 템플릿 layout.html확장합니다. about.html 템플릿 파일은 가장 간단하며 {% extends %} 태그와 {% block content %} 섹션을 보여줍니다.

{% extends "app/layout.html" %}

<!-- Content block overrides "content" block in layout template -->
{% block content %}

<h2>{{ title }}.</h2>
<h3>{{ message }}</h3>

<p>Use this area to provide additional information.</p>

{% endblock %}

index.html 및 contact.html 템플릿 파일은 동일한 구조를 사용하고 블록에 content 더 많은 지침을 제공합니다.

앱/템플릿/앱 폴더에는 두 개의 HTML 페이지 템플릿이 추가로 포함되어 있습니다. login.html 파일은 로그인 앱 페이지의 페이지 콘텐츠를 정의합니다. loginpartial.html 파일은 {% include %} 문을 사용하여 layout.html 파일로 가져왔습니다. 이 자습서 시리즈의 마지막 단계(사용자 인증) 에서는 이러한 두 템플릿 파일에 대해 자세히 설명합니다.

템플릿에서 {% 블록 %} 및 {% 엔드블록 %} 태그 들여쓰기

HTML 샘플은 Visual Studio의 페이지 템플릿에 제공된 태그를 보여 줍니다. 태그는 block 태그에 들여쓰기되지 않습니다. 태그의 block 위치를 명확하게 표시하기 위해 Visual Studio 페이지 템플릿은 이러한 태그를 들여쓰지 않습니다.

그러나 block 태그를 들여쓰기 하면 Django 페이지 템플릿이 제대로 작동합니다. 일부 개발자는 적절한 부모 HTML 요소 내에서 태그를 맞추는 것을 선호합니다.

URL 경로 패턴 검사

Django 웹 프로젝트 템플릿에서 만든 Django 프로젝트의 URL 파일(DjangoWeb/DjangoWeb/urls.py)에는 다음 코드가 포함되어 있습니다.

"""
Definition of urls for DjangoWeb
"""

from datetime import datetime
from django.urls import path
from django.contrib import admin
from django.contrib.auth.views import LoginView, LogoutView
from app import forms, views

urlpatterns = [
    path('', views.home, name='home'),
    path('contact/', views.contact, name='contact'),
    path('about/', views.about, name='about'),
    path('login/',
         LoginView.as_view
         (
             template_name='app/login.html',
             authentication_form=forms.BootstrapAuthenticationForm,
             extra_context=
             {
                 'title': 'Log in',
                 'year' : datetime.now().year,
             }
         ),
         name='login'),
    path('logout/', LogoutView.as_view(next_page='/'), name='logout'),
    path('admin/', admin.site.urls),
]

처음 세 개의 URL 패턴은 프로젝트의 app/views.py 파일에 정의된 home, contact, about 뷰 함수에 직접 매핑됩니다. login/와 logout/ 패턴은 앱의 인증 기능에 해당합니다.

특수 URL 경로 패턴인 ^login/$ 및 ^logout$은 앱에서 정의된 보기 대신 기본 제공 Django 보기를 엑세스합니다. 메서드에 대한 url 호출에는 보기를 사용자 지정하기 위한 추가 데이터도 포함됩니다. 이 자습서 시리즈의 마지막 단계(사용자 인증) 에서는 URL 호출을 사용하는 방법을 설명합니다.

URL 패턴의 차이점 살펴보기

이 자습서 시리즈의 3단계(HTML 템플릿 상속) 에서 "정보" 페이지의 경로는 '^about$' 패턴을 사용합니다. 이 패턴은 이 자습서 단계에서 제공하는 URL 경로와 다릅니다. 템플릿 버전에 따라 샘플 코드가 ^about$ 대신 about/ 또는 ^about으로 "정보" 페이지 URL 패턴을 표시할 수 있습니다.

프로젝트 템플릿의 많은 버전에서는 정규식에서 후행 달러 기호 $의 누락이 실수로 나타납니다. URL 패턴은 "about" 또는 "About"이라는 페이지에 완벽하게 적합합니다. 그러나 후행 $ 문자가 없으면 URL 패턴은 "about=django", "about09876", "about-face" 등의 URL과도 일치합니다. 후행 $ 문자는 "about"이라는 용어에 대해서만 일치하도록 하는 URL 패턴을 만듭니다.

다음 단계

5단계: Django에서 사용자 인증

피드백

이 페이지가 도움이 되었나요?

Last updated on 2025-08-08