js 코드분리와 이벤트 바인딩 방법

협업 프로젝트를 하다보면 html부분과 js부분을 2명의 개발자가 따로 개발할 상황이 발생할 수 도 있다.

하지만 지금까지 작성한 코드들은 html과 js부분이 함께 작성되어있기때문에 분업화하기가 까다롭다.

 

하지만 

 

js와html부분을 따로 개발하여 연동하면 이 문제를 해결할 수 있다.

 

다음과 같이 js부분을 따로 개발하여 바인딩해주면 아무런 문제가 없다!

 

하지만 js부분이 2개가 있다면 어떻게될까?

 

다음과 같이 작성하면 js이벤트를 둘 다 읽지 못한다 왜냐 첫번째로 읽어들인 이벤트를 두번째에서 초기화되어 두번쨰 이벤트만 실행되기때문이다.

 

이를 해결하기위해

 

이벤트를 누적해주는 window의 내부객체(addEventListener)를 사용한다.

 

다음과 같이 코드를 작성하면 event들이 누적되어 모든 이벤트들이 발생한다.