13.1.2 setInterval 사용하기 - 계속 반복하는 똑똑한 시계

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

13.1.2 setInterval 사용하기 - 계속 반복하는 똑똑한 시계

thejavascript4kids 2025. 7. 17. 03:12

📘 13.1.2 setInterval 사용하기 - 계속 반복하는 똑똑한 시계

반복되는 시간의 리듬

여러분, 다시 만나게 되어 반가워요. 지난 시간에 setTimeout을 배우며 한 번만 울리는 알람에 대해 이야기했었죠. 3초 후에 딱 한 번 실행되고 조용해지는 그런 알람 말이에요.

하지만 우리 삶에는 반복되는 시간들이 있어요. 심장이 뛰는 소리, 시계바늘이 움직이는 규칙적인 소리, 매일 아침 같은 시간에 울리는 알람처럼요. 때로는 이런 반복의 힘이 필요할 때가 있어요. 바로 이런 순간에 setInterval이라는 고마운 동반자가 우리 곁에 있답니다.

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

반복되는 시간과 관련된 프로그래밍 단어들을 정리해볼게요.

단어	의미
setInterval	정해진 시간 간격마다 계속해서 반복 실행하는 JavaScript 기능이에요.
clearInterval	setInterval로 시작된 반복을 멈추게 하는 기능이에요.
간격 (Interval)	반복 실행되는 시간 사이의 거리를 의미해요.
타이머 번호	setInterval이 돌려주는 식별 번호로, clearInterval에서 사용돼요.

setInterval은 '설정하다'라는 뜻의 set과 '간격'이라는 뜻의 interval이 만나 이루어진 이름이에요. 특정 간격을 설정해서 계속 반복한다는 의미를 담고 있어요.

✨ setInterval의 핵심 개념

setTimeout이 "한 번만 울리는 알람시계"라면, setInterval은 "매시간마다 계속 울리는 시계"예요. 한 번 설정해두면 지정된 시간 간격마다 끝없이 반복해서 기능을 실행해요.

이런 반복 기능은 실시간으로 변화하는 정보를 다룰 때 매우 소중해요. 디지털 시계는 1초마다 시간을 새롭게 보여줘야 하고, 게임에서는 캐릭터가 부드럽게 움직이도록 조금씩 위치를 바꿔야 해요. 날씨 정보나 시간 같은 것들도 주기적으로 갱신이 필요하죠.

하지만 setInterval을 사용할 때 가장 중요한 점은 반드시 적절한 시점에 멈춰야 한다는 거예요. clearInterval이라는 기능을 사용해서 반복을 중단하지 않으면, 브라우저가 계속해서 불필요한 작업을 반복하게 되어 컴퓨터가 지칠 수 있어요.

학교 종이 울리는 시스템 이야기

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

학교에는 매시간마다 자동으로 울리는 종이 있어요. 이 종은 한 번 설정해두면 50분마다 계속해서 "딩동댕" 하고 울려요. 첫 번째 교시 끝, 두 번째 교시 끝, 세 번째 교시 끝... 이렇게 하루 종일 규칙적으로 반복돼요.

종무실에서는 이 종을 "1번 종"이라고 부르며 관리해요. 그리고 필요에 따라 "2번 종"(급식시간 알림), "3번 종"(청소시간 알림) 등 여러 개의 종을 동시에 운영할 수도 있어요. 각각의 종은 서로 다른 간격으로 울리죠.

만약 시험 기간이라서 종을 잠시 멈춰야 한다면? 종무실에서 "1번 종 정지!"라고 명령하면 돼요. 그러면 그 종만 멈추고 다른 종들은 계속 작동해요.

setInterval도 정확히 이와 같아요. 한 번 설정하면 계속 반복되고, 여러 개를 동시에 운영할 수 있으며, 각각을 개별적으로 멈출 수 있는 똑똑한 시스템인 거죠.

