django 템플릿 <script>태그

장고 템플릿을 이용하는 프로젝트 진행 중에 대시보드를 구현해야 했습니다.

대시보드 한 페이지에 다양한 정보가 들어오고 컴포넌트 별로 실시간 업데이트가 필요하지 않을까라는 생각에 ajax로 통신을 하려고 했습니다.

ajax로 통신할 때 url 정보를 보내줘야 하는데 장고 url 태그가 편리하기에 이 장고 코드를 <script> 태그 내에 작성해도 되는지 알아보았습니다.

<script> 태그 내부의 장고 코드

<script> 태그 내부에도 Django 템플릿 태그를 사용할 수 있습니다. 하지만 여기서 주의할 점은 Django 템플릿 태그가 서버 측에서 처리되고, JavaScript 코드는 클라이언트 측에서 실행된다는 것입니다.

예를 들어, Django의 URL을 JavaScript 코드에서 사용하고 싶을 때, 이렇게 할 수 있습니다

<script>
  let listDataUrl = "{% url 'list_data_url' %}";
  let graphDataUrl = "{% url 'graph_data_url' %}";

  // 이후에 이 URL들을 AJAX 요청에서 사용
  // ...
</script>

위의 예제에서, Django 템플릿 태그는 서버 측에서 URL을 생성하고, 이 URL은 JavaScript 변수에 할당됩니다. 이후에 이 변수들을 사용하여 AJAX 요청을 수행할 수 있습니다.

주의할 점

여기서 주의할 점은 Django 템플릿 태그가 서버 측에서 처리되고, JavaScript 코드는 클라이언트 측에서 실행된다는 것입니다.

웹 애플리케이션에서 서버 측과 클라이언트 측은 다른 환경에서 실행되며, 서로 다른 역할을 수행합니다.

서버 측(Server-Side)

• 서버 측은 웹 서버와 백엔드 애플리케이션 로직이 실행되는 곳입니다.
• 데이터베이스 쿼리, 인증, 데이터 처리 등과 같은 작업을 처리합니다.
• Django는 서버 측 웹 프레임워크로, 요청이 들어오면 이에 대한 응답을 생성하는 데 사용됩니다.
• Django 템플릿 태그는 서버에서 해석되고 처리됩니다. 템플릿 태그는 서버 측에서 HTML 문서를 렌더링 하는데 도움이 됩니다.

클라이언트 측(Client-Side)

• 클라이언트 측은 사용자의 브라우저에서 실행되는 환경입니다.
• HTML, CSS, JavaScript로 구성된 웹 페이지를 렌더링 하고, 사용자와 상호작용합니다.
• JavaScript는 클라이언트 측에서 실행되며, 동적인 기능을 제공합니다 (예: 버튼 클릭, AJAX 요청, 애니메이션 등).

서버 측과 클라이언트 측의 관계

• 사용자가 웹 페이지를 요청하면, 서버 측(Django)은 HTML 문서를 생성하여 브라우저로 보냅니다.
• 이 HTML 문서는 Django 템플릿 태그로 작성되었을 수 있으며, 이 태그들은 서버에서 처리되고 최종 HTML로 변환됩니다.
• 브라우저(클라이언트 측)는 이 HTML 문서를 받아 사용자에게 표시하며, JavaScript는 브라우저에서 실행됩니다.

이렇게 서버 측에서 렌더링 된 결과를 클라이언트 측에서 사용할 수 있습니다. 하지만 JavaScript 코드 자체는 클라이언트에서 실행되기 때문에, 실행 시점에 서버 측에 영향을 미치지는 않습니다.

그래서 script 함수 내부에서는 장고 템플릿 코드를 사용할 수 없습니다.

<script>
$(document).ready(function(){
  function renderList() {
    $.ajax({
      url: "{% url 'list_data_url' %}"; // 이렇게 사용 할 수 없습니다.
      // 생략...
    });
  }
});
</script>