Django - TemplateSyntaxError(해결, html태그의 짝이 맞아야한다.)

#1 개요

 

TemplateSyntaxError at /instagram/new/
Invalid block tag on line 34: 'endblock', expected 'elif', 'else' or 'endif'. 
Did you forget to register or load this tag?

이런 에러가 뜨는 것이다.

간단하게는

"유효하지 않은 태그가 34번에 있다"

심플하게 태그는 잘썼냐?

를 묻는 에러 같았다.

{% extends 'gram/layout.html' %}
{% load bootstrap5 %}

{% block content %}
    <!-- 파일도 전송할 경우에는 반드시 enctype="multipart/form-data"를 해줘야 한다. -->
    <form action="" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        {% bootstrap_form form %}%
        <!-- form을 써줄때는 반드시 table로 감싸줘야 생김새가 깨져보이지 않고 정돈되어 나온다. -->
        <!-- 두번째 방법으로는 form.as_table을 해주면 된다. -->
        {% comment %} <table>
            {{ form }}
        </table> {% endcomment %}
        {% buttons %}
            {% comment %} <input type="submit" value="저장"> {% endcomment %}
            <button class="btn btn-success">
                저장
            </button>
        {% endbuttons %}

        <!-- 여기를 통해서 전달받게 되는 데이터는 request.POST의 형식으로 전달이 된다. 따라서 이것과 관련된
        로직을 구현해야하며, 추가로 파일저장이 있을 경우에는 request.FILES도 추가적으로 정의해주어야 한다. -->
        
    </form>
    <hr>
    <!-- NoReverseMatch에러의 요소였어서, 각 인자에 post를 추가해 주었고 이건 주석처리 해준다. -->
    <!--  {% if form.instance %} -->
    {% if post %}
        <a href="{{ post.get_absolute_url }}" class="btn btn-success">
            내용으로
        </a>
    {% endif %}
    <a href="{% url 'gram:post_list' %}" class="btn btn-success">목록</a>
{% endblock content %}

이게 나의 에러였는데

에러가 발생한 페이지를 보면 짝을 이루는 태그가

block -> block, endblock 각 한개씩 있음

buttons -> buttons, endbuttons 각 한개씩 있음

if -> if, endif 각 한개씩 있음.

 

으로써 결국 무슨태그가 문제인지 몰랐었다.

---

#2 해소

 

강사님에게 질문을 했더니

 

답변이 왔고, 

 

# 답변 내용

안녕하세요.

if 블럭이 2개인데, endif 가 1개여서 발생하는 이슈입니다.

아래의 코드에서, if 블럭을 주석처리해서 if 블럭으로 동작하지 않는다고 생각하셨는 듯 한데요. 그렇지 않습니다.

<!-- {% if form.instance %} -->

<!-- --> 는 HTML에서의 주석 문법입니다. 장고 템플릿의 주석 문법이 아닙니다. 그렇기에 <!-- --> 는 장고 템플릿 입장에서는 단순 문자열일 뿐입니다. 그러니 위 if 블럭이 동작을 한 것입니다.

위 if 문이 장고 템플릿 엔진에서 렌더링 시에 무시토록 할려면, 장고 템플릿 주석 문법인 {# #} 를 쓰셔야 합니다. 그럼 {# {% if form.instance %} #} 가 됩니다.

{# #} 문법은 1줄 주석 문법이구요.

여러줄 주석은 comment 템플릿태그를 쓰셔야 합니다.

{% comment %}
이 사이에 쓰신 문자열은 장고 템플릿 엔진에 의해서 무시됩니다.
{% endcomment %}

이번 기회에 장고 템플릿 엔진에서의 주석과
웹프론트엔드 HTML, JS, CSS 에서의 주석의 차이에 대해서 곰곰히 생각해보시고 잘 정리해보세요.

또 질문 남겨주시구요.

화이팅입니다. ;-)

심플하게 html 파일 내에서 tag를 주석처리하더라도 주석에 대한 짝이 맞질 않는다면

에러처리가 된다. 탬플릿엔진에서는 주석을 무시하고 처리하기 때문이다.

라고 말씀해주셨다.

 

이걸 구글링으로 알아낼 수 있었을까?

가능은 했겠지만 얼마나 걸렸을까? 싶다.

진짜 귀중한 정보였다고 생각한다.

태그에는 주석이든 아니든 짝이 맞아야한다는 것을 언제나 유념하자.