13.1.1 setTimeout 사용하기 - 시간을 조절하는 똑똑한 알람시계

13. 시간을 다루는 마법 (비동기 처리)/13.1 시간 지연 함수들

13.1.1 setTimeout 사용하기 - 시간을 조절하는 똑똑한 알람시계

thejavascript4kids 2025. 7. 17. 03:11

📘 13.1.1 setTimeout 사용하기 - 시간을 조절하는 똑똑한 알람시계

시간의 흐름을 담는 그릇

여러분, 안녕하세요. 오늘은 시간이라는 신비로운 강물에 대해 이야기해볼까 해요. 우리가 지금까지 배운 JavaScript 코드들을 떠올려보세요. 버튼을 누르면 즉시 반응하고, 계산을 요청하면 바로 답을 내놓았죠. 마치 질문하자마자 대답하는 재빠른 친구 같았어요.

하지만 때로는 천천히, 잠시 숨을 고르며 기다리는 시간이 필요할 때가 있어요. "3초만 기다렸다가 이 일을 해줄래?"라고 부탁하고 싶을 때 말이에요. 바로 이런 순간에 setTimeout이라는 고마운 도구가 우리 곁에 있답니다.

🧠 새로운 단어들과 친해지기

시간을 다루는 코딩에서 알아둘 말들을 정리해볼게요.

단어	의미
setTimeout	정해진 시간이 지난 후에 코드를 실행하는 JavaScript 기능이에요.
밀리초 (ms)	1초를 1000으로 나눈 아주 작은 시간 단위예요.
나중에 호출될 기능	나중에 특정 시점에 실행될 기능을 말해요.
시간을 두고 실행하기	코드가 순서대로가 아니라 시간에 따라 실행되는 방식이에요.

setTimeout은 '설정하다'라는 뜻의 set과 '시간 제한'이라는 뜻의 timeout이 만나 이루어진 이름이에요. 특정 시간 후에 무언가를 실행하도록 설정한다는 의미를 담고 있어요.

✨ setTimeout의 핵심 개념

대부분의 코드는 차례대로, 위에서 아래로 흘러가요. 하지만 우리가 사는 세상에는 기다림이 있어요. 빵이 구워지는 시간, 차가 우려지는 시간, 마음이 가라앉는 시간들이요.

setTimeout은 이런 기다림을 코드 안에 자연스럽게 녹여낼 수 있게 해주는 도구예요. "지금이 아니라 잠시 후에 이 일을 해줘"라고 컴퓨터에게 말할 수 있게 해주는 거죠.

개인 비서와 함께하는 시간 관리 이야기

setTimeout을 이해하기 위해 하나의 이야기를 들려드릴게요.

상상해보세요. 여러분에게 매우 세심한 개인 비서가 있다고 해요. 이 비서에게 "20분 후에 친구에게 전화를 걸어달라"고 부탁하면, 비서는 즉시 시계를 보며 알람을 설정해요. 하지만 그 20분 동안 무작정 기다리고만 있지는 않아요. 다른 업무들을 처리하다가, 정확히 20분이 되는 순간 약속을 지키는 거죠.

setTimeout도 이와 똑같아요. 여러분이 setTimeout(기능, 3000)이라고 말하면, JavaScript는 "3초 후에 이 일을 하겠습니다"라고 약속하며 시계를 맞춰요. 그리고 그 3초 동안 다른 코드들을 계속 실행하다가, 약속한 시간이 되면 정확히 그 일을 실행하는 거예요.

이런 방식 덕분에 웹 페이지는 여러 가지 일을 동시에 처리할 수 있어요. 마치 숙련된 요리사가 여러 요리를 동시에 하면서도 각각의 시간을 놓치지 않는 것처럼요.

🎯 setTimeout을 사용하는 이유

그렇다면 언제 setTimeout을 사용하게 될까요?

사용자에게 메시지를 보여준 후 자연스럽게 사라지게 하고 싶을 때가 있어요. "저장되었습니다"라는 알림을 3초간 보여준 후 조용히 사라지게 하거나, "잠시만 기다려주세요"라는 메시지를 적절한 시간 후에 다른 내용으로 바꿀 수 있어요.

