오늘 한 일

• facebookClone 작성 중 event.currentTarget.parentNode.~~~로 진행되는 코드에서 null 값의 parentNode를 참조할 수 없다는 에러가 발생하는 문제가 있었다. 확인을 위해 event를 console.log()로 찍어봐도 event.currentTarget의 값은 null이었는데, event.target은 정상적으로 값을 가지고 있어서 뭐가 문제인지 몰라 벙쪘었었다. 구글링 끝에 생각한 문제의 원인은 다음과 같다.
  1. 현재 click event listener가 두개가 걸려있다. 하나는 탭 영역이 아닌 곳을 클릭할 때 탭이 닫히는 것, 다른 하나는 이번에 새로 작성한 버튼을 클릭할 시에 Ajax 처리를 해주는 것이다.
  2. event bubbling으로 전파되면서 event.currentTarget은 계속 변화한다.
  3. 핸들러 내부의 event.currentTarget.parentNode.~~ 코드가 실행될 때 이미 버블링 끝에 event.currentTarget에 null 값이 할당되었다. 따라서 핸들러 첫 줄에 currentTarget을 새 변수에 할당해 사용하자 정상적으로 작동하는 것을 확인할 수 있었다.

     const currentTarget = event.currentTarget;