🎯 setInterval을 사용하는 이유

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

실시간 시계나 타이머를 만들 때 사용해요. 웹페이지에 현재 시간을 보여주는 디지털 시계를 만들거나, 스톱워치나 카운트다운 타이머를 만들 때 1초마다 화면을 업데이트해야 하거든요.

정보를 자동으로 새로 고치고 싶을 때도 활용해요. 날씨 정보, 온라인 게임의 점수, 주식 가격 등 실시간으로 변하는 정보를 주기적으로 새로 가져와서 화면에 보여줄 때 사용해요.

부드러운 움직임 효과를 만들 때도 필요해요. 요소가 천천히 움직이거나, 색상이 점진적으로 변하거나, 크기가 서서히 커지는 등의 애니메이션을 만들 때 아주 짧은 간격(예: 50밀리초)마다 조금씩 변경해서 부드러운 효과를 만들어내요.

상태 확인과 자동 저장을 할 때도 유용해요. 사용자가 입력 중인 문서를 주기적으로 자동 저장하거나, 인터넷 연결 상태를 지속적으로 확인하거나, 배터리 잔량을 모니터링하는 등의 작업에 활용돼요.

⚙️ 기본 사용법 배우기

setInterval의 기본 사용법은 setTimeout과 비슷하지만, 중요한 차이점이 있어요.

// 반복 타이머 시작하기
let 타이머번호 = setInterval(실행할기능, 간격시간);

// 반복 타이머 멈추기
clearInterval(타이머번호);

각 부분의 의미:

실행할기능: 반복해서 실행하고 싶은 기능이에요.
간격시간: 몇 밀리초마다 반복할지를 나타내는 숫자예요.
타이머번호: setInterval이 돌려주는 고유 번호로, 나중에 멈출 때 사용해요.

실제 예시:

// 2초마다 메시지 출력 (계속 반복)
let myTimer = setInterval(() => {
    console.log("2초가 지났어요!");
}, 2000);

// 10초 후에 반복 멈추기
setTimeout(() => {
    clearInterval(myTimer);
    console.log("타이머를 멈췄어요!");
}, 10000);

중요한 포인트:

가장 중요한 것은 타이머 번호를 변수에 저장하는 거예요. 이 번호가 없으면 나중에 타이머를 멈출 수 없어요. 또한 반복이 더 이상 필요하지 않을 때는 반드시 clearInterval로 멈춰야 해요. 그렇지 않으면 브라우저가 계속해서 불필요한 작업을 반복하게 돼요.

🧪 직접 해보면서 배우기

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

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

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

// 2초마다 실행될 기능을 만들어요
function showRepeatingMessage() {
    console.log("안녕하세요! 2초마다 반복되는 메시지예요!"); // 반복 메시지 출력
    console.log("현재 시간:", new Date().toLocaleTimeString()); // 현재 시간 출력
}

// 2초(2000밀리초)마다 계속 반복하도록 설정해요
let repeatingTimer = setInterval(showRepeatingMessage, 2000);

// 시작 메시지를 출력해요
console.log("반복 타이머가 시작되었어요!"); // 바로 실행되는 시작 메시지
console.log("2초마다 메시지가 계속 출력될 거예요."); // 바로 실행되는 안내 메시지

// (참고: 이 타이머는 clearInterval로 멈추기 전까지 계속 실행돼요)

이 과정을 천천히 살펴보면, 먼저 반복해서 실행할 기능을 만들어요. 그다음 setInterval로 2초마다 그 기능을 반복 실행하도록 설정하고, 돌려받는 타이머 번호를 변수에 저장하죠. 시작 메시지들은 즉시 출력되고, 그 후 2초마다 정기적으로 기능이 실행되면서 시간과 함께 메시지가 계속 출력돼요.

🔹 두 번째 예시: 카운터 만들고 자동으로 멈추기