게임이나 퀴즈에서 시간의 흐름을 만들고 싶을 때도 유용해요. "5초 후 게임 시작!", "10초 안에 답하세요!" 같은 카운트다운을 만들거나, 일정 시간이 지나면 자동으로 다음 단계로 넘어가는 기능을 만들 수 있어요.

화면에 부드러운 움직임과 변화를 만들 때도 활용할 수 있어요. 요소가 서서히 나타나거나 사라지는 효과, 하나씩 차례로 등장하는 요소들, 깜빡이는 효과 등을 시간 간격을 두고 구현할 수 있어요.

사용자의 행동에 자연스럽게 반응하는 지연 효과를 만들 때도 좋아요. 검색창에서 사용자가 타이핑을 멈춘 후 잠깐 기다렸다가 자동 완성을 보여주거나, 마우스가 버튼 위에 머물렀을 때 잠시 후 도움말을 표시하는 등의 섬세한 기능들을 만들 수 있어요.

⚙️ 기본 사용법 배우기

setTimeout의 기본 문법은 단순하지만 정확히 이해하는 것이 중요해요.

setTimeout(실행할기능, 지연시간);

각 부분의 의미:

실행할기능: 나중에 실행하고 싶은 기능이에요.
지연시간: 몇 밀리초 후에 실행할지를 나타내는 숫자예요. (1초 = 1000밀리초)

실제 예시:

// 3초 후에 메시지 출력
setTimeout(function() {
    console.log("3초가 지났어요!");
}, 3000);

// 화살표 기능 사용 (더 간단한 방법)
setTimeout(() => {
    console.log("안녕하세요!");
}, 2000);

시간 단위 이해하기:

밀리초는 매우 작은 시간 단위예요. 일상의 시간을 밀리초로 바꾸는 법을 알아두면 유용해요.

1초 = 1000밀리초
2초 = 2000밀리초
0.5초 = 500밀리초
10초 = 10000밀리초

🧪 직접 해보면서 배우기

이제 실제 예시를 통해서 setTimeout이 어떻게 작동하는지 자세히 살펴볼게요.

🔹 첫 번째 예시: 기본적인 메시지 지연 출력

첫 번째 예시에서는 가장 기본적인 setTimeout 사용법을 배워볼게요.

// 3초 후에 실행될 기능을 미리 만들어요
function showWelcomeMessage() {
    console.log("환영해요! 3초가 지났어요!"); // 콘솔에 환영 메시지
    alert("안녕하세요, 반가워요!"); // 화면에 인사말 띄우기
}

// 3초(3000밀리초) 후에 showWelcomeMessage 기능을 실행하도록 예약
setTimeout(showWelcomeMessage, 3000);

// 이 메시지들은 바로 출력돼요
console.log("먼저 이 메시지가 나타날 거예요"); // 바로 실행
console.log("타이머가 설정되었어요. 3초만 기다려보세요!"); // 바로 실행

이 과정을 천천히 살펴보면, 먼저 나중에 실행할 기능을 정의해요. 그다음 setTimeout으로 3초 후에 그 기능을 실행하도록 약속하죠. 마지막의 console.log 문장들은 타이머 설정과 상관없이 즉시 실행돼요.

실행 순서: "먼저 이 메시지가 나타날 거예요" → "타이머가 설정되었어요..." → (3초 기다림) → "환영해요! 3초가 지났어요!"

🔹 두 번째 예시: 화살표 기능을 사용한 간단한 방법

두 번째 예시에서는 기능을 따로 만들지 않고 바로 화살표 기능을 사용하는 방법을 배워볼게요.

// 2초 후에 실행될 코드를 화살표 기능으로 바로 작성
setTimeout(() => {
    console.log("2초가 지났어요!"); // 2초 후에 실행될 첫 번째 메시지
    console.log("화살표 기능을 사용해서 더 간단해요!"); // 2초 후에 실행될 두 번째 메시지
}, 2000);

// 1초 후에 실행될 코드 (더 짧은 시간)
setTimeout(() => {
    console.log("1초 후: 첫 번째 알람이에요!"); // 1초 후에 실행될 메시지
}, 1000);

// 이 메시지는 가장 먼저 출력돼요
console.log("시작! 타이머들이 설정되었어요."); // 바로 실행

