[Django] Template

송수빈·2026년 5월 2일
djangotemplate

SSAFY

목록 보기
5/15

Template System

Django Template system

  • 파이썬 데이터(context)를 HTML 문서(Template)과 결합하여, 로직과 표현을 분리한 채 동적인 웹페이지를 생성하는 도구
  • HTML의 콘텐츠를 변수 값에 따라 변경하기
    • views.py
      def index(request):
		context = {
				'name': 'Jane',
		}
		return render(request, 'articles/index.html', context)
    • articles/index.html
      <body>
	<h1>Hello, {{ name }}!</h1>
</body>
  • Django Template system의 목적
    • ‘페이지 틀’에 ‘데이터’를 동적으로 결합하여 수많은 페이지를 효율적으로 만들어 내기 위함

Django Template Language (DTL)

  • Template에서 조건, 반복, 변수 등의 프로그래밍적 기능을 제공하는 시스템
    • DTL Syntax: Variable, Filters, Tags, Comments
  • Variable
    • Django Template에서의 변수
    • render 함수의 세 번째 인자로 딕셔너리 타입으로 전달됨
    • 해당 딕셔너리 key에 해당하는 문자열이 template에서 사용 가능한 변수명이 됨
    • dot(.)을 사용하여 변수 속성에 접근할 수 있음
      context = {
		'variable1': 'value1',      # {{ variable1 }}
		'variable2': {
				'attribute': 'value2',  # {{ variable2.attribute }}
		},
}
  • Filters
    • 표시할 변수를 수정할 때 사용 (변수 + | + 필터)
    • chained(연결)이 가능하며 일부 필터는 인자를 받기도 함
    • 약 60개의 built-in template filters를 제공
  • Tags
    • 반복 또는 논리를 수행하여 제어 흐름을 만듦
    • 일부 태그는 시작과 종료 태그가 필요
    • 약 24개의 built-in template tags를 제공
      • if, else, endif 태그
        {% if login %}
	‹h1>Hello, User!!!</h1>
{% else %}
	<h1>Please, login.‹/h1>
{% endif %}
      • for 태그
        <ul>
	{% for num in nums %}
		<li>{{ num }}</li>
	{% endfor %}
