트러블슈팅 (feat. 개발자 도구, addEventListener)

개인 과제를 하다가 개선 사항으로 모듈화하기로 생각하여, 하나의 JS파일로 이루어져있던 index.js를 두 가지의 기능을 불러오는 코드로 변경해주었다.
기존 영화 정보를 불러오는 async를 사용하여 api를 호출하는 getData,
검색창에 검색한 문자열이 포함된 영화만 보여주는 Search가 있다.
각 함수를 각기 다른 JS파일에 넣어준 뒤 export로 내보내주고,
메인 JS파일인 index.js에서 import로 받아주었다.

문제 발생

import를 해서 외부 js파일을 불러오면 이상하게 onSubmit으로 event가 불러와지지 않았다.
여러 시도를 해보았지만 해결하지 못해서 하나하나 차근차근 짚어보기로 했다 (트러블슈팅)

• 우선 브라우저의 개발자 도구에서 Network 탭을 통해 모듈화한 JS파일이 잘 불러와지는지 확인했다. --> 이상없음

• 이후 html 파일에서 head부분 마지막에 js파일을 불러오는 코드를 넣어두었는데,
  body의 마지막부분으로 옮겨준 뒤 확인했다.
  위처럼 한 이유는 간혹 html의 크기가 큰 경우 html이 전부 불러와지기도 전에 js파일이 불러와져서 예상치 못한 오류가 발생할 수도 있다고 한다. --> 이상없음

• Elements 옆에 점선네모에 화살표모양을 클릭하면 html의 요소를 선택할 수 있고,
  클릭하면 해당 요소에 대한 코드를요소에서 이벤트가 있다면 중단부분쯤에 Event Listeners가 있는데 이벤트가 어디서 실행되는 것인지 js코드 위치를 알려주고,
  ex) index.js:22
  이를 클릭하면 어디에 바인드된건지 코드를 보여준다. 바로 표시해준다.
  물론 정상적으로 보여졌다. --> 이상없음

이렇게 하나하나 차근차근 짚어가면서 안되는 이유를 찾아보았으나,
왜 import를 해주면 onSubmit으로 이벤트가 넘어오지 않는지 결국 찾지 못했다.

그래서 addEventListener를 사용하기로 했다.

addEventListener 함수

addEventListener는 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정합니다.

기본 문법 addEventListener(type, listener)

첫 번째 매개변수인 type에는 어떠한 이벤트인지를 넣어주고(submit, click 등),
두 번째 매개변수인 listener에는 해당 이벤트가 수신되면 호출할 함수를 설정해준다.

예제 코드

let search = document.getElementsByClassName("search")[0];
search.addEventListener("submit", (event) => {
    event.preventDefault(); // submit으로 인해 발생하는 새로고침 방지 메소드
    getSearch();
    console.log(event);
});

위 예제는 search 요소에서 submit 이벤트가 실행되면 event를 매개변수로 받는 함수를 호출해준다. getSearch() 함수와 event 로그를 출력해준다.

onSubmit은 HTML Event Attributes 중 하나이며,
addEventListener는 JavaScript HTML DOM 중 하나이다.

마치며..

결국 정확한 원인을 찾지 못했다..
event 로그를 보고 싶은데 아예 onsubmit으로 event가 넘어오질 않아
보는 것 조차 할수가 없었다.. (방법이 없는건 아닐 것 같은데 내가 모르는 것 같다..)
분명 또 비슷한 문제가 나타날텐데 addEventListener를 쓰면 되겠지만,
문제가 정확히 무엇인지 알아내고야 말겠다..!