이 예시를 통해 화살표 기능의 편리함을 확인할 수 있어요. 간단한 코드라면 따로 기능을 만들 필요 없이 setTimeout 안에서 바로 작성할 수 있어요.

실행 순서: "시작! 타이머들이 설정되었어요." → (1초 기다림) → "1초 후: 첫 번째 알람이에요!" → (1초 더 기다림) → "2초가 지났어요!"

🔹 세 번째 예시: 카운트다운 효과 만들기

세 번째 예시에서는 여러 개의 setTimeout을 사용해서 카운트다운 효과를 만들어볼게요.

// 게임 시작 카운트다운을 만들어봐요!
console.log("게임 시작 준비!"); // 바로 실행

// 1초 후에 "3" 출력
setTimeout(() => {
    console.log("3!"); // 1초 후 실행
}, 1000);

// 2초 후에 "2" 출력  
setTimeout(() => {
    console.log("2!"); // 2초 후 실행
}, 2000);

// 3초 후에 "1" 출력
setTimeout(() => {
    console.log("1!"); // 3초 후 실행
}, 3000);

// 4초 후에 게임 시작 메시지 출력
setTimeout(() => {
    console.log("게임 시작! 🎮"); // 4초 후 실행
    console.log("즐거운 게임 되세요!"); // 4초 후 실행
}, 4000);

console.log("카운트다운이 곧 시작돼요..."); // 바로 실행

이 예시에서는 여러 개의 타이머를 동시에 설정하여 순차적인 효과를 만들어내요. 각각의 setTimeout은 독립적으로 작동하지만, 시간을 조절해서 원하는 순서대로 실행되도록 했어요.

실행 순서: "게임 시작 준비!" → "카운트다운이 곧 시작돼요..." → (1초) → "3!" → (1초) → "2!" → (1초) → "1!" → (1초) → "게임 시작! 🎮"

🔄 setTimeout 사용하는 순서 정리하기

지금까지 학습한 setTimeout의 사용 단계를 자연스럽게 정리해볼게요.

첫 번째 단계는 실행할 작업 준비예요. 나중에 실행하고 싶은 코드를 기능으로 만들거나 화살표 기능으로 준비해야 해요. 이때 어떤 작업을 언제 실행할지 미리 계획하는 것이 중요해요.

두 번째는 시간 계산 단계예요. 몇 초 후에 실행할지 결정하고, 이를 밀리초 단위로 바꿔요. 1초는 1000밀리초라는 것을 기억하고, 원하는 지연 시간을 정확히 계산해야 해요.

세 번째는 setTimeout 호출 단계예요. setTimeout(기능, 시간) 형태로 타이머를 설정해요. 이때 기능 이름 뒤에 괄호를 붙이지 않도록 주의해야 해요.

네 번째는 즉시 실행될 코드 처리 단계예요. setTimeout 설정 후에 바로 실행되어야 하는 코드들이 있다면 함께 작성해요. 이런 코드들은 타이머와 상관없이 즉시 실행돼요.

마지막 단계는 예약된 실행이에요. 설정된 시간이 지나면 약속했던 기능이 자동으로 실행돼요. 이 과정은 자동으로 일어나므로 별도로 신경 쓸 필요가 없어요.

🏢 이야기로 다시 배우기: 우리 학교의 방송 시스템

지금까지 배운 내용을 하나의 이야기로 다시 정리해볼까요?

우리 학교에는 시간을 다루는 특별한 방송 시스템이 있어요. 이 시스템의 이름은 '타이머 방송 시스템'예요. 선생님들이 "3분 후에 급식 시간 안내방송을 해주세요"라고 요청하면, 방송실에서는 즉시 타이머를 설정해요.

하지만 방송실에서는 타이머를 설정한 후 가만히 기다리지 않아요. 대신 다른 선생님들의 요청을 계속 처리해요. "1분 후에 수업 종료 벨을 울려주세요", "5분 후에 청소 시간 안내를 해주세요" 같은 다양한 요청들을 동시에 받아서 각각의 타이머를 설정하죠.

