[Python] django (2/3) template 맛보기

Python

[Python] django (2/3) template 맛보기

달나라외계인 2024. 5. 25. 12:04

순서

1. django module 맛보기

2. django template 맛보기

3. django model & ORM

이전글: 2024.04.13 - [Python] - [Python] django (1/3) module 맛보기

앞에서 django 직접 html 코드를 출력하여 웹페이지를 구성해 보았었습니다. 이런식으로도 얼마든지 웹페이지를 작성할 수 있겠지만 이렇게 한다면 개발이 너무 번거로울 겁니다. 이에 django에서는 template라는 기능을 제공합니다.

template을 사용하면 html 문서를 작성하되, html 문서에서 상황에 따라 임의로 변경해야 할 부분이 있다면 그부분을 별도로 문서내에 정해진 문법으로 표기하여 작성하는 형태로 진행하게 됩니다. 그리고 랜더과정을 통해 임의로 변경해야 할 부분을 html에 적용 후 해당 문서를 응답으로 요청한 사용자에게 전송하게 됩니다.

기본적으로 app에 templates라는 폴더를 만들면 그곳에 있는 template 파일 사용할 수 있습니다. 이것을 위해서는 우선 app을 config/settings.py에 등록하는 과정이 필요합니다. 아마 이전 글을 보셨다면 이과정은 생략되었을 것입니다. 코드는 이전글에서 만든 샘플 코드에서 이어서 진행하도록 하겠습니다. 우선 다음과 같이 INSTALLED_APPS 배열밑에 testapp을 먼저 추가해 줍니다.

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',s
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    "testapp", # 추가됨
]

일단 앞서서 만든 testapp에 다음과 같이 templates 라는 폴더를 만들고 이곳에 app의 이름의 폴더를 만듭니다. 그리고 그안에 index.html 파일을 생성해 보겠습니다.

index.html과 view.py는 다음과 같이 수정하면 기존 샘플코드와 동일하게 동작시킬 수 있을 겁니다.

<view.py>

from django.shortcuts import render

# Create your views here.
def index(request):
  return render(request, 'testapp/index.html')

<index.html>

{% load static %}
<head>
</head>
<body>
  <img src="{% static 'sample.png' %}">
</body>

index.html 에서 보면 {% ~~~~ %} 로 끝나는 문법이 보입니다. 이곳에 template에서 코드에 따라 적용될 부분입니다.

{% load static %}은 template 내에서 static 모듈을 사용하겠다고 지정하는 것입니다. 그 이후 {% static 'sample.png' %}를 통해 static 이미지를 불러올 수 있습니다.

template에서는 여기서는 설명하지 않겠지만 for, if 등도 사용이 가능하기 때문에 간단한 제어도 가능합니다. 하지만 중요한 부분은 python에서 코딩을 통해 얻어내는 것이 편할 것입니다. 이번에는 코딩을 통해 이미지 경로를 만들어내고 이것을 template에 전송하여 template에서 해당내용을 뿌려보겠습니다. 기존것과 비교하기 위해 index2라고 따로 함수를 만들었습니다. 이에 대한 예제를 보여 드립니다.

<view.py> 하단에 추가

from django.templatetags.static import static

def index2(request):
  imageLink:str = static('sample.png')

  context = {
    'image': imageLink,
  }

  return render(request, 'testapp/index2.html', context)

<index2.html> 새로 생성

<head>
</head>
<body>
  <img src="{{image}}">
</body>

<config/urls.py> urlpatterns에 test2 추가

urlpatterns = [
    path('admin/', admin.site.urls),
    path('test/', test_views.index),
    path('test2/', test_views.index2),
]

view.py를 보면 이전글에서처럼 static 모듈을 이용하여 static image의 경로를 얻어온 후 context라는 dictionary를 만들고 image라는 이름으로 해당경로를 넘기는 것을 볼 수 있습니다. 이렇게 한 후에는 위에서 보는 것처럼 index.html 에서 {{변수명}}을 통해 해당 context에서 변수를 끄집어내어 사용하실 수 있습니다.

http://localhost:8000/test/

http://localhost:8000/test2/

둘의 결과가 같음을 보실 수 있습니다.

* 앞선 예제들의 결과는 모두 예전과 같기 때문에 보이는 것은 생략하였습니다. *

샘플코드 : Link

다음글: 2024.06.07 - [분류 전체보기] - [Python] django (3/3) model & ORM