발단
캘린더를 만들다가 하루 종일(사실 그 이상) 나의 인내심을 테스트하는 순간이 찾아왔다.
당월 캘린더를 총 35칸으로 만들어 이전달과 다음달의 날짜를 포함시키는 캘린더였고 클릭 이벤트를 발생시키는 게 미션이었다.
무지와 체험
사실 나는 addEventListener 앞에 붙는 범위를 조금 막연하게 생각했었다.
이벤트 리스너 앞에 붙는 window, document가 공부하며 봤던 기본 예시들이었기에 구체적인 범위 지정에 대해 도전할 생각을 해보지 않았었다.(아예 필요한지조차 와닿지 않았다) 그러다가 저저번주쯤이었나 처음 구체화해서 사용해봤다.
고민과 시도와 실패와 깨달음
이번 캘린더를 구현할때도 나름 날짜부분을 포함하는 영역을 지정해놓고 작업을 시작했다.
그런데 이상하다. 분명히 조건을 걸었는데 왜 조건문이 아닌 부분들이 튀는거냐.. 왜 때문에 지정한 class name이 아닌 녀석이 클릭되어도 콘솔이 찍히느냔 말이야.
15분동안 낮잠 자면서도 머릿속에서 시뮬레이션 하면서 잤다. 내가 분명 잠 들어있는데 생각을 하는 이런 기분 처음이었다.
정말 하루 종일 스스로 걸어둔 조건문을 의심하고 더 디테일하게 조건을 달면서 했는데도 생각대로 작동이 되지 않는 코드를 과장섞어 몇 천 번 확인하다 문득 스치듯 의심했던 부분을 좀 더 집중해서 들여다보기로 했다.
조건에 걸어두지도 않은 날짜에 클릭했을 때 값이 변하고.. 눌렀을 때 콘솔에 찍히면 안 되는 부분이 찍히고 .. 왜그럴까 왜그럴까 ...왜..그..럴...아???
깨달음에 순간에 까먹을까봐 노션에 휘갈기듯 적어놓고 반복문을 통해 하나하나 넣어주니 그제서야 언제 열받게 했냐는듯 아주 평온하게 움직여 주었다..
정말 수없이 절규 했는데 너무 뿌듯하다. 아직 나무밖에 못 보지만 많은 실패와 고민을 통해 숲을 볼 것이다!
여튼 이렇게 나는 addEventListener의 범위 지정의 중요성에 대해 뼈저리게 깨달았다.
앞으로 유용하게 써주겠다.