시간이 흐르면서 타이머들이 하나씩 완성돼요. 1분짜리 타이머가 먼저 끝나면 수업 종료 벨을 울리고, 3분짜리가 끝나면 급식 시간 안내방송을 하고, 5분짜리가 끝나면 청소 시간 안내를 해요. 모든 일이 정확한 시간에 자동으로 처리되는 거죠.

setTimeout도 정확히 이와 같아요. JavaScript의 타이머 시스템이 여러분의 "나중에 할 일"을 예약받아서 정확한 시간에 실행해주는 편리한 시스템인 거예요. 여러 개의 타이머를 동시에 설정해도 각각이 정확한 시간에 작동하는 놀라운 기능이랍니다!

🧠 자주 하는 실수와 주의할 점

setTimeout을 사용할 때 주의해야 할 몇 가지 실수들을 미리 알아두면 더 안전하게 사용할 수 있어요.

❌ 실수 1: 기능을 호출해버리기

// 잘못된 방법 - 기능을 바로 실행해버림
function sayHello() {
    console.log("안녕하세요!");
}
setTimeout(sayHello(), 2000); // 괄호가 있으면 즉시 실행돼요!

// 올바른 방법 - 기능 자체를 전달
setTimeout(sayHello, 2000); // 괄호 없이 기능 이름만 전달

이런 실수가 발생하는 이유는 기능 이름 뒤에 괄호 ()를 붙이면 그 즉시 기능이 실행되기 때문이에요. setTimeout에는 나중에 실행할 기능 자체를 전달해야 하는데, 실행 결과를 전달해버리면 원하는 대로 작동하지 않아요.

❌ 실수 2: 시간 단위를 잘못 이해하기

// 잘못된 이해 - 초 단위로 생각하기
setTimeout(() => {
    console.log("3초 후 실행");
}, 3); // 이건 3밀리초! 거의 즉시 실행돼요

// 올바른 방법 - 밀리초 단위로 정확히 계산
setTimeout(() => {
    console.log("3초 후 실행");
}, 3000); // 3초 = 3000밀리초

setTimeout의 시간은 항상 밀리초 단위예요. 1초를 원한다면 1000을 써야 하고, 0.5초를 원한다면 500을 써야 해요. 이 점을 놓치면 예상과 전혀 다른 타이밍에 코드가 실행될 수 있어요.

❌ 실수 3: 즉시 실행 코드를 setTimeout 안에 넣기

// 비효율적인 방법
setTimeout(() => {
    console.log("바로 보여줄 메시지"); // 이건 바로 보여줘야 함
    console.log("3초 후 보여줄 메시지"); // 이것만 지연시키면 됨
}, 3000);

// 효율적인 방법
console.log("바로 보여줄 메시지"); // 즉시 실행
setTimeout(() => {
    console.log("3초 후 보여줄 메시지"); // 지연 실행
}, 3000);

모든 코드를 setTimeout 안에 넣을 필요는 없어요. 즉시 실행되어야 하는 코드와 지연되어야 하는 코드를 구분해서 적절히 배치하는 것이 중요해요.

✏️ 연습문제로 개념 다지기

한 편의 시를 읽듯, 천천히 문제를 풀어보세요. 코드는 우리의 생각을 담는 그릇이니까요.

Ex1) 5초 후에 "시간이 다 됐어요!"라는 메시지를 콘솔에 출력해보자

// 5초 후에 메시지를 출력하는 코드를 작성해요
setTimeout(() => {
    console.log("시간이 다 됐어요!"); // 5초 후에 실행될 메시지
}, 5000); // 5초 = 5000밀리초

이 연습을 통해 setTimeout의 가장 기본적인 사용법을 익힐 수 있어요.

Ex2) 1초 후에 "첫 번째", 3초 후에 "두 번째" 메시지를 각각 출력해보자

// 서로 다른 시간에 실행되는 두 개의 타이머를 설정해요
setTimeout(() => {
    console.log("첫 번째"); // 1초 후에 실행될 첫 번째 메시지
}, 1000); // 1초 = 1000밀리초

setTimeout(() => {
    console.log("두 번째"); // 3초 후에 실행될 두 번째 메시지
}, 3000); // 3초 = 3000밀리초

이 문제는 여러 개의 타이머를 동시에 사용하는 방법을 연습하는 데 도움이 돼요.

