🔁 Django {% include %} 문법으로 공통 자바스크립트 재사용하기

🔁 Django {% include %} 문법으로 공통 자바스크립트 재사용하기

---

🎯 목표

여러 페이지에서 반복되는 자바스크립트 코드를 include 문법을 활용해 공통 파일로 분리하고,
base.html, login.html, signup.html, blog_form.html 등 다양한 템플릿에서 효율적으로 불러오는 방법을 학습합니다.

---

✅ 1. 공통 자바스크립트 파일 생성 (form-js.html)

{# templates/form-js.html #}
<script>
  document.querySelectorAll('select, input, textarea').forEach(function(ele) {
    ele.classList.add('form-control');
  });
</script>

🔹 역할:

• Django 기본 Form은 아무 스타일도 적용되지 않음
• 이 스크립트는 모든 <input>, <select>, <textarea> 태그에 form-control 클래스를 자동으로 추가
• 결과적으로 Bootstrap 스타일이 적용된 입력 폼으로 자동 변환됨

---

✅ 2. 각 템플릿에서 {% include %} 로 불러오기

{% block js %}
  {% include 'form-js.html' %}
{% endblock %}

📌 이 코드는 base.html의 {% block js %} 영역이나 각 개별 템플릿 하단에서 사용됩니다.

---

3️⃣ login.html에 적용

{% extends 'base.html' %}
{% block content %}
  <h1 class="mt-2">로그인</h1>
  <form method="POST">
    {% csrf_token %}
    {{ form.as_p }}
    <button class="btn btn-primary">로그인</button>
  </form>
{% endblock %}

{% block js %}
  {% include 'form-js.html' %}
{% endblock %}

🧩 흐름 설명:

• 기본 템플릿을 상속 (base.html)
• {% block content %} 영역에 로그인 폼 렌더링
• {% block js %}에서 form-js.html을 불러와 스타일 적용

---

4️⃣ signup.html에 적용

{% extends 'base.html' %}
{% block content %}
  <h1 class="mt-2">회원가입</h1>
  <form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button class="btn btn-primary">가입하기</button>
  </form>
{% endblock %}

{% block js %}
  {% include 'form-js.html' %}
{% endblock %}

📌 구조는 login.html과 동일하며, form 필드에 자동으로 Bootstrap 클래스가 붙어 깔끔한 UI 제공

---

5️⃣ blog_form.html에 적용

{% block js %}
  {% include 'form-js.html' %}
{% endblock %}

📌 이 파일은 블로그 생성/수정 폼에서 사용됩니다. form.as_p를 쓰더라도 별도 스타일링 없이 바로 적용됨

---

🔄 전체 흐름 요약

단계 설명

1	form-js.html에 공통 자바스크립트 정의
2	{% include 'form-js.html' %}로 각 템플릿에서 불러옴
3	login.html, signup.html, blog_form.html 등 다양한 폼 페이지에 재사용

---

✅ 기대 효과

• 중복 제거: 모든 템플릿에 동일한 JS 코드 반복 입력 X
• 일관된 스타일 적용: Bootstrap 기반 form-control 자동 적용
• 유지보수 용이: 수정 시 form-js.html 하나만 변경하면 모든 템플릿에 반영됨

---

이처럼 Django의 {% include %}는 공통 요소(스크립트, HTML 조각, 스타일 등)를 재사용할 수 있는 매우 강력한 도구입니다 💡