// 버튼에 클릭 이벤트 리스너 등록
      myButton.addEventListener('click', function() {
        // 버튼이 클릭되었을 때 실행할 코드 작성
        console.log('버튼이 클릭되었습니다!');
      });

 

간단한 버튼 구현인데 자꾸 button이 클릭이 안됐다.

애를 먹었지만 chatgpt한테 자꾸 물으니 해답을 찾았다.

addEventListener는 비동기적 표현인데 html에서 script내에 js코드를 넣을 때 body안에 넣어야된다.

다른 방법은 밑에 방법처럼 defer를 넣어주어서 문서 파싱이 끝난 후 js파일을 불러와준다.

그래서 저 코드가 정상 수행될 수 있다.

<script src="app.js" defer></script>

 

 

 

async/await를 사용해도 비동기적 구현으로 오류를 방지할 수 있다 한다.

하지만,

defer를 더 선호해야하는 이유-

defer 는 동기 스크립트를 차단할 수 없지만, async 는 스크립트 다운로드에 따라 차단할 수도 있다.

: 가져온 정보고 완벽히 이해는 안되지만, defer가 중요하다는 걸 알게 되었다.

 

 

 

 

'IT > HTML CSS JavaScript' 카테고리의 다른 글

JS Doc 주석 활용  (0) 2023.06.12
유튜브 영상 삽입 (iframe, youtube data api v3)  (0) 2023.06.08

+ Recent posts