</ul>
  • Comments
    • 주석
      • inline: {# name #}
      • multiline: {% comment %} {% endcomment %}

템플릿 상속 (Template Inheritance)

  1. 페이지의 공통요소를 포함
  2. 하위 템플릿이 재정의할 수 있는 공간을 정의

⇒ 여러 템플릿이 공통요소를 공유할 수 있게 해주는 기능

상속 구조 만들기

  • skeleton 코드 역할을 하게 되는 상위 템플릿(base.html) 작성
    <!-- articles/base.html -->

<!DOCTYPE html>
<html lang="en">
<head>
	...
</head>
<body>
	{% block content %}
	{% endblock content %}
</body>
</html>
    • 모든 템플릿이 공유했으면 좋겠는 공통요소를 작성
    • 템플릿 별로 재정의할 부분은 block 태그를 활용
  • 기존 하위 템플릿들이 상위 템플릿을 상속받도록 변경
    <!-- articles/index.html -->

{% extends 'articles/base.html' %}

{% block content %}
	<h1>Hello, {{ name }}</h1>
{% endblock content %}
    • extends 태그로 상속받을 템플릿 결정
    • block 태그를 활용해 base.html의 같은 이름으로 작성된 block 태그의 내용을 대체

상속 관련 DTL 태그

  • extends tag
    {% extends 'articles/base.html' %}
    • 자식(하위) 템플릿이 부모 템플릿을 확장한다는 것을 알림
    • 반드시 자식 템플릿 최상단에 작성되어야 함
  • block tag
    {% block content %} {% endblock content %}
    • 하위 템플릿에서 재정의할 수 있는 블록을 정의
    • 상위 템플릿에서 작성하며 하위 템플릿이 작성할 수 있는 공간을 지정하는 것

요청과 응답

HTML form

  • 데이터를 보내고 가져오기
    • HTML form element를 통해 사용자와 애플리케이션 간의 상호작용 이해하기
  • HTML form
    • HTTP 요청을 서버에 보내는 가장 편리한 방법
      <form action="#" method="GET">
	<div>
		<label for="name">아이디 : </label>
		<input type="text" name="name" id="name">
	</div>
	<div>
		<label for="password">패스워드 : </label>
		<input type="password" name="password" id="password">
	</div>
	<input type="submit" value="로그인">
</form>
      • action: 목적지 서버 주소
      • method: GET / POST
    • form element
      • 사용자로부터 할당된 데이터를 서버로 전송하는 HTML 요소
      • 웹에서 사용자 정보를 입력하는 여러 방식(text, password, checkbox 등)을 제공
  • fake Naver 실습
    • form을 이용해 Naver에 요청을 보내 보자.
      <!-- articles/search.html -->

{% extends 'articles/base.html' %}

{% block content %}
	<form action="https://search.naver.com/search.naver" method="GET">
		<label for="message">검색어</label>
		<input type="text" name="query" id="message">
		<input type="submit" value="submit">
	</form>
{% endblock content %}

HTML form 핵심 속성

  • form의 핵심 속성 2가지: action & method
    • 데이터를 어디(action)로 어떤 방식(method)으로 요청할지
    • action: 입력 데이터가 전송될 URL을 지정
      • action을 지정하지 않으면 데이터는 현재 페이지의 URL로 설정됨
    • method: 데이터를 어떤 방식으로 보낼 것인지 정의
      • 데이터의 HTTP request method(GET, POST)를 지정
  • input element
    • 사용자의 데이터를 입력받을 수 있는 HTML 요소
    • type 속성 값에 따라 다양한 유형의 입력 데이터를 받음
    • 핵심 속성: name
  • name attribute
    <input type="text" name="query" id="message">
    • input 요소의 핵심 속성
    • 사용자가 입력한 데이터에 붙이는 이름(key)
    • 데이터를 제출했을 때 서버는 name 속성에 설정된 값을 통해서만 사용자가 입력한 데이터에 접근할 수 있음
  • Query String Parameters
    • 사용자의 입력 데이터를 URL 주소에 파라미터를 통해 서버로 보내는 방법
    • 문자열은 앰퍼샌드(&)로 연결된 key=value 쌍으로 구성되며, 기본 URL과는 물음표(?)로 구분됨
    • 예시
      http://host:port/path?key=value&key=value
  • 데이터가 서버로 가능 방식
    • 예를 들어 이런 form이 있다고 해보자
      <form action="/search" method="get">
	<input type="text" name="query">
	<input type="text" name="page">
	<button type="submit">검색</button>
</form>
    • 사용자가 이렇게 입력했다고 해보자
      • query: "chatgpt"
      • page: "2"
    • 그러면 브라우저가 자동으로 이렇게 만듦
      /search?query=chatgpt&page=2

HTML form 활용

image.png

  • 사용자 입력 데이터를 받아 그대로 출력하는 서버 만들기
    • throw 로직 작성
      • urls.py
        app_name = 'articles'
urlpatterns = [
    path('throw/', views.throw, name='throw'),
      • views.py
        def throw(request):
    return render(request, 'articles/throw.html')
      • articles/throw.html
        {% extends "articles/base.html" %}
{% block content %}
  <h1>Throw</h1>
  <form action="{% url "articles:catch" %}" method="GET">
    <input type="text" id="message" name="message">
    <input type="submit">
  </form>
{% endblock content %}
    • catch 로직 작성
      • urls.py
        app_name = 'articles'
urlpatterns = [
    path('catch/', views.catch, name='catch'),
      • views.py
        def catch(request):
    message = request.GET.get('message')
    
    context = {
        'message': message,
    }
    return render(request, 'articles/catch.html', context)
      • articles/catch.html
        {% extends "articles/base.html" %}
{% block content %}
  <h1>Catch</h1>
  <h2>{{ message }}를 잘 받았습니다.</h2>
{% endblock content %}
  • HTTP request 객체
    • form으로 전송한 데이터 뿐만 아니라 Django로 들어오는 모든 요청 관련 데이터가 담겨 있음
    • view 함수가 호출될 때 첫번째 인자로 전달됨
  • throw-catch 간 요청과 응답 정리
    • 브라우저에 http://127.0.0.1:8000/throw/를 입력하면 발생하는 일
    • throw 페이지에서 일어나는 일
profile
송수빈
🌱 🐜
이전 포스트

[Django] Django project

다음 포스트

[Django] URLs

0개의 댓글