Ex3) 기능을 미리 정의한 후, 2초 후에 그 기능이 실행되도록 해보자

// 먼저 실행할 기능을 정의해요
function greetUser() {
    console.log("안녕하세요, 반가워요!"); // 기능이 실행될 때 출력될 메시지
}

// 2초 후에 그 기능이 실행되도록 설정해요
setTimeout(greetUser, 2000); // 기능 이름만 전달 (괄호 없이)

이 연습문제를 통해 기능을 따로 정의하고 setTimeout에서 사용하는 방법을 배울 수 있어요.

🤔 심화 문제로 실력 확인하기

기본 연습을 마쳤다면, 이제 조금 더 깊이 있는 문제들을 통해 setTimeout에 대한 이해를 확인해보겠어요.

Q1. 다음 코드의 실행 순서를 예측해보세요.

console.log("A");
setTimeout(() => console.log("B"), 1000);
console.log("C");

정답: A → C → B 순서로 출력돼요.

해설: setTimeout은 1초 후에 실행되므로, 먼저 "A"가 출력되고, 바로 이어서 "C"가 출력돼요. 그리고 1초가 지난 후에 "B"가 출력돼요. 이는 setTimeout이 시간 간격을 두고 작동하기 때문이에요.

Q2. setTimeout에서 시간을 0으로 설정하면 즉시 실행될까요?

정답: 아니요, 즉시 실행되지 않아요.

해설: setTimeout은 시간이 0이어도 현재 실행 중인 모든 코드가 끝난 후에 실행돼요. 즉, 다른 코드들이 모두 처리된 후에 실행되므로, 실제로는 즉시 실행되지 않아요.

🔙 지난 시간 복습하기 (12단원 - 이벤트 처리)

13단원을 시작하기 전에, 지난 시간에 배운 이벤트 처리 내용을 복습해볼까요?

복습 문제 1: 이벤트 리스너 추가하기

다음 중 버튼에 클릭 이벤트를 추가하는 올바른 방법은?

let button = document.getElementById("myButton");

// A) button.onclick = function() { console.log("클릭됨"); }
// B) button.addEventListener("click", function() { console.log("클릭됨"); })  
// C) 둘 다 가능
// D) button.addEvent("click", function() { console.log("클릭됨"); })

정답: C) 둘 다 가능해요! 하지만 addEventListener가 더 좋은 방법이에요.

설명: 12단원에서 배운 이벤트 리스너 추가 방법이에요. addEventListener는 여러 개의 이벤트를 추가할 수 있고 더 유연해요.

복습 문제 2: 이벤트 전파 막기

다음 코드에서 빈칸에 들어갈 올바른 코드는?

button.addEventListener("click", function(event) {
    console.log("버튼 클릭됨");
    // 부모 요소로 이벤트가 전파되지 않도록 막으려면?
    event.______();
});

정답: stopPropagation

설명: 12단원에서 배운 이벤트 전파 막기 방법이에요. event.stopPropagation()을 사용하면 이벤트가 부모 요소로 전파되지 않아요. 오늘 배운 setTimeout과 함께 사용하면 클릭 후 일정 시간 뒤에 다른 동작을 하는 기능을 만들 수 있어요.

지금까지 setTimeout의 모든 특성과 활용법을 자세히 알아보았어요. 이 기능은 시간의 흐름을 프로그래밍에 넣을 수 있게 해주는 강력한 도구예요. 마치 똑똑한 알람시계처럼, 미래의 특정 시점에 원하는 일이 자동으로 일어나도록 만들어주는 놀라운 기능이랍니다!

✅ 학습 완료 체크리스트

이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!

학습 내용	이해했나요?
setTimeout의 기본 개념	✅
기본 사용법과 문법	✅
개인 비서 비유 이해하기	✅
자주 하는 실수들	✅
실전 예제 활용하기	✅

🎯 추가 연습 문제들

조금 더 연습하고 싶은 분들을 위한 추가 문제들이에요!

추가 문제 1. 5초 후에 "시간이 다 됐어요!"라는 메시지를 출력하는 코드를 작성하세요.

setTimeout(() => {
    console.log("시간이 다 됐어요!");
}, 5000);

설명: 5초는 5000밀리초이므로 5000을 사용해요.

