[JS] 웹 페이지의 생명주기와 주요 이벤트 알아보기

❓ 웹 페이지 생명주기

웹 페이지의 생명주기는 HTML 문서를 로드하여 DOM 을 생성하고, 리소스(이미지, 스타일 시트 등)를 불러와 화면을 완성한 후, 페이지를 떠날 때까지 이어지는 일련의 과정을 의미한다.

 

🌱 주요 생명주기 단계

1. HTML 로드 시작: 브라우저가 HTML 문서를 다운로드하고 파싱 시작
2. DOM 생성: HTML 파싱이 완료되고 DOM(Document Object Model) 트리가 완성됨.
3. 리소스 로드: CSS, 이미지, JS 등 외부 리소스가 로드됨.
4. 페이지 인터랙션: 페이지가 사용자와 상호작용을 시작함.
5. 페이지 언마운트: 사용자가 페이지를 떠나거나 브라우저 탭이 닫히면서 페이지가 언마운트됨.

 

---

🔍 생명주기 단계별 주요 이벤트

1️⃣ DOM 생성: DOMContentLoaded

DOMContentLoaded 이벤트는 HTML 문서를 모두 파싱하여 DOM 트리를 완성했을 때 발생한다. 이 시점에는 외부 리소스(이미지, CSS 등)가 모두 로드되지 않았을 수 있다.

 

사용 사례

• DOM 이 준비된 시점에 실행해야 할 초기화 작업
• 리소스 로드가 필요 없는 작업

코드 예시

document.addEventListener("DOMContentLoaded", () => {
    console.log("DOM 생성 완료!");
    const button = document.querySelector("#myButton");
    button.addEventListener("click", () => alert("클릭했습니다!"));
});

 

 

2️⃣ 리소스 로드 완료: load

load 이벤트는 HTML, CSS, JS, 이미지 등 모든 리소스를 로드한 후 발생한다. DOM 뿐만 아니라 리소스까지 모두 준비되었으므로, 리소스 의존적인 작업에 적합하다.

 

사용 사례

• 이미지 크기 계산
• 모든 리소스를 사용해야 하는 작업

코드 예시

window.onload = () => {
    console.log("모든 리소스가 로드되었습니다.");
    const img = document.querySelector("#myImage");
    console.log(`이미지 크기: ${img.width} x ${img.height}`);
};

 

 

3️⃣ 페이지 이탈: beforeunload

beforeunload 이벤트는 사용자가 페이지를 떠나기 직전에 발생한다. 사용자가 페이지를 떠나기 전에 경고를 띄우거나 데이터를 저장할 때 유용하다.

 

사용 사례

• 중요한 데이터가 저장되지 않았을 때 경고 표시
• 페이지 이탈 시 데이터 백업

코드 예시

window.addEventListener("beforeunload", (event) => {
    event.preventDefault();
    event.returnValue = ""; // 경고 메시지 표시
});

 

 

4️⃣ 페이지 언마운트: unload (❌ 지원 중단)

unload 이벤트는 페이지가 완전히 언마운트되거나 리소스가 해제될 때 발생한다. 페이지가 닫히기 전에 서버와의 연결을 종료하거나 데이터를 전송하는 데 활용된다.

 

사용 사례

• 세션 종료 처리
• 서버에 로그 전송

코드 예시

window.addEventListener("unload", () => {
    console.log("페이지 언마운트!");
    navigator.sendBeacon("/log", JSON.stringify({ action: "unload" }));
});

 

---

📌 생명주기 이벤트 비교

이벤트	발생 시점	주요 목적	특징
DOMContentLoaded	DOM 트리가 완성된 직후	초기화 작업	리소스는 모두 로드되지 않을 수 있음
load	모든 리소스가 로드된 후	리소스 의존 작업 수행	실행 시점이 상대적으로 늦음
beforeunload	페이지를 떠나기 직전	경고 표시, 데이터 저장	브라우저가 표시하는 기본 메시지만 가능
unload	페이지가 완전히 언마운트 된 후	서버와의 연결 종료, 리소스 정리	비동기 작업이 보장되지 않음

 