두 번째 예시에서는 숫자를 세는 카운터를 만들고, 특정 조건에서 자동으로 멈추는 방법을 배워볼게요.

// 카운터 변수를 0으로 시작해요
let count = 0;

// 1초마다 카운터를 증가시키고 출력하는 타이머를 설정해요
let counterTimer = setInterval(() => {
    count = count + 1; // 카운터를 1 증가시켜요
    console.log("카운트: " + count); // 현재 카운트를 출력해요

    // 10에 도달하면 자동으로 멈춰요
    if (count === 10) {
        clearInterval(counterTimer); // 반복을 멈춰요
        console.log("🎉 카운트 완료! 타이머를 멈췄어요."); // 완료 메시지 출력
        console.log("총 " + count + "번 세었어요!"); // 총 카운트 출력
    }
}, 1000); // 1초 = 1000밀리초

console.log("1부터 10까지 세는 카운터가 시작돼요!"); // 시작 안내 메시지

이 예시를 통해 setInterval 내부에서 조건을 확인해서 자동으로 멈추는 방법을 배울 수 있어요. 카운터가 10에 도달하면 clearInterval을 호출해서 반복을 중단하죠. 이런 패턴은 특정 횟수만큼 반복하거나, 특정 조건이 만족될 때까지 반복할 때 매우 유용해요.

🔹 세 번째 예시: 여러 개의 타이머 동시 사용하기

세 번째 예시에서는 서로 다른 간격의 여러 타이머를 동시에 사용하는 방법을 배워볼게요.

// 빠른 타이머: 1초마다 시간 표시
let fastTimer = setInterval(() => {
    console.log("⏰ 현재 시간: " + new Date().toLocaleTimeString()); // 1초마다 현재 시간 출력
}, 1000);

// 보통 타이머: 3초마다 인사 메시지
let normalTimer = setInterval(() => {
    console.log("👋 3초마다 안녕하세요!"); // 3초마다 인사 메시지 출력
}, 3000);

// 느린 타이머: 5초마다 상태 체크
let slowTimer = setInterval(() => {
    console.log("🔍 5초마다 상태를 확인해요!"); // 5초마다 상태 확인 메시지 출력
}, 5000);

console.log("세 개의 타이머가 모두 시작되었어요!"); // 시작 안내 메시지

// 15초 후에 모든 타이머를 멈춰요
setTimeout(() => {
    clearInterval(fastTimer); // 빠른 타이머 멈추기
    clearInterval(normalTimer); // 보통 타이머 멈추기
    clearInterval(slowTimer); // 느린 타이머 멈추기
    console.log("🛑 모든 타이머를 멈췄어요!"); // 모든 타이머 정지 메시지
}, 15000); // 15초 = 15000밀리초

이 예시에서는 서로 다른 간격으로 작동하는 세 개의 타이머를 동시에 운영해요. 각 타이머는 독립적으로 작동하며, 15초 후에 setTimeout을 사용해서 모든 타이머를 한꺼번에 정리하는 모습을 보여줘요. 이런 방식으로 복잡한 시간 기반 기능을 만들 수 있어요.

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

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

첫 번째 단계는 반복할 작업 정하기예요. 주기적으로 실행하고 싶은 코드를 기능으로 만들거나 화살표 기능으로 준비해요. 이때 각 실행마다 어떤 일이 일어날지 명확히 계획하는 것이 중요해요.

두 번째는 반복 간격 결정 단계예요. 몇 밀리초마다 반복할지 결정하고, 용도에 맞는 적절한 간격을 설정해요. 너무 짧으면 컴퓨터가 지치고, 너무 길면 사용자가 불편해할 수 있어요.

세 번째는 타이머 시작과 번호 저장 단계예요. setInterval을 호출해서 반복을 시작하고, 돌려받는 타이머 번호를 반드시 변수에 저장해요. 이 번호는 나중에 타이머를 멈출 때 꼭 필요해요.

