Frontend/javaScript

JavaScript μ½”λ“œ μ‹€ν–‰ μˆœμ„œ & μ‹€ν–‰ 타이밍 μ œμ–΄

dddzr 2025. 4. 6. 21:37

πŸ“Œ JavaScript μ½”λ“œ μ‹€ν–‰ μˆœμ„œ & μ‹€ν–‰ 타이밍 μ œμ–΄ 방법

JavaScriptλŠ” λΈŒλΌμš°μ €μ—μ„œ HTML을 ν•΄μ„ν•˜λ©΄μ„œ μ‹€ν–‰λœλ‹€! 그런데 μ½”λ“œμ˜ μ‹€ν–‰ μˆœμ„œλ₯Ό 잘λͺ» μ΄ν•΄ν•˜λ©΄ μ˜ˆμƒκ³Ό λ‹€λ₯΄κ²Œ λ™μž‘ν•˜κ±°λ‚˜ 였λ₯˜κ°€ λ°œμƒν•  μˆ˜λ„ μžˆλ‹€. 😡

κ·Έλž˜μ„œ JavaScript의 μ‹€ν–‰ μˆœμ„œμ™€ μ‹€ν–‰ 타이밍을 μ œμ–΄ν•˜λŠ” 방법을 μ •λ¦¬ν•΄λ³΄μ•˜λ‹€.

βœ… 1. JavaScript μ½”λ“œ μ‹€ν–‰ μˆœμ„œ

JavaScriptλŠ” HTML을 μœ„μ—μ„œ μ•„λž˜λ‘œ ν•΄μ„ν•˜λ©΄μ„œ μ‹€ν–‰λœλ‹€.

 

πŸ”Ή 기본적인 μ‹€ν–‰ 흐름

1️⃣ HTML(DOM) μœ„μ—μ„œ μ•„λž˜λ‘œ 해석
2️⃣ <script> νƒœκ·Έλ₯Ό λ§Œλ‚˜λ©΄ μ¦‰μ‹œ μ‹€ν–‰ (동기 μ‹€ν–‰)
3️⃣ $(document).ready() → DOM이 μ™„μ „νžˆ λ‘œλ“œλœ ν›„ μ‹€ν–‰
4️⃣ window.onload → λͺ¨λ“  λ¦¬μ†ŒμŠ€(CSS, 이미지 λ“±) λ‘œλ”© ν›„ μ‹€ν–‰
5️⃣ 이벀트 λ¦¬μŠ€λ„ˆ(pageshow, click λ“±) μ‹€ν–‰

 

πŸ“– μ‹€ν–‰ μˆœμ„œ 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <script>
        console.log("1️⃣ head λ‚΄λΆ€ 슀크립트 μ‹€ν–‰");
    </script>
</head>
<body>
    <script>
        console.log("2️⃣ body λ‚΄λΆ€ script μ‹€ν–‰");
    </script>

    <script src="jquery.js"></script>
    <script>
        $(document).ready(function () {
            console.log("3️⃣ document ready μ‹€ν–‰ (DOM μ™„μ„± ν›„)");
        });

        window.onload = function () {
            console.log("4️⃣ window.onload μ‹€ν–‰ (이미지, CSS λ“± λͺ¨λ“  λ‘œλ”© ν›„)");
        };

        window.addEventListener("pageshow", function () {
            console.log("5️⃣ pageshow μ‹€ν–‰ (μƒˆλ‘œκ³ μΉ¨ λ˜λŠ” μΊμ‹œμ—μ„œ 볡원 μ‹œ)");
        });
    </script>
</body>
</html>

 

πŸ”Ή μ‹€ν–‰ κ²°κ³Ό

1️⃣ head λ‚΄λΆ€ 슀크립트 μ‹€ν–‰

2️⃣ body λ‚΄λΆ€ script μ‹€ν–‰

3️⃣ document ready μ‹€ν–‰ (DOM μ™„μ„± ν›„)

4️⃣ window.onload μ‹€ν–‰ (이미지, CSS λ“± λͺ¨λ“  λ‘œλ”© ν›„)

5️⃣ pageshow μ‹€ν–‰ (μƒˆλ‘œκ³ μΉ¨ λ˜λŠ” μΊμ‹œμ—μ„œ 볡원 μ‹œ)

 

βœ… 2. JavaScript μ‹€ν–‰ μˆœμ„œ μ œμ–΄ 방법

JavaScript의 μ‹€ν–‰ μˆœμ„œλ₯Ό μ‘°μ •ν•˜κ³  싢을 λ•ŒλŠ” λ‹€μŒ 방법을 μ‚¬μš©ν•  수 μžˆμ–΄. 😊

πŸ”Ήμ¦‰μ‹œ μ‹€ν–‰ ν•¨μˆ˜(IIFE)

ν•œ 번만 μ‹€ν–‰ν•΄μ•Ό ν•˜κ±°λ‚˜ κ°€μž₯ λ¨Όμ € μ‹€ν–‰ν•΄μ•Ό ν•˜λŠ” μ½”λ“œμ— μ‚¬μš©!

  • ν•¨μˆ˜ μ„ μ–Έκ³Ό λ™μ‹œμ— μ‹€ν–‰!
  • μ „μ—­ λ³€μˆ˜ μ˜€μ—Όμ„ 방지할 수 있음
  • <head>μ—μ„œ μ‹€ν–‰ν•˜λ©΄ λͺ¨λ“  JavaScript μ½”λ“œ 쀑 κ°€μž₯ λ¨Όμ € μ‹€ν–‰ κ°€λŠ₯!

 

