[Django-python]장고 웹 프레임워크 시작하기 - (3)템플릿(Templates) 랜더링(Rendering) 과 간단한 동적 웹 앱 구현

KimJiHong·2023년 9월 14일

django python

Django Basics

목록 보기

3/7

지난 게시글에서 App 을 생성하고, URL 매핑을 진행해 간단한 HTML 소스를 띄워보았다.

이번 게시글에서 App 들의 템플릿을 사용해 HTML을 렌더링해보자!

현재 장고 Tree

#tip 아닌 tip.. : 'tree /F' 를 사용하면 tree 구조가 자세히 나옵니당

> tree

.
├─myapp
│  ├─migrations
│  │  └─__pycache__
│  └─__pycache__
└─testsite
    └─__pycache__

Templates 디렉토리 생성과 설정

들어가기에 앞서.. 항상.. 경로!! 에 주의하십쇼!
~~PATH PATH PATH PATH PATH~~

먼저, App 디렉토리에 templates 디렉토리를 생성해보자.

> cd myapp
# myapp 디렉토리로 이동!

> mkdir {templates_name}
# 왠만하면 templates 이라는 디렉토리로 생성합시다! 밑에쪽에 참고 설명이 있습니다!
# 저는 여러가지 방법 설명을 위해서 'myapp_templates' 으로 사용하겠습니다.

> tree

.
├─myapp
│  ├─migrations
│  │  └─__pycache__
│  ├─myapp_templates # tree에 추가된 디렉토리
│  └─__pycache__
└─testsite
    └─__pycache__

이제 템플릿 디렉토리 myapp_templates를 생성했으니, setting.py에서 path 를 지정해주자!

# /testsite/setting.py

from pathlib import Path
import os # path 를 지정해주기 위해 os 라이브러리를 추가하자!

BASE_DIR = Path(__file__).resolve().parent.parent

# 템플릿 경로 지정
DIR_MyAppTemplates = os.path.join(BASE_DIR, 'myapp/myapp_templates')

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # DIRS 에 템플릿 경로 추가
        'DIRS': [DIR_MyAppTemplates,],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

TEMPLATES의 디렉토리 경로를 지정해주는 DIRS 에 템플릿 경로 DIR_MyAppTemplates 를 추가해준다.

다음으로, 템플릿 디렉토리 안에 .html 소스를 작성해서 넣어주자!
저는 myapp_index.html 로 저장했습니다.

<!-- myapp_index.html -->

<!DOCTYPE html>
<html>
  <head>
    
    <title>path path path path!!!!!</title>
    
  </head>
  <body>
    
    <h1>Hellow, my name is KimJiHong!</h1>
    
    <li>Highlight the path</li>
    
  </body>
</html>

이제 클라이언트의 request에 응답해서 소스를 보여주기 위해
지난 게시글에서의 간단한 HTML 소스를 보여주기 위해 했던 방식과 비슷하다!

해당 App 의 디렉토리로 이동해서 views.py를 다음과 같이 수정해준다!

# myapp/views.py

from django.shortcuts import HttpResponse
from django.template.loader import get_template # 템플릿 디렉토리 내용을 읽어오는 라이브러리

def index(request):
    template = get_template('myapp_index.html')

    context = {} # 템플릿에 전달할 "데이터"를 담는 딕셔너리

	# 데이터를 템플릿에 랜더링 하기
    # 밑에서 더 자세히 다루겠다.
    html = template.render(context)

    return HttpResponse(html)

템플릿에 대한 설정은 마쳤다.
이제 서버를 실행해보자!

템플릿 설정 완료 테스트

정상적으로 path를 강조! 하는 .html 소스가 나오는 것을 확인 할 수 있다!!

※참고※

장고에서는 templates 라는 이름의 디렉토리 안에 위치한 템플릿들을 자동으로 인식하고, 웹 페이지를 구성할 때 필요한 HTML 구조와 데이터들을 자동으로 바인딩 처리해줍니다.
따라서, 유지보수과 가독성 면을 위해서, 저처럼 별도의 이름을 사용하지 않고 templates 라는 디렉토리명을 사용하는 것을 권장합니다!
또한, templates 라는 디렉토리 명을 사용시 TEMPLATES의 옵션 인 DIRS 에 별도로 템플릿 경로를 추가할 필요는 없습니다!

장고의 장점이 빠른 작업속도인데, 굳이 다른 디렉토리 명을 사용해서 번거롭게 추가해야할 이유는 없겠죠??

rander 를 이용한 동적 웹 앱

위에서 HttpResponse 라이브러리를 통해 구현된 웹 앱은 정적으로 구현된 웹 이다.

이제, rander 라이브러리를 이용하여, 클라이언트로 부터 2개의 URL 데이터를 받는 동적 웹 앱으로 구현해보자!

먼저, HTML 소스 myapp_index.html을 다음과 같이 수정해주자!

<!-- myapp_index.html -->

<!DOCTYPE html>
<html>
  <head>
    
    <title>path path path path!!!!!</title>
    
  </head>
  <body>
    <!-- {{name}} : 이름에 대한 변수 -->
    <h1>Hellow, my name is {{name}}!</h1>
    
    <!-- {{li_text}} list 안에 들어갈 내용의 변수-->
    <li>{{li_text}}</li>
    
  </body>
</html>

{{vars_name}} 구문을 사용해, django 템플릿 언어에서 변수를 출력할 수 있다.

이제 URL 매핑을 다시 해보자!

# myapp/urls.py

urlpatterns = [
	# http://localhost:8000/myapp/name/li_text
    # name은 url의 별칭으로 다음에 자세히 알아보도록 하겠다.
    path('<str:name>/<str:li_text>', views.index, name='index'),
]

마지막으로, views.py를 다음과 같이 수정하면 끝이다!

# myapp/views.py

# render 라이브러리를 통해 URL에서 데이터(context) 를 전달받고
# HTML과 결합할 수 있게되었다!
from django.shortcuts import render

def index(request, name, li_text):
    context = {
        'name' : name,
        'li_text' : li_text
    }
    return render(request, 'myapp_index.html', context)