.png)
블랙커피 스터디를 진행하려고 하는데 한 줄의 코드도 작성하지 못할 정도로 막막함을 느끼고 있었다.
그래서 다른 사람들의 코드를 보면서 어떻게 시작을 하는 것이 좋을지를 보면서 미션을 진행해야 할 것 같다.
그런데 여러 사람들이 처음에 index.js 혹은 app.js 에 파일에 onload, DOMContentLoaded 를 사용하는 것을 봤다.
왜 그렇게 해야 하는지에 대해서 궁금해서 찾아보다가 이 미션에서는 사용하지 않아도 되겠다는 판단을 했다.
일반적으로, 스크립트를 문서의 마지막(
</body>) 이전에 삽입하면 굳이 이벤트를 이용하여 프로그래밍을 처리할 필요가 없다. 다만, 문서의<head>영역에 스크립트가 삽입되거나 외부의 파일에 정의되어 있다면 이벤트를 연결하여 문서의 로드시점에 맞게 처리해야 한다.
위의 이유 때문에 나같은 경우는 <body>태그 가장 아래에 script를 추가했기 때문에 사용하지 않아도 된다.
그래도 공부한 내용을 간략하게 정리를 하자면
onload
onload는 문서의 모든 콘텐츠(images, script, css, etc)가 로드된 후 발생하는 이벤트이다.
window.onload = funcion() {
//code
}여기서 동일한 문서에 오직 onload는 하나만 존재해야 한다. 중복될 경우, 마지막 선언이 실행된다.
<body> 요소에 속성(attribute)으로 지정될 수 있다.
<body onload="실행될 코드">위와 같이 사용된 경우, window.onload로 지정된 것은 무시된다.
window 객체뿐만 아니라 원하는 객체(object)가 로드되었을때 실행될 코드를 설정할 수 있다.
document.getElementById("myFrame").onload = function() {
//실행될 코드
}
//이벤트를 직접 등록해서 사용할 수도 있다.
window.addEventListener('load', function(){
//실행될 코드
});DOMContentLoaded
HTML과 script가 로드된 시점에 발생하는 이벤트이다.
window.addEventListener('DOMContentLoaded', function(){
//실행될 코드
})onload와는 다르게 많은 것들이 로드된 이후에 실행되는 것이 아니다보니까 비교적 빠른 실행이 필요할 때 사용한다.
하지만 IE8 이하의 버전에서는 지원하지 않는다.
출처 : (https://webdir.tistory.com/515)
Dom Hardy : 멋쟁이 개발자 되기 인생 프로젝트 진행중