저는 기본 파이보앱에 채팅앱을 추가하면서 테스트를 하고 있습니다.

채팅 앱을 추가할때 jquery가 들어가는 부분이 있는데 이것 때문에 충돌이 나서 오류가 생기는거 같습니다.

그 이유는 추가한 채팅앱을 그냥 따로 실행하면 잘 돌아가는데 파이보앱에 추가해서 실행하면 자바스크립트 동적 부분만 에러가 납니다.

제가 구글링을 해보니 부트스트랩 5.X 이상 버전부터는 jquery가 필요 없다고 나오네요. 그래서 jquery 부분을 제거하고 실행하면 에러는 안나지만 실행은 또 안되네요.

브라우저에 콘솔창에서는 아래 코드의 *** 으로 표시한 부분에서 "uncaught referenceerror: $ is not defined"라는 에러가 뜹니다.

채팅 앱에 추가한 jquery와 자바스크립트는 다음과 같습니다.

<script src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>

<script>
***$(document).ready(function()***{

setInterval(function(){
    $.ajax({
        type: 'GET',
        url : "/getMessages/{{room}}/",
        success: function(response){
            console.log(response);
            $("#display").empty();
            for (var key in response.messages)
            {
                var temp="<div class='container darker'><b>"+response.messages[key].user+"</b><p>"+response.messages[key].value+"</p><span class='time-left'>"+response.messages[key].date+"</span></div>";
                $("#display").append(temp);
            }
        },
        error: function(response){
            alert('An error occured')
        }
    });
},1000);
})
</script>

<script type="text/javascript">
***  $(document).on('submit','#post-form',function(e)***{
    e.preventDefault();

    $.ajax({
      type:'POST',
      url:'/send',
      data:{
          username:$('#username').val(),
          room_id:$('#room_id').val(),
          message:$('#message').val(),
        csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
      },
      success: function(data){
         alert(data)
      }
    });
    document.getElementById('message').value = ''
  });
</script>

이 문제를 어떻게 해결해야 할지 몰라서 스승님께 문의드립니다.