[트러블슈팅] - 클릭 이벤트 버블링, ReferenceError 등

🚀 트러블슈팅

"webtoon-moa" 프로젝트를 진행하면서 겪었던 오류나 새롭게 알게 된 점들을 몇 가지 적어보려 한다.
(바로바로 기록으로 남겼어야 되는데, 발표일에 맞춰 마무리하기 위해 정신없이 달렸던 터라 그러지 못했다..😂)

☁ 클릭 이벤트 버블링

하트 토글 버튼을 한 번 클릭하였는데, 이벤트가 여러 번 발생하는 것처럼 보였다.
그래서 console.log를 찍어봤더니 실제로 버튼 한 번에 로그가 3번씩 찍혔다..

검색해 보니 다행히도 자바스크립트를 사용하여 이벤트를 구현할 때 흔히 겪는 오류였다.
이미 많은 사람들이 이유와 해결 방법을 잘 설명해놓아 쉽게 해결할 수 있었다.

한 번 클릭했는데 여러 번 이벤트가 발생하는 이 현상 을 클릭 이벤트 버블링 이라고 부르며, 이벤트 버블링 이란 자식 요소의 이벤트가 부모 요소까지 전파되는 현상이다.
이 현상은 당연히 해당 요소가 부모 요소를 가지고 있는 경우에만 발생한다. 자식 요소에서 이벤트가 실행되고, 또 부모 요소에서도 같은 이벤트가 실행되는 식이다.

그럼 가장 중요한 해결 방법은 무엇일까?
바로 stopPropagation() 을 사용하는 것이다. (참고로 propagation의 뜻은 번식!)
위의 함수를 사용하면 내가 원하는, 클릭한 타깃에서만 이벤트가 발생하고 상위 요소로 이벤트가 전파되는 것을 막을 수 있다!

아래는 하트 토글 버튼에 클릭 이벤트 버블링이 발생하여 stopPropagation()을 사용하여 해결했던 코드이다.

☁ ReferenceError (≈ 실행 순서 문제)

오류 메세지는 Uncaught ReferenceError: ~ is not defined 이런 식으로 나타났다.
코드를 몇 번 확인해도 정의도 잘 되어있고, 문법에도 오류가 없었는데 해결되지 않았었다.

검색하여 찾아보니 대략 3가지의 원인으로 발생하는 것을 확인할 수 있었다.

1. 문법 오류
   hello("abc") 와 같이 작성해야 하는 경우에 hello(abc) 라고 작성하여 스크립트가 정상적으로 실행되지 않는 경우

2. 실행 순서로 인한 오류
   존재하지 않는 변수 등을 참조하게 되어 오류가 발생하는 경우
   분명 변수를 선언했는데 없는 변수를 참조하고 있다 라는 것은 실행 순서를 의심해 봐야 한다!!

   나의 오류는 실행 순서에 의해 발생한 오류였고, $(document).ready(function(){}) 를 사용하여 스크립트가 다 준비된 상태에서 함수를 실행하는 방식으로 해결하였다.

3. 제이쿼리 로딩 오류 (Uncaught ReferenceError: $ is not defined)
   가장 주된 원인이라고 한다. 스크립트 태그에 $ 기호를 사용했는데 상단에 jQuery를 정의해 주지 않은 경우에 발생한다고 한다!
   jQuery 스크립트를 상단에 정의해 주면 해결된다고 한다.

☁ 뒤로 가기 시 데이터가 refresh 되지 않는 문제 (Ajax 비동기 통신)

오류라고 하기보다는 이것저것 시도하다가 해결하게 되어 기억에 남는 케이스라 작성하게 되었다.

나는 웹툰 리스트들을 새로고침 없이 보여주고 싶었다. 요일이나 플랫폼 등을 선택할 때마다 페이지가 새로 로딩되지 않고 보여주고 싶었다.
그래서 Ajax 비동기 통신을 사용하게 되었는데, 문제는 하나의 웹툰을 클릭하여 페이지를 이동했다가 다시 돌아와도 새로고침이 되지 않는다는 것이었다.
웹툰의 클릭 수를 반영하여 각각의 웹툰 조회수를 보여줘야 하는데 직접 새로고침을 해야만 반영이 되었다..

그래서 생각한 방법은 우선 1. 뒤로 가기 이벤트를 감지 하고, 2. 자동으로 새로고침 을 해주자였다.
관련 함수를 찾아보았고, $(window).bind("pageshow", function (event) {}) 를 사용하여 뒤로 가기 이벤트를 감지할 수 있었다.
뒤로 가기 이벤트가 일어나면 reload 함수를 통해 새로고침을 하여 해결해 주었다.

☁ JS를 사용하여 동적으로 태그 추가하기

이것 역시 오류는 아니지만, Ajax를 통해 웹툰 카드들을 동적으로 생성해 줄 때 많이 사용하다 보니 기억에 남기도 했고, 앞으로도 자주 쓰일 것 같아서 정리해 보고자 한다.

JS로 요소를 생성하고 추가할 때 사용되는 함수들은 아래와 같다.

1. let 변수 = document.createElement('태그 종류');
   태그를 생성함
2. 새로 생성한 태그 변수.setAttribute('속성', '값');
   생성한 태그에 속성과 값을 부여함
3. 부모태그.appendChild(새로 생성한 태그 변수);
   특정 부모 태그에 생성한 태그를 자식 태그로 추가해줌

실제 프로젝트에서 아래와 같이 사용하였다.
"li" 태그를 생성해주고 "id"와 "id 값"을 부여해주었고, id 값이 webtoon_list인 "부모 태그에 추가"해주었다.

---

✨ 느낀 점

거의 처음 적어보는 트러블슈팅인데, 이렇게 정리를 해보니 확실히 도움이 많이 되는 것 같았다.
정리해 보면서 어떻게 해결했었는지 다시 한번 복습할 수 있었고, 열심히 오류를 수정해가며 작성했던 기억들도 떠올라서 감성에 젖을 수도 있었다.(주먹구구식 코딩 너무 힘들었다.. 하지만 재밌었다ㅎㅎ)
그때 정말 오류를 많이 겪었는데 지금 100% 다 기억이 나지 않는 것이 너무 아쉽다..
지금 또 공모전을 준비하며 하나의 프로젝트를 진행하고 있는데 벌써 새로 배우게 된 것들이 수두룩하기 때문에 이번에는 틈틈이 기록을 해놓아봐야겠다!!

---