네 번째는 반복 실행 확인 단계예요. 타이머가 정상적으로 작동하는지 확인하고, 필요에 따라 반복 중에도 조건을 체크해서 자동으로 멈출 수 있도록 해요.

마지막 단계는 적절한 시점에 정리예요. 더 이상 반복이 필요하지 않을 때는 clearInterval을 사용해서 타이머를 정리해요. 이는 컴퓨터 자원 낭비를 방지하고 성능을 유지하는 데 매우 중요해요.

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

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

우리 학교에는 여러 개의 방송 타이머가 있어요. 각 타이머는 서로 다른 목적으로 다른 간격으로 방송을 해요.

수업 종료 방송은 매시간 50분마다 "딩동댕" 하고 울려서 수업 끝을 알려줘요. 급식 시간 방송은 매일 12시에 울려서 점심시간을 알려주죠. 청소 시간 방송은 일주일에 세 번, 정해진 시간에 울려서 청소 시간을 알려줘요.

이 모든 방송 시스템들은 방송실에서 중앙 관리돼요. 각 방송 시스템에는 고유한 번호가 있어요: 수업 종료 방송은 "1번", 급식 시간 방송은 "2번", 청소 시간 방송은 "3번"이라고 불러요.

어느 날, 학교에 특별한 행사가 열리게 되었어요. 방송실에서는 "오늘은 특별한 날이니 청소 시간 방송(3번)만 잠시 멈추고, 나머지는 평소대로 운영하자"라고 결정했어요. 그래서 "3번 방송 정지!"라는 명령을 내렸어요.

이처럼 setInterval도 여러 개를 동시에 운영할 수 있고, 각각을 개별적으로 제어할 수 있는 편리한 방송 시스템과 같아요. 필요에 따라 새로운 타이머를 추가하거나, 특정 타이머만 멈추거나, 모든 타이머를 한꺼번에 정리할 수 있는 유연한 시스템이에요!

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

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

❌ 실수 1: 타이머 번호를 저장하지 않기

// 잘못된 방법 - 타이머 번호를 저장하지 않음
setInterval(() => {
    console.log("계속 실행돼요!");
}, 1000);
// 이 타이머는 멈출 수 없어요!

// 올바른 방법 - 타이머 번호를 변수에 저장
let myTimer = setInterval(() => {
    console.log("필요할 때 멈출 수 있어요!");
}, 1000);
// 나중에 clearInterval(myTimer)로 멈출 수 있어요

이런 실수가 위험한 이유는 한번 시작된 타이머를 멈출 방법이 없어지기 때문이에요. 페이지를 새로고침하기 전까지 계속 실행되어서 컴퓨터가 지칠 수 있어요.

❌ 실수 2: clearInterval을 사용하지 않기

// 문제가 될 수 있는 코드
function startTimer() {
    let timer = setInterval(() => {
        console.log("실행 중...");
    }, 1000);
    // clearInterval을 사용하지 않으면 계속 실행돼요
}

// 이 기능을 여러 번 호출하면 여러 개의 타이머가 중복 실행돼요!
startTimer(); // 첫 번째 타이머 시작
startTimer(); // 두 번째 타이머 시작
startTimer(); // 세 번째 타이머 시작 - 이제 3개의 타이머가 동시에 실행돼요!

// 올바른 방법
let globalTimer = null;
function startTimer() {
    if (globalTimer) {
        clearInterval(globalTimer); // 기존 타이머 정리
    }
    globalTimer = setInterval(() => {
        console.log("안전하게 실행 중...");
    }, 1000);
}

clearInterval을 사용하지 않으면 컴퓨터 자원 낭비가 발생하고, 원하지 않게 여러 개의 타이머가 중복 실행될 수 있어요.

❌ 실수 3: 너무 짧은 간격으로 설정하기