🚀 예시

1️⃣ DOM 트리 완성 후 초기화 (DOMContentLoaded)

document.addEventListener("DOMContentLoaded", () => {
    // 1. 버튼 초기화
    const button = document.querySelector("#myButton");
    button.textContent = "클릭하세요!";
    button.style.backgroundColor = "lightblue";

    // 2. 이벤트 핸들러 등록
    button.addEventListener("click", () => {
        alert("버튼이 클릭되었습니다!");
    });

    console.log("DOM 생성 완료! 모든 초기화 작업이 준비되었습니다.");
});

실행 흐름

1. HTML 문서를 파싱하여 DOM 트리가 완성되면 이벤트가 실행됨
2. 버튼의 텍스트를 설정하고 색상을 변경
3. 버튼 클릭 시 실행된 이벤트 핸들러를 등록

 

2️⃣ 리소스 로드 후 작업 (load)

window.onload = () => {
    // 1. 이미지 크기 확인
    const img = document.querySelector("#mainImage");
    console.log(`이미지 크기: ${img.offsetWidth}px x ${img.offsetHeight}px`);

    // 2. 페이지 로드 후 애니메이션 추가
    const banner = document.querySelector("#banner");
    banner.style.opacity = "1";
    banner.style.transition = "opacity 2s ease-in-out";

    console.log("모든 리소스가 로드되었습니다.");
};

실행 흐름

1. 모든 리소스가 완전히 로드된 후 실행됨
2. 이미지의 크기를 계산하여 로그로 출력
3. 배너 요소에 애니메이션 효과를 추가

 

3️⃣ 페이지 이탈 방지 (beforeunload)

window.addEventListener("beforeunload", (event) => {
    // 1. 폼 데이터 작성 중 경고 표시
    const isFormDirty = document.querySelector("#form").classList.contains("dirty");
    if (isFormDirty) {
        event.preventDefault();
        event.returnValue = ""; // 이 코드는 경고 메시지 표시를 활성화합니다.
        console.log("사용자가 페이지를 떠나려고 합니다.");
    }
});

실행 흐름

1. 사용자가 페이지를 떠날 때 이벤트가 발생
2. #form 요소가 변경되었는지 확인
3. 폼 데이터가 작성 중이라면 브라우저가 경고 메시지를 표시

 

4️⃣ 페이지 언마운트 작업 (unload)

window.addEventListener("unload", () => {
    // 1. 서버에 로그 전송
    const data = { action: "page_unload", timestamp: new Date().toISOString() };
    navigator.sendBeacon("/api/log", JSON.stringify(data));

    // 2. 세션 종료 메시지
    console.log("페이지가 언마운트되었습니다. 서버 로그가 전송되었습니다.");
});

실행 흐름

1. 사용자가 페이지를 떠날 때 이벤트 실행
2. navigator.sendBeacon 을 사용해 서버로 데이터를 전송
3. 비동기 작업을 수행하는 경우 보장이 어려우므로, sendBeacon 사용을 권장

 

---

📖 정리

• DOMContentLoaded: DOM 트리가 완성된 직후 실행. 초기화 작업에 적합.
• load: 모든 리소스가 로드된 후 실행. 이미지 크기 계산 등 리소스 의존 작업에 사용.
• beforeunload: 페이지를 떠나기 직전에 실행. 경고 메시지 표시나 데이터 백업에 활용.
• unload: 페이지 언마운트 시 실행. 서버 로그 전송 및 리소스 정리 작업에 사용.

 

---

💡 참고 자료

https://developer.mozilla.org/ko/docs/Web/API/Document/DOMContentLoaded_event

Window: DOMContentLoaded 이벤트 - Web API | MDN

https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

Window: load event - Web APIs | MDN

https://developer.mozilla.org/ko/docs/Web/API/Window/beforeunload_event

Window: beforeunload 이벤트 - Web API | MDN

https://developer.mozilla.org/ko/docs/Web/API/Window/unload_event

Window: unload 이벤트 - Web API | MDN