1. 오류 발생
1. Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
> 콘솔에서 undefined 출력
document.querySelector('#searchBtn2').addEventListener('click', function () {
alert('버튼 클릭');
});2. 해결방법
1. window.onload 사용
window.onload = function () {
document.querySelector('#searchBtn').addEventListener('click', function () {
alert('버튼 클릭');
});
};2. index.html 파일에서 <body>태그 제일 하단에 위치
<body>
~~~~~~~~~~~~~~~~~~~~~내용 ~~~~~~~~~~~~~~~
<script src="index.js"></script>
</body>* <bod>태그 제일 상단에 위치했을때도, 작동이 안되서 제일 하단으로 위치 변경
* html과 script 읽는 속도의 차이에서 발생했음 => 그래서 <head>태그에 넣는 방법에 대해 공부해봄.
3. [선택] <head> 태그에 defer속성 사용
<head>
<script defer src="index.js"></script>
</head><head> 태그 <script> 태그 포함하는 경우
: 분석 &중지 > 스크립트 다운 실행 > 다시 분석 => 인터넷 속도가 느리거나 js 파일이 크면 시간오래걸림
=> 결국 head 포함 안 하는게 좋음
(1) async 속성 : boolean 타입 (기본: true) : html분석과 js다운을 병렬로 진행
=> html 분석 전 js에서 쿼리셀렉트를 이용해서 dom요소 조작하면 그 시점에서 html이 정의 되지 않을 수 있음
(2) defer 속성 : html 파싱하다가 js다운만 받아놓자 하고 html 파싱 끝나면 다운로드 된 js 실행
=> 여러개의 script를 <head>태그에 넣을 경우, 각각의 js 다운 받은 후 순서대로 실행
(제일 효율적이고 안전함)
<body>태그 <script>태그 제일 하단에 위치
: html분석 완료 > 스크립트 다운 받아서 진행 > 사용자가 js 받기 전에 페이지 컨텐츠 볼 수 있음
=> (단점) js에 의존성이 높은 페이지라면 정상 페이지 보기 전에 js 다운 받고 실행하는 시간 기다려야함
'TIL :: Today I Learned' 카테고리의 다른 글
| [보충] 함수 / 배열 (0) | 2023.10.25 |
|---|---|
| 깃허브로 협업하기 (1) | 2023.10.24 |
| 사진에 마우스 hover 하면 버튼 기능 추가 (0) | 2023.10.24 |
| #1 영화 TOP 20 검색 사이트 구현 (+오픈 api 사용) (0) | 2023.10.23 |
| [css] display : grid 검색 기능 시, 조건에 해당 안하는 값 미적용 (0) | 2023.10.20 |