[jQuery] - $(document).ready(function() { ... });

JSP 2025. 5. 10. 21:11

$(document).ready(function() { ... }); 구문은 jQuery의 핵심 기능 중 하나로, JavaScript 코드가 HTML 문서가 완전히 로딩된 이후에 실행되도록 보장하는 메커니즘입니다.

✅ 기본 개념

$(document).ready(function() {
    // 여기에 DOM이 완전히 로드된 후 실행할 코드를 작성
});

즉, <body> 태그 안에 있든 <head>에 있든 관계없이, DOM이 준비되었을 때 정확하게 실행된다는 장점이 있습니다.

HTML 요소들이 아직 로딩되지 않은 상태에서 JavaScript가 실행되면, 아래와 같은 문제가 발생할 수 있습니다.

document.getElementById("myButton").addEventListener("click", function() {
    alert("Clicked!");
});

위 코드가 <body>의 myButton이 생성되기 전에 실행되면 오류가 발생하거나 이벤트가 동작하지 않습니다.

$(document).ready(function() {
    $("#myButton").click(function() {
        alert("Clicked!");
    });
});

#myButton 요소가 존재한 이후에 바인딩되므로 정상적으로 동작합니다.

document.addEventListener("DOMContentLoaded", function() {
    // DOM 완성 후 실행
});

최신 브라우저에서는 jQuery 없이도 위처럼 처리하는 게 일반적입니다.

항목	설명
역할	DOM이 완전히 로드된 후 JavaScript 코드 실행
장점	HTML 요소가 모두 생성된 후에 코드를 실행하므로 오류 방지
대체	최신 브라우저에서는 DOMContentLoaded 이벤트로 대체 가능
사용 예	Ajax 호출, 이벤트 바인딩, 초기화 함수 실행 등

Ajax - 비동기,동기 차이 및 예제(async/await, Promise, fetch API) (0)	2025.03.26
[JSP] - Ajax 파일 업로드 (0)	2025.03.25
Ajax(Asynchronous JavaScript and XML) - 비동기,동기 차이 및 예제 1편 (0)	2025.03.24
JSP - JSTL에서 ArrayLIst출력하기 (0)	2025.02.11
JSP - JSTL 배열 반복문으로 출력하기 (0)	2025.02.11