// 컴퓨터가 지칠 수 있는 코드
setInterval(() => {
    console.log("너무 자주 실행돼요!");
    // 복잡한 계산이나 DOM 조작
}, 1); // 1밀리초마다 실행! 너무 빨라요

// 적절한 간격으로 수정
setInterval(() => {
    console.log("적당한 빈도로 실행돼요");
    // 같은 작업
}, 100); // 100밀리초(0.1초)마다 실행

너무 짧은 간격으로 설정하면 브라우저가 과도한 작업을 처리해야 해서 웹페이지가 느려지거나 멈출 수 있어요. 일반적으로 50밀리초 이하의 간격은 피하는 것이 좋아요.

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

차분하게, 한 줄씩 써내려가듯 문제를 풀어보세요. 반복되는 코드 안에서 우리는 시간의 흐름을 느낄 수 있을 거예요.

Ex1) 3초마다 "시간이 흘러가요!"라는 메시지를 계속 출력해보자

// 3초마다 메시지를 반복 출력하는 타이머를 설정해요
let timeTimer = setInterval(() => {
    console.log("시간이 흘러가요!"); // 3초마다 반복 출력될 메시지
}, 3000); // 3초 = 3000밀리초

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

Ex2) 1초마다 1부터 계속 세는 카운터를 만들고, 타이머 번호를 변수에 저장해보자

// 카운터 변수를 선언해요
let count = 0;

// 1초마다 카운터를 증가시키고 출력하는 타이머를 만들어요
let counterTimer = setInterval(() => {
    count = count + 1; // 카운터를 1씩 증가시켜요
    console.log("카운트: " + count); // 현재 카운트 값을 출력해요
}, 1000); // 1초 = 1000밀리초

// 나중에 clearInterval(counterTimer)로 멈출 수 있어요

이 문제는 타이머 번호를 저장하는 방법과 변수를 활용하는 방법을 연습하는 데 도움이 돼요.

Ex3) 위에서 만든 카운터가 5에 도달하면 자동으로 멈추도록 수정해보자

let count = 0; // 카운터 변수 초기화

let counterTimer = setInterval(() => {
    count = count + 1; // 카운터를 1씩 증가
    console.log("카운트: " + count); // 현재 카운트 출력

    // 5에 도달하면 타이머를 멈춰요
    if (count === 5) {
        clearInterval(counterTimer); // 반복 중단
        console.log("카운터 완료!"); // 완료 메시지 출력
    }
}, 1000); // 1초마다 실행

이 연습문제를 통해 조건부로 타이머를 멈추는 방법을 배울 수 있어요.

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

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

Q1. setTimeout과 setInterval의 가장 중요한 차이점을 설명해보세요.

정답: setTimeout은 한 번만 실행되지만, setInterval은 정해진 간격마다 계속해서 반복 실행돼요.

해설: setTimeout은 "3초 후에 한 번"이라면, setInterval은 "3초마다 계속"이라는 의미예요. 마치 일회용 알람과 매일 울리는 알람의 차이와 같아요.

Q2. 다음 코드에서 "Hello"가 몇 번 출력될지 예측해보세요.

let count = 0;
let timer = setInterval(() => {
    console.log("Hello");
    count = count + 1;
    if (count === 3) {
        clearInterval(timer);
    }
}, 1000);

정답: 3번 출력돼요.

해설: 카운트가 1, 2, 3이 될 때마다 "Hello"가 출력되고, 카운트가 3에 도달하면 clearInterval이 실행되어 반복이 멈춰요.

🔙 지난 시간 복습하기 (13.1.1 - setTimeout)

13.1.2를 계속 공부하기 전에, 지난 시간에 배운 setTimeout 내용을 복습해볼까요?

복습 문제 1: setTimeout 기본 사용법

다음 중 3초 후에 "안녕하세요!"를 출력하는 올바른 방법은?

