1. 사용 이유

Django와 JavaScript 모두 중괄호 {}를 구문에 사용합니다. 때로는 이 두 언어의 구문이 서로 충돌할 수 있는데, 이때는 Django의 {% verbatim %} 태그를 사용하여 Django가 JavaScript 코드를 무시하도록 만들 수 있습니다.

2. Django의 {% verbatim %} 태그 이해하기

Django의 {% verbatim %} 태그는 Django 템플릿 엔진에게 그 사이에 있는 모든 코드를 그대로 무시하고 출력하도록 지시합니다. 이것은 JavaScript와 Django의 구문이 충돌할 때 특히 유용합니다.

{% verbatim %}
const data = '{{{url}}}';
{% endverbatim %}

위 예제에서는 {% verbatim %} 태그를 사용하여 Django가 중괄호 {}를 그대로 렌더링하게 했습니다. 이 코드는 웹 브라우저로 그대로 전달되어 JavaScript가 실행되게 됩니다.

3. Django 템플릿 변수를 JavaScript에 전달하기

{% verbatim %} 태그를 사용하면 JavaScript 코드를 Django로부터 독립시킬 수 있지만, 때때로 Django 템플릿 변수를 JavaScript에 전달해야 할 경우가 있습니다. 이 경우 다음과 같이 코드를 작성할 수 있습니다.

<script>
const url = "{{ django_variable }}";
const data = {url};
</script>

여기서 django_url_variable은 Django의 context에서 가져온 실제 URL 변수입니다. 이렇게 하면 Django 템플릿 변수를 JavaScript 코드 내부로 전달할 수 있습니다.

4. 실습

아래 링크는 W3School에 사정에 따라 작동하지 않을 수 있습니다.

Django verbatim Template Tag