Django template 변수 데이터 JS 파일에서 사용하기 How to use template tag data in JS file. - 2021.07.24

Django를 사용할 때 views.py에서 보낸 데이터를 html에서 변수로 받아서 사용할 때, 만약 JS 파일에서 그 변수를 사용하고 싶다면 어떻게 해야할지 생각했다. 가장 하기 쉬운 방법은 2가지가 있었다.

1. 해당 html script 태그에 JS코드를 작성.
   => 구글링해서 많이 나온 해결법이었다..

   <script>
    var test = "{{myposts_list|safe}}";
    var loop_count = "{{loop_counter|length}}";
    var count = "{{count|safe}}";
   </script>

하지만 이 방법은 JS 코드가 길어진다면 정말 보기 코드가 더러워 질것이다🙃

 

2. 전역변수 사용
이상하게도 JS 파일을 선언해 줬는데도 해당 JS 파일에서 template tag 변수(데이터)를 가져와서 쓰려고 하지만 전혀 적용이 되지 않는다.. 읽지를 못하더라
그래서 전역변수 사용을 해보니 데이터를 읽어올 수 있었다.

<script type="text/javascript">
  //전역변수..
    const post_count = {{count|safe}};
    const dates = "{{dates|safe}}";
</script>
<script type="text/javascript" src="/static/js/mypage.js"></script>

이렇게 하면 mypage.js 파일에서 그냥 변수를 바로 사용해도 데이터가 유지가 된다. 그렇게 좋은 방법은 아니긴 하지만 코드가 더러워지는 건 좀 피하고 싶었다.

 

참조: 전블로그

Django template 변수 데이터 JS 파일에서 사용하기 How to use template tag data in JS file.