// A) setTimeout("안녕하세요!", 3000)
// B) setTimeout(() => console.log("안녕하세요!"), 3000)  
// C) setDelay(() => console.log("안녕하세요!"), 3000)
// D) setTimeout(() => console.log("안녕하세요!"), 3)

정답: B) setTimeout(() => console.log("안녕하세요!"), 3000)이 정답이에요.

설명: 13.1.1에서 배운 setTimeout 사용법이에요. 첫 번째 매개변수는 실행할 함수, 두 번째는 밀리초 단위의 시간이에요.

복습 문제 2: setTimeout과 setInterval의 차이

다음 코드에서 빈칸에 들어갈 올바른 내용은?

// 한 번만 실행: _______(기능, 시간)
// 계속 반복 실행: _______(기능, 시간)

정답: setTimeout과 setInterval

설명: 13.1.1에서 배운 setTimeout은 한 번만 실행되고, 오늘 배운 setInterval은 계속 반복 실행돼요. setTimeout은 "3초 후에 한 번", setInterval은 "3초마다 계속"이라는 차이가 있어요.

지금까지 setInterval의 모든 특성과 활용법을 자세히 알아보았어요. 이 기능은 시간의 흐름과 함께 반복되는 모든 작업을 프로그래밍으로 만들 수 있게 해주는 강력한 도구예요. 마치 끝없이 똑딱거리는 시계처럼, 정확한 간격으로 원하는 작업을 계속해서 수행해주는 믿음직한 기능이랍니다!

✅ 학습 완료 체크리스트

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

학습 내용	이해했나요?
setInterval의 기본 개념	✅
기본 사용법과 문법	✅
clearInterval의 중요성	✅
자주 하는 실수들	✅
실전 예제 활용하기	✅

🎯 추가 연습 문제들

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

추가 문제 1. 3초마다 "시간이 흘러가요!"라는 메시지를 출력하세요.

setInterval(() => {
    console.log("시간이 흘러가요!");
}, 3000);

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

추가 문제 2. 1초마다 1부터 계속 세는 카운터를 만드세요.

let num = 0;

setInterval(() => {
    num = num + 1;
    console.log(num);
}, 1000);

설명: 변수를 사용해서 숫자를 하나씩 증가시켜요.

추가 문제 3. 위의 카운터를 변수에 저장한 후, clearInterval로 멈추는 준비를 하세요.

let num = 0;

let myTimer = setInterval(() => {
    num = num + 1;
    console.log(num);
}, 1000);

// 나중에 clearInterval(myTimer)로 멈출 수 있어요

설명: 타이머 번호를 변수에 저장해서 나중에 멈출 수 있도록 해요.

추가 문제 4. 다음 코드에서 몇 번 "Hello"가 출력될까요?

let count = 0;
let timer = setInterval(() => {
    console.log("Hello");
    count = count + 1;
    if (count === 3) {
        clearInterval(timer);
    }
}, 1000);

정답: 3번
해설: count가 3이 되면 clearInterval이 실행되어 반복이 멈춥니다.

추가 문제 5. setTimeout과 setInterval의 차이점을 설명해보세요.

정답:

setTimeout: 한 번만 실행 (예: 3초 후에 한 번)
setInterval: 계속 반복 실행 (예: 3초마다 계속)

해설: setTimeout은 일회성이고, setInterval은 반복적입니다.

📂 마무리 정보

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

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

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

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

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

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

💻 무료로 학습하러 가기

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

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

현재글13.1.2 setInterval 사용하기 - 계속 반복하는 똑똑한 시계

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

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

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

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.2 setInterval 사용하기 - 계속 반복하는 똑똑한 시계

📘 13.1.2 setInterval 사용하기 - 계속 반복하는 똑똑한 시계

반복되는 시간의 리듬

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

✨ setInterval의 핵심 개념

학교 종이 울리는 시스템 이야기

🎯 setInterval을 사용하는 이유

⚙️ 기본 사용법 배우기

🧪 직접 해보면서 배우기

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

