JS SPA식으로 이벤트 함수 만들기

Today, What I learned?

바닐라 JS로 SPA를 구현하는 프로젝트 진행 중!..

담당 페이지를 마크업 하고, 버튼을 클릭했을 때 이벤트 일어나는 것을 SPA 방식으로

어떻게 구현하는가.. 🤔 에 대해서 좀 헤맸던 지라 오늘은 이것에 대해 정리해보려 한다.

 

 

Cannot read properties of null (reading 'addEventListner')

오늘 만난 에러.

이 전에도 한 번은 만난 적이 있던 것 같은 녀석..

사진은 예시

 

일단 저 에러는 이런 이유로 발생한다.

• html이 로드되기 전에 script를 먼저 불러왔다.
• 아직 html이 로드되기 전이기 때문에 addEventListener를 부여할 DOM을 찾지 못했다.
• 고로 null 값이 뜬다.

 

이 경우는 보통 script 태그를 html 문서 하단에 등록하는 것으로 해결이 된다.

 

하지만 나의 경우에는 좀 곤란한 부분이 있었다.

• SPA로 구현된 프로젝트이기 때문에 이벤트 리스너 함수를 쓰는 것이 불가능해 보임 (여러 시도 결과..)
• main.js에서 모든 이벤트 함수를 핸들링하고 있기 때문에 보통의 해결 방식과는 다르게 해결하고 싶었음.

 

해결!

그래서 태그에 직접 이벤트를 부여하는 방식으로 해결..

 

이런 방식으로 이벤트를 직접 매개변수에 넣어주면, 아래처럼 addEventListner 없이도 함수를 export 할 수 있다.

코드의 일부분..

지금보니 변수 하나가 카멜케이스가 아니네 수정해야지.. 

 

이제 main.js에서 window 객체에 별도의 핸들러를 부여해주면 적용 완.

 

 

 

시간이 어디로 사라졌는지 모르겠지만.. 내일도 파이팅.. 🥹