πŸ“– μ¦‰μ‹œ μ‹€ν–‰ ν•¨μˆ˜ 예제

(function () {
    console.log("μ¦‰μ‹œ μ‹€ν–‰ ν•¨μˆ˜ μ‹€ν–‰!");
})();

 

πŸ”ΉsetTimeout() & setInterval()

νŠΉμ • μ‹œκ°„ ν›„ μ‹€ν–‰ν•˜κ±°λ‚˜ 반볡 μ‹€ν–‰ν•  λ•Œ μ‚¬μš©!

 

πŸ“– 예제 (1초 ν›„ μ‹€ν–‰)

setTimeout(function() {
    console.log("1초 ν›„ μ‹€ν–‰!");
}, 1000);

 

πŸ“– 예제 (1μ΄ˆλ§ˆλ‹€ 반볡 μ‹€ν–‰)

setInterval(function() {
    console.log("1μ΄ˆλ§ˆλ‹€ μ‹€ν–‰!");
}, 1000);

 

πŸ”Ή Promise & async/await

비동기 처리λ₯Ό μ œμ–΄!

 

πŸ“– 예제 (비동기 API 호좜 ν›„ μ‹€ν–‰)

fetch("https://api.example.com/data")
    .then(response => response.json())
    .then(data => console.log("데이터 λ°›μ•„μ˜΄!", data))
    .catch(error => console.error("μ—λŸ¬ λ°œμƒ", error));

 

πŸ“– async/await 예제 (가독성이 더 μ’‹μŒ!)

async function fetchData() {
    try {
        let response = await fetch("https://api.example.com/data");
        let data = await response.json();
        console.log("데이터 λ°›μ•„μ˜΄!", data);
    } catch (error) {
        console.error("μ—λŸ¬ λ°œμƒ", error);
    }
}
fetchData();

 

βœ… 3. μ‹€ν–‰ μˆœμ„œλ₯Ό ν™œμš©ν•œ μ΅œμ ν™” 예제

πŸ“– μƒˆλ‘œκ³ μΉ¨ 감지 ν›„ λ¦¬λ‹€μ΄λ ‰νŠΈ (IIFE ν™œμš©)

(function () {
    if (performance.getEntriesByType("navigation")[0].type === "reload") {
        console.log("μƒˆλ‘œκ³ μΉ¨ 감지됨!");
        window.location.href = "/home";
    }
})();

 

πŸ“–  API 호좜 ν›„ λ‹€μŒ μž‘μ—… μ‹€ν–‰ (async/await ν™œμš©)

async function getUserData() {
    let userData = await fetchUserInfo();
    console.log("μœ μ € 데이터 확인 ν›„ μ‹€ν–‰!");
}

 

🎯 정리

βœ… JavaScript μ‹€ν–‰ μˆœμ„œ 

1️⃣ λΈŒλΌμš°μ €κ°€ HTML을 μœ„μ—μ„œ μ•„λž˜λ‘œ ν•΄μ„ν•˜λ©° <script> μ‹€ν–‰
2️⃣ document.ready() → DOM이 μ™„μ„±λœ ν›„ μ‹€ν–‰
3️⃣ window.onload → λͺ¨λ“  λ¦¬μ†ŒμŠ€(이미지, CSS) λ‘œλ”© ν›„ μ‹€ν–‰

 

βœ… JavaScript μ‹€ν–‰ μˆœμ„œ μ œμ–΄ 방법

  • μ¦‰μ‹œ μ‹€ν–‰ ν•¨μˆ˜(IIFE): κ°€μž₯ λ¨Όμ € μ‹€ν–‰λ˜λ„λ‘ μ„€μ • κ°€λŠ₯
  • setTimeout / setInterval: 일정 μ‹œκ°„ ν›„ μ‹€ν–‰
  • Promise & async/await: 비동기 μž‘μ—…μ„ 효율적으둜 처리

'Frontend > javaScript' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

JSPμ—μ„œ JavaScript λͺ¨λ“ˆ μ‚¬μš©ν•˜κΈ°  (0) 2025.04.06
[JavaScript] ν˜Έμ΄μŠ€νŒ…(Hoisting)  (0) 2024.07.05
iframe sesstion timeout  (0) 2023.10.13
[javaScript] file-saver 파일 λ‹€μš΄λ‘œλ“œ  (0) 2023.10.02
checklist (vue3)  (0) 2023.07.20

'Frontend/javaScript'의 λ‹€λ₯ΈκΈ€

  • ν˜„μž¬κΈ€JavaScript μ½”λ“œ μ‹€ν–‰ μˆœμ„œ & μ‹€ν–‰ 타이밍 μ œμ–΄

κ΄€λ ¨κΈ€

λŒ“κΈ€

ν‹°μŠ€ν† λ¦¬νˆ΄λ°”