[JavaScript] window.addEventListener()

이번 포스팅은...

회사에서 일을 하면서 발생했던 상황에 대해 적어보려고 한다.

 

그 전에 iframe과 window.addEventListener() 에 대해 간단히 적어보자면,

 

iframe은 HTML Inline Frame 요소이며, inline frame의 약자이다.

이는 효과적으로 다른 HTML 페이지를 현재 페이지에 포함시키는 중첩된 브라우저로, iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 다른 페이지를 불러와서 삽입할 수 있다.

이런 식으로 말이다.

https://wikidocs.net/86838

02장-3.2 HTML iframe

 

window.addEventListener() 메서드는 JavaScript에서 이벤트를 수신하고 이에 대한 반응을 처리할 수 있는 이벤트 리스너를 등록하는 데 사용된다.

이 메서드를 사용하여 이벤트 리스너를 등록할 수 있으며, 이를 통해 특정 이벤트가 발생했을 때 실행되는 함수를 지정할 수 있다.

메시지 송신과 수신은 아래 블로그를 읽어보면 되겠다.

http://blog.302chanwoo.com/2016/08/postmessage/

iframe과 메시지 전달

 

문제가 되었던 부분의 코드를 첨부하자면 아래와 같다.

SVN을 업데이트 받고 나서 확인했을 때, index 파일에서 message가 넘어올 경우 no를 출력해주는 코드가 추가되어 있었는데,

위쪽에서는 switch ~ case문을 통해 페이지가 변화할 때 발생하는 ev.data?.type 을 통해 어떠한 이벤트를 발생시킬지 결정하는 코드가 있고

default 타입일 경우 "no"를 console 에 한 번 찍어주고 종료되도록 되어있었다.

 

아래 코드는 "no"라는 코드만 보여서 뭐가 문젠지 모르겠어서 어떤 메시지가 넘어오는지 직접 찍어보기 위해 임의로 추가했다.

console.warn( ev.data );

 

그랬더니 내 컴퓨터에서는 웹을 실행하고나서 아무것도 하지 않았는데 "no"가 한 번 찍히고 종료되지 않고, 콘솔에 "no"가 반복적으로 찍히면서 hello(?)라는 메시지가 계속 넘어오는 상황이 발생했다.

이게 뭔가 싶어서 결국 선임님께 여쭤봤다.

 

선임님께서는 이런 상황이 재현되지 않는다고 하셔서 내 컴퓨터에서 봐주시겠다고 하셨다.

그러던 중 확장 프로그램 중에서 보내는 게 있을 수 있을 것 같다고 하셔서 확장 프로그램을 하나씩 지워나갔다.

 

결론적으로 말하자면, React Developer Tools 확장 프로그램에서 넘어오는 메시지였다...

 

https://reactnative.dev/docs/react-devtools

React DevTools · React Native

바로 이 놈이었다.....^-^

이 확장프로그램은 학원 다닐 때 진행했던 프로젝트에서 리액트를 사용했어서

리액트로 개발 할 때 좋은 크롬 확장 프로그램인 것을 알게되어 다운 받았던 것이었는데,

이 놈이 메시지에 계속 hello를 보내고 있었던 것이었다.ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ (허무)

 

해당 확장 프로그램을 제거하니 위 상황이 발생하지 않았다.

 

덕분에 확장 프로그램이 메시지를 보내는 경우도 있다는 것을 깨달을 수 있었던 헤프닝이었다.

 

그동안 svn 업데이트를 받고 no가 계속 발생해서 저게 뭔가 싶어서 한가해진 상황을 틈 타 여쭤보았는데,

빠른 시간 내에 바로 해결할 수 있었다.

앞으로 저런 것들도 고려하면서 개발을 해나가야겠다는 생각을 하게 되었다!

물론 어떻게 해야되는지는 아직 잘 모르겠다 ^-^