요번 시간에 자바스크립트 코드를 html에 가져올 때 사용하는 script 그리고 defer async에 대해서 배워보자.
참고로 async await 같은 동기, 비동기 처리에관해 한번 정리한 경험이 있는 터라 밑의 글을 참고하자.
2022.06.23 - [코딩/REACT] - React 부록 async, await, arrow function(1편)
React 부록 async, await, arrow function(1편)
이제껏 강의를 들으면서 잘 모르고 넘어간 것들 제목에 쓰여있는 3가지를 오늘 정리 + 이해해 볼 것이고 지금부터는 내가 직접 코드 작성하고, 파일도 분할해야 하기에 어떤 기능을 위해 쓰였는
minkyunoori.tistory.com
html 파일을 보통 위에서 아래로 파싱하는데 script태그를 만나면 해당하는 script파일을 가져온 후 파일을 실행시킴.
파싱: 내가 원하는 데이터를 특정 패턴이나 순서로 추출해 가공하는 것을 말한다.
하지만, 아직 생성되지 않은 dom요소를 script파일에서 조작하려 하면 에러가 발생한다.
<body>
<script src="Button.js"></script> //버튼의 색깔을 바꾸는 js파일
<button type="button" onclick="alert('클릭하셨습니다')">클릭</button>
</body>
이러한 코드가 있다고 치자. 실행한다면 오류가 발생할 것이다. 왜?
script태그를 만나 파일을 실행시키는데 색깔을 바꿀 버튼이 없기 때문에 script는 해야 할 일을 못하고 멈추게 된다.
이것을 해결하기 위해 여러 방법을 사용할 수 있다.
script태그를 body태그 내부에서 가장 최하단에 넣기. 바디에서 돔을 생성 완료 후, script로 조작하는 방식
단점이 있다면 html파싱이 완료되기 전까지는 실행되지 못하고 기다려야 한다는 것.
즉 자바스크립트에 의존적인 웹이라면 파싱 되기 전까지 아무 기능을 하지 못한다.
두 번째 방법은load이벤트 리스너 사용하기
html파싱, dom생성, 외부 콘텐츠(image, script, css 등)가 로드된 후 발생하는 이벤트이다.
모든 콘텐츠가 로드된 후 발생되기 때문에 비효율적이고 시간도 오래 걸린다.
DomContentLoaded 이벤트 리스너
위에서 한 단계를 단축한 것으로 html파싱. dom이 생성되었다면 발생하는 이벤트이다.
마지막으로는 defer, async가 있다.
defer
defer을 script태그 안의 속성으로 선언하면 되고, html파싱과 함께 비동기로 js파일을 불러옴. 파싱이 계속 진행된다.
html파싱이 완료되었다면 아까 불러온 js파일을 실행한다. 밑의 그림과 같다.
async
defer처럼 html파싱과 함께 비동기로 불러온다. 하지만, html파싱이 완료되지 않았더라도 먼저 로딩되는 js파일부터 실행시킨다.
js파일이 실행될 때는 html파싱이 중단된다. 그렇기에 위의 방법을 각 필요한 상황에 맞게 사용해야 한다.
오늘은 여기까지 다음 시간엔 내가 포기한 this에 대해서 다시 배워 볼 예정이다 하나 둘 셋 파이리~
'코딩 > JS' 카테고리의 다른 글
| (부록)스터디 윗 미 (1) | 2022.07.31 |
|---|---|
| Js복습 pt.4 API와 이벤트 버블링, 캡쳐링 (1) | 2022.07.26 |
| Js복습 pt.3 this (2) | 2022.07.24 |
| Js복습 pt.1 DOM과 BOM (0) | 2022.07.20 |
| javascript란 무엇일까? (재) (0) | 2022.04.10 |