추가 문제 2. 1초 후에 "첫 번째", 3초 후에 "두 번째" 메시지를 출력하세요.

setTimeout(() => {
    console.log("첫 번째");
}, 1000);

setTimeout(() => {
    console.log("두 번째");
}, 3000);

설명: 각각 다른 시간에 실행되도록 두 개의 setTimeout을 사용해요.

추가 문제 3. 함수를 만들어서 2초 후에 "안녕하세요!"를 출력하세요.

function greet() {
    console.log("안녕하세요!");
}

setTimeout(greet, 2000);

설명: 함수를 미리 정의하고 setTimeout에서 함수 이름만 전달해요.

추가 문제 4. 다음 코드의 실행 순서는 어떻게 될까요?

console.log("A");
setTimeout(() => console.log("B"), 1000);
console.log("C");

정답: A → C → B
해설: setTimeout은 1초 후에 실행되므로, A와 C가 먼저 출력되고 1초 후에 B가 출력됩니다.

추가 문제 5. 다음 코드에서 잘못된 부분을 찾아보세요.

setTimeout(console.log("Hello"), 2000);

정답: console.log("Hello")를 바로 실행했어요.
해설: 함수를 넘겨줘야 하는데 실행 결과를 넘겨줬습니다. setTimeout(() => console.log("Hello"), 2000)이 올바릅니다.

📂 마무리 정보

오늘 배운 13.1.1 내용이 여러분의 자바스크립트 지식 상자에 잘 저장되었나요? 다음 시간에는 더 재미있는 내용으로 만나요!

기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.

🚀 더 체계적인 JavaScript 학습을 원하신다면?

이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.

📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼

📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작

💻 무료로 학습하러 가기

'13. 시간을 다루는 마법 (비동기 처리) > 13.1 시간 지연 함수들' 카테고리의 다른 글

13.1.2 setInterval 사용하기 - 계속 반복하는 똑똑한 시계 (0)	2025.07.17

현재글13.1.1 setTimeout 사용하기 - 시간을 조절하는 똑똑한 알람시계

초중고등학생 자바스크립트 교재

이 교재는 초등학생부터 성인까지, 누구나 자바스크립트를 쉽게 배우고 스스로 코딩을 즐겁게 경험할 수 있도록 AI와 함께 정성껏 설계하였습니다. 프로그래밍이 처음이신가요? 걱정하지 않으셔도 됩니다.

async_await, 연산자, JavaScript, 모듈, 산술연산자, 논리연산자, 코딩교재, Export, 비교연산자, 자바스크립트, 자바스크립트교재, setTimeout, Import, 초등코딩, 싱글턴패턴, Promise, ES6모듈, 모듈패턴, 비동기, 중등코딩교육,

Today :
Yesterday :

일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

초중고등학생 자바스크립트 교재

13.1.1 setTimeout 사용하기 - 시간을 조절하는 똑똑한 알람시계

📘 13.1.1 setTimeout 사용하기 - 시간을 조절하는 똑똑한 알람시계

시간의 흐름을 담는 그릇

🧠 새로운 단어들과 친해지기

✨ setTimeout의 핵심 개념

개인 비서와 함께하는 시간 관리 이야기

🎯 setTimeout을 사용하는 이유

⚙️ 기본 사용법 배우기

🧪 직접 해보면서 배우기

🔹 첫 번째 예시: 기본적인 메시지 지연 출력

🔹 두 번째 예시: 화살표 기능을 사용한 간단한 방법

🔹 세 번째 예시: 카운트다운 효과 만들기

🔄 setTimeout 사용하는 순서 정리하기

🏢 이야기로 다시 배우기: 우리 학교의 방송 시스템

🧠 자주 하는 실수와 주의할 점

❌ 실수 1: 기능을 호출해버리기

❌ 실수 2: 시간 단위를 잘못 이해하기

❌ 실수 3: 즉시 실행 코드를 setTimeout 안에 넣기

✏️ 연습문제로 개념 다지기

Ex1) 5초 후에 "시간이 다 됐어요!"라는 메시지를 콘솔에 출력해보자

Ex2) 1초 후에 "첫 번째", 3초 후에 "두 번째" 메시지를 각각 출력해보자

