안녕하세요 😊 코드카인 여러분!
오늘은 웹 페이지를 다룰 때 종종 혼란스러울 수 있는 두 가지 이벤트, DOMContentLoaded와 Load에 대해 살펴볼게요. 이름만 들어도 헷갈릴 수 있지만, 둘의 차이는 생각보다 간단하고 실생활에서도 쉽게 이해할 수 있답니다. 그럼 함께 알아볼까요? 😊
📚 DOMContentLoaded란?
DOMContentLoaded는 HTML 문서가 완전히 파싱되었을 때 발생하는 이벤트입니다. 쉽게 말해, HTML의 구조(태그들)가 모두 브라우저 메모리에 올라가면 바로 실행됩니다. 하지만 이미지나 스타일시트 같은 외부 리소스는 아직 로드되지 않았을 수도 있어요.
🛒 예시로 이해하기: "마트 정리"
마트에 물건이 쏟아졌다고 상상해볼게요. 마트 직원이 진열대(HTML 구조)를 먼저 세우고 물건(이미지나 외부 리소스)은 나중에 진열하는 거예요. 이때 진열대가 모두 준비된 순간이 바로 DOMContentLoaded입니다. 물건이 진열되는 것까지 기다릴 필요가 없죠!
📚 Load란?
반면, Load는 페이지의 모든 리소스(HTML, CSS, JS, 이미지 등)가 모두 로드된 후 발생하는 이벤트입니다. 즉, 페이지가 완벽히 준비된 상태를 의미합니다.
🛒 예시로 이해하기: "마트 오픈"
마트의 모든 물건(이미지), 진열대(HTML), 안내판(CSS)까지 모두 완벽히 세팅된 뒤 문을 여는 순간이 바로 Load입니다. 손님들이 들어오기 전에 모든 준비가 끝나야겠죠?
🕵️ 주요 차이점 비교
| 특징 | DOMContentLoaded |
Load |
|---|---|---|
| 발생 시점 | HTML 파싱 완료 시점 | 페이지의 모든 리소스 로드 후 |
| 이미지 및 스타일시트 상태 | 로드되지 않았을 수 있음 | 모든 이미지 및 스타일시트가 로드된 후 |
| 사용 목적 | DOM 조작이 가능한 시점을 파악할 때 사용 | 전체 페이지가 준비되었는지 확인할 때 사용 |
| 실행 속도 | 빠름 | 느림 |
🛠️ 실전 예제 코드
아래는 두 이벤트의 차이를 확인할 수 있는 간단한 예제입니다:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOMContentLoaded vs Load</title>
</head>
<body>
<h1>Hello, World!</h1>
<img src="https://via.placeholder.com/300" alt="placeholder image">
<script>
document.addEventListener("DOMContentLoaded", () => {
console.log("DOMContentLoaded: DOM is fully loaded and parsed!");
});
window.addEventListener("load", () => {
console.log("Load: Everything is fully loaded!");
});
</script>
</body>
</html>💡 실행 결과:
DOMContentLoaded로그는 HTML이 파싱된 즉시 출력됩니다.Load로그는 이미지와 CSS 등이 모두 로드된 후 출력됩니다.
🛠️ 언제 어떤 이벤트를 사용해야 할까요?
- 빠른 DOM 조작이 필요할 때:
DOMContentLoaded를 사용하세요. 페이지가 완전히 로드되지 않아도 DOM 요소를 변경하거나 이벤트를 추가할 수 있습니다.
- 외부 리소스를 포함한 완전한 로드가 필요할 때:
Load를 사용하세요. 예를 들어, 이미지 크기를 계산해야 하거나 모든 리소스를 활용하는 작업에 적합합니다.
😊 마무리하며..
DOMContentLoaded와 Load는 페이지 로드의 서로 다른 시점을 나타내는 중요한 이벤트입니다. 각 이벤트를 적절히 활용하면 웹 성능을 최적화하고 사용자 경험을 높일 수 있어요. 초보 개발자 여러분도 너무 어렵게 생각하지 말고, 마트 정리와 오픈 비유를 기억하면서 이해해보세요! 😊
'JavaScript > JavaScript 브라우저와 BOM' 카테고리의 다른 글
| 웹 데이터 저장의 모든 것: 브라우저 세션 관리 쉽게 배우기 - 코드카인 티스토리 (0) | 2025.01.23 |
|---|---|
| 알림창의 마법: alert, confirm, prompt 제대로 활용하기 - 코드카인 티스토리 (0) | 2025.01.23 |