🔹 두 번째 예시: 카운터 만들고 자동으로 멈추기

🔹 세 번째 예시: 여러 개의 타이머 동시 사용하기

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

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

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

❌ 실수 1: 타이머 번호를 저장하지 않기

❌ 실수 2: clearInterval을 사용하지 않기

❌ 실수 3: 너무 짧은 간격으로 설정하기

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

Ex1) 3초마다 "시간이 흘러가요!"라는 메시지를 계속 출력해보자

Ex2) 1초마다 1부터 계속 세는 카운터를 만들고, 타이머 번호를 변수에 저장해보자

Ex3) 위에서 만든 카운터가 5에 도달하면 자동으로 멈추도록 수정해보자

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

Q1. setTimeout과 setInterval의 가장 중요한 차이점을 설명해보세요.

Q2. 다음 코드에서 "Hello"가 몇 번 출력될지 예측해보세요.

🔙 지난 시간 복습하기 (13.1.1 - setTimeout)

복습 문제 1: setTimeout 기본 사용법

복습 문제 2: setTimeout과 setInterval의 차이

✅ 학습 완료 체크리스트

🎯 추가 연습 문제들

추가 문제 1. 3초마다 "시간이 흘러가요!"라는 메시지를 출력하세요.

추가 문제 2. 1초마다 1부터 계속 세는 카운터를 만드세요.

추가 문제 3. 위의 카운터를 변수에 저장한 후, clearInterval로 멈추는 준비를 하세요.

추가 문제 4. 다음 코드에서 몇 번 "Hello"가 출력될까요?

추가 문제 5. setTimeout과 setInterval의 차이점을 설명해보세요.

📂 마무리 정보

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

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

티스토리툴바

13.1.2 setInterval 사용하기 - 계속 반복하는 똑똑한 시계

📘 13.1.2 setInterval 사용하기 - 계속 반복하는 똑똑한 시계

반복되는 시간의 리듬

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

✨ setInterval의 핵심 개념

학교 종이 울리는 시스템 이야기

🎯 setInterval을 사용하는 이유

⚙️ 기본 사용법 배우기

🧪 직접 해보면서 배우기

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

🔹 두 번째 예시: 카운터 만들고 자동으로 멈추기

🔹 세 번째 예시: 여러 개의 타이머 동시 사용하기

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

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

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

❌ 실수 1: 타이머 번호를 저장하지 않기

❌ 실수 2: clearInterval을 사용하지 않기

❌ 실수 3: 너무 짧은 간격으로 설정하기

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

Ex1) 3초마다 "시간이 흘러가요!"라는 메시지를 계속 출력해보자

Ex2) 1초마다 1부터 계속 세는 카운터를 만들고, 타이머 번호를 변수에 저장해보자

Ex3) 위에서 만든 카운터가 5에 도달하면 자동으로 멈추도록 수정해보자

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

Q1. setTimeout과 setInterval의 가장 중요한 차이점을 설명해보세요.

Q2. 다음 코드에서 "Hello"가 몇 번 출력될지 예측해보세요.

🔙 지난 시간 복습하기 (13.1.1 - setTimeout)

복습 문제 1: setTimeout 기본 사용법

복습 문제 2: setTimeout과 setInterval의 차이

✅ 학습 완료 체크리스트

🎯 추가 연습 문제들

추가 문제 1. 3초마다 "시간이 흘러가요!"라는 메시지를 출력하세요.

추가 문제 2. 1초마다 1부터 계속 세는 카운터를 만드세요.

추가 문제 3. 위의 카운터를 변수에 저장한 후, clearInterval로 멈추는 준비를 하세요.

추가 문제 4. 다음 코드에서 몇 번 "Hello"가 출력될까요?

추가 문제 5. setTimeout과 setInterval의 차이점을 설명해보세요.

📂 마무리 정보

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

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

관련글

티스토리툴바