Ex3) 기능을 미리 정의한 후, 2초 후에 그 기능이 실행되도록 해보자

🤔 심화 문제로 실력 확인하기

Q1. 다음 코드의 실행 순서를 예측해보세요.

Q2. setTimeout에서 시간을 0으로 설정하면 즉시 실행될까요?

🔙 지난 시간 복습하기 (12단원 - 이벤트 처리)

복습 문제 1: 이벤트 리스너 추가하기

복습 문제 2: 이벤트 전파 막기

✅ 학습 완료 체크리스트

🎯 추가 연습 문제들

추가 문제 1. 5초 후에 "시간이 다 됐어요!"라는 메시지를 출력하는 코드를 작성하세요.

추가 문제 2. 1초 후에 "첫 번째", 3초 후에 "두 번째" 메시지를 출력하세요.

추가 문제 3. 함수를 만들어서 2초 후에 "안녕하세요!"를 출력하세요.

추가 문제 4. 다음 코드의 실행 순서는 어떻게 될까요?

추가 문제 5. 다음 코드에서 잘못된 부분을 찾아보세요.

📂 마무리 정보

'13. 시간을 다루는 마법 (비동기 처리) > 13.1 시간 지연 함수들' 카테고리의 다른 글

'13. 시간을 다루는 마법 (비동기 처리)/13.1 시간 지연 함수들'의 다른글

티스토리툴바

13.1.1 setTimeout 사용하기 - 시간을 조절하는 똑똑한 알람시계

📘 13.1.1 setTimeout 사용하기 - 시간을 조절하는 똑똑한 알람시계

시간의 흐름을 담는 그릇

🧠 새로운 단어들과 친해지기

✨ setTimeout의 핵심 개념

개인 비서와 함께하는 시간 관리 이야기

🎯 setTimeout을 사용하는 이유

⚙️ 기본 사용법 배우기

🧪 직접 해보면서 배우기

🔹 첫 번째 예시: 기본적인 메시지 지연 출력

🔹 두 번째 예시: 화살표 기능을 사용한 간단한 방법

🔹 세 번째 예시: 카운트다운 효과 만들기

🔄 setTimeout 사용하는 순서 정리하기

🏢 이야기로 다시 배우기: 우리 학교의 방송 시스템

🧠 자주 하는 실수와 주의할 점

❌ 실수 1: 기능을 호출해버리기

❌ 실수 2: 시간 단위를 잘못 이해하기

❌ 실수 3: 즉시 실행 코드를 setTimeout 안에 넣기

✏️ 연습문제로 개념 다지기

Ex1) 5초 후에 "시간이 다 됐어요!"라는 메시지를 콘솔에 출력해보자

Ex2) 1초 후에 "첫 번째", 3초 후에 "두 번째" 메시지를 각각 출력해보자

Ex3) 기능을 미리 정의한 후, 2초 후에 그 기능이 실행되도록 해보자

🤔 심화 문제로 실력 확인하기

Q1. 다음 코드의 실행 순서를 예측해보세요.

Q2. setTimeout에서 시간을 0으로 설정하면 즉시 실행될까요?

🔙 지난 시간 복습하기 (12단원 - 이벤트 처리)

복습 문제 1: 이벤트 리스너 추가하기

복습 문제 2: 이벤트 전파 막기

✅ 학습 완료 체크리스트

🎯 추가 연습 문제들

추가 문제 1. 5초 후에 "시간이 다 됐어요!"라는 메시지를 출력하는 코드를 작성하세요.

추가 문제 2. 1초 후에 "첫 번째", 3초 후에 "두 번째" 메시지를 출력하세요.

추가 문제 3. 함수를 만들어서 2초 후에 "안녕하세요!"를 출력하세요.

추가 문제 4. 다음 코드의 실행 순서는 어떻게 될까요?

추가 문제 5. 다음 코드에서 잘못된 부분을 찾아보세요.

📂 마무리 정보

'13. 시간을 다루는 마법 (비동기 처리) > 13.1 시간 지연 함수들' 카테고리의 다른 글

'13. 시간을 다루는 마법 (비동기 처리)/13.1 시간 지연 함수들'의 다른글

관련글

티스토리툴바