스택큐힙리스트

바닐라 자바스크립트에서 jQuery의 $.ready()와 동일한 기능 - 페이지/DOM이 준비되어 함수를 호출하는 방법 [중복] 본문

카테고리 없음

바닐라 자바스크립트에서 jQuery의 $.ready()와 동일한 기능 - 페이지/DOM이 준비되어 함수를 호출하는 방법 [중복]

스택큐힙리스트 2024. 1. 28. 19:09
반응형




jQuery를 사용하여 우리는 아주 멋진 .ready() 함수를 알고 있습니다:


$('document').ready(function(){});

하지만, 만약에 라이브러리를 사용하지 않고 표준 JavaScript로 작성된 함수를 실행하고, 페이지가 준비된 후에 함수를 실행하고 싶다면 어떻게 접근해야 할까요?


다음과 같이 할 수 있다는 것을 알고 있습니다:


window.onload=myFunction();

또는 body 태그를 사용할 수 있습니다:


<body onload=myFunction()>

또는 페이지의 맨 아래에 모든 것 이후의 body 태그나 html 태그 뒤에 다음과 같이 시도할 수도 있습니다:


<script type=text/javascript>
    myFunction();
</script>

jQuery의 $.ready()와 유사한 방식으로 한 개 이상의 함수를 발행하기 위한 크로스 브라우저(old/new) 호환 메서드는 무엇일까요?

답변 1


  1. IIFE(즉시 호출되는 함수 표현식)를 만들어 비공개 상태 변수를 갖게합니다.

  2. docReady(fn, context)라는 공개 함수를 선언합니다.

  3. docReady(fn, context)가 호출될 때, 준비 완료 핸들러가 이미 실행되었는지 확인합니다. 이미 실행되었다면, 이 JS 스레드가 setTimeout(fn, 1)으로 종료된 직후 새로 추가 된 콜백이 실행되도록 스케줄합니다.

  4. 준비 완료 핸들러가 아직 실행되지 않았다면, 이 새로운 콜백을 나중에 호출할 콜백 목록에 추가합니다.

  5. 문서가 이미 준비되었는지 확인합니다. 이미 준비되었다면, 모든 준비 완료 핸들러를 실행합니다.

  6. 문서가 준비 될 때까지 이벤트 리스너를 설치하지 않았다면, 이제 설치합니다.

  7. document.addEventListener가 있는 경우, .addEventListener()를 사용하여 DOMContentLoaded 및 load 이벤트에 대한 이벤트 핸들러를 설치합니다. load는 안전을 위한 백업 이벤트이므로 필요하지 않아야 합니다.

  8. document.addEventListener가 없는 경우, .attachEvent()를 사용하여 onreadystatechange 및 onload 이벤트에 대한 이벤트 핸들러를 설치합니다.

  9. onreadystatechange 이벤트에서 document.readyState === complete를 확인하고, 그렇다면 모든 준비 완료 핸들러를 실행하는 함수를 호출합니다.

  10. 다른 이벤트 핸들러에서는 모든 준비 완료 핸들러를 실행하는 함수를 호출합니다.

  11. 모든 준비 완료 핸들러를 호출하는 함수에서 상태 변수를 확인하여 이미 호출되었는지 확인합니다. 이미 호출되었다면, 아무 작업도 수행하지 않습니다. 아직 호출되지 않았다면, 준비된 함수 배열을 순환하고 등록된 순서대로 각각 호출합니다. 이들이 한 번 이상 실행되지 않도록 이들이 모두 호출된 것을 나타내는 플래그를 설정합니다.

  12. 함수 배열을 지워서 사용중인 클로저를 해제할 수 있도록 합니다.

docReady()으로 등록된 핸들러는 등록된 순서대로 실행될 것이 보장됩니다.


문서가 이미 준비된 후에 docReady(fn)을 호출하면, 콜백은 현재 실행 스레드가 완료될 때까지 setTimeout(fn, 1)을 사용하여 실행 예정으로 예약됩니다. 이를 통해 호출 코드는 항상 나중에 호출되는 비동기 콜백이라고 가정할 수 있으며, 현재 JS 스레드가 완료된 후로써 호출 순서를 유지합니다.

답변 2

Vanilla JavaScript의 $.ready() 함수와 같은 기능 - 페이지/DOM이 준비될 때 함수를 호출하는 방법 [중복] 이 주제에 대한 SEO 향상을 고려한 한국어 에세이를 작성해 주세요.
페이지의 DOM(Document Object Model) 요소가 완전히 로드되기 전에 JavaScript 코드를 실행할 경우, 코드가 제대로 작동하지 않을 수 있습니다. 이러한 문제를 해결하기 위해 jQuery에서는 $.ready() 함수를 제공합니다. 그러나, 일반적으로 jQuery를 사용하지 않고 순수한 JavaScript로 작업하는 경우에는, 이와 같은 기능을 수행할 수 있는 다른 방법을 찾아야 합니다.
JavaScript에서 페이지를 로드할 때 이벤트를 감지하고 처리하는 방법이 있습니다. 이를테면, DOMContentLoaded라는 이벤트를 사용할 수 있습니다. 이 이벤트는 페이지의 DOM 트리가 구성되어 JavaScript 코드가 실행될 수 있을 때 발생합니다.
그렇다면, 페이지가 준비되었을 때 함수를 호출하는 방법은 무엇일까요? 한 가지 방법은 addEventListener() 함수를 사용하는 것입니다. 다음과 같이 코드를 작성할 수 있습니다:
document.addEventListener(DOMContentLoaded, function() {
// 페이지가 준비되었을 때 실행할 함수
});
이렇게 JavaScript에서 페이지 준비 이벤트를 감지하고, 해당 이벤트가 발생했을 때 함수를 호출할 수 있습니다. 이 방법을 사용하면, 순수 JavaScript로 페이지/DOM이 준비될 때 함수를 호출하는 기능을 달성할 수 있습니다.
이에 따라, 페이지/DOM이 준비되었을 때 함수를 호출하는 방법에 대한 Vanilla JavaScript의 $.ready() 함수와 같은 기능에 대해 설명했습니다. 이를테면, DOMContentLoaded 이벤트를 사용하여 페이지가 준비되었을 때 함수를 호출할 수 있습니다. 이를테면, addEventListener() 함수를 사용하여 이벤트를 감지하고, 해당 이벤트가 발생했을 때 함수를 실행할 수 있습니다.
위의 방법을 사용하면 jQuery를 사용하지 않고도 순수 JavaScript로 페이지를 로드할 때 함수를 호출할 수 있으며, 페이지의 검색 엔진 최적화(SEO) 향상에도 도움이 됩니다.

반응형
Comments