비동기 통신(Ajax)을 할 수 없는 경우의 대처법

소개



rails + jQuery에서 팔로우 기능을 비동기화 할 때,
팔로우 버튼을 클릭해도 화면이 전환되지 않고, 시행착오했기 때문에, 그 대처법의 일부를 소개합니다.

완성도




↑↓팔로우 버튼을 누르면 비동기로 반영됩니다


도달점



다음 1점 달성
· 대처법 배우기

흐름



① rails s로 로그 확인
② 개발자 도구 활용

① rails s로 로그 확인



rails s 하면 다음과 같은 로그가 표시됩니다.

마지막 행이 500 Internal Server Error와 같은 표시이면 오류의 원인이 표시되므로 로그를 확실히 확인합시다.

이번에는 문제가 없었습니다.

② 개발자 도구 활용



개발자 도구 콘솔에서 원인을 알 수 있습니다.

개발자 도구 콘솔을 여는 방법



1) Chrome을 시작
2) 브라우저의 오른쪽 상단에 있는 세 개의 점 아이콘을 클릭합니다.
3) 기타 도구 > 개발자 도구를 선택합니다.
4) 콘솔 탭을 클릭합니다.


콘솔에서 확인





무엇인가 Uncaught ReferenceError: $ is not defined 라는 에러 표시가 있습니다.
구그라고 보면, application.html.erb에 이하의 기술이 없고 jQuery를 사용할 수 없었던 것이 원인인 것 같습니다.
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>

오류 처리는 로그나 콘솔에서 오류 문장이 나올 수 있으므로 확인하면 조치의 실마리를 찾을 수 있습니다.

좋은 웹페이지 즐겨찾기