안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에 보물들을 예쁘게 포장하는 법을 배웠죠? 오늘은 우리 웹사이트에 ‘시계’를 달아줄 거예요. 우리가 버튼을 누르지 않아도, 시간이 되면 스스로 나타나거나 매초 마다 숫자가 바뀌는 시간 조절 마법을 배워볼게요!
1. 두 가지 시간 마법: 알람 vs 시계
웹사이트에서 시간을 다루는 마법은 크게 두 종류가 있어요.
- setTimeout (알람 마법): “3초 뒤에 이 마법을 딱 한 번만 부려줘!”라고 예약하는 거예요. 숨바꼭질할 때 셋을 세고 찾는 것과 같죠.
- setInterval (시계 마법): “1초마다 계속해서 이 마법을 부려줘!”라고 명령하는 거예요. 재깍거리는 시계나 깜빡이는 신호등처럼요.
2. 마법을 멈추는 법: Clear 마법
마법을 걸었으면 멈추는 법도 알아야 해요! 시계 마법을 계속 걸어두면 웹사이트가 지칠 수 있거든요. clearInterval이라는 주문을 외우면 움직이던 시계를 딱 멈출 수 있답니다. 우리 성에서 나갈 때(Unmounted)는 꼭 마법을 끄고 나가는 것이 예의예요.
3. 실전 마법: 1초마다 올라가는 ‘마법 점수’
가만히 있어도 점수가 쑥쑥 오르는 자동 점수판을 만들어 볼까요?
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
const autoScore = ref(0);
let magicTimer = null; // 마법 지팡이를 보관할 곳
onMounted(() => {
// 1. 성 문이 열리면 1초(1000ms)마다 점수를 올려요
magicTimer = setInterval(() => {
autoScore.value++;
console.log('자동으로 마력이 쌓이고 있어요!');
}, 1000);
});
onUnmounted(() => {
// 2. 다른 방으로 가면 시계를 멈춰요 (정리 정돈!)
clearInterval(magicTimer);
});
</script>
<template>
<div class="timer-box">
<h2>⏳ 자동 마력 충전기</h2>
<p>현재 마력: {{ autoScore }}</p>
</div>
</template>
4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 ‘약속된 시간’의 중요성을 가르쳐 주세요. 요리할 때 타이머를 맞추거나, 양치질 3분을 지키는 것처럼 웹사이트도 규칙적인 시간 안에서 움직인다는 걸요. 아이와 함께 ‘3초 뒤에 나타나는 깜짝 선물 상자’를 만들어 보세요. 기다림 끝에 나타나는 결과물을 보며 코딩의 즐거움이 두 배가 될 거예요.
마치며: 시간을 다스리는 마법사
이제 여러분의 웹사이트는 살아있는 생물처럼 스스로 시간을 느끼고 움직이게 되었습니다! 정말 대단해요. 다음 시간에는 **’마법의 변신술(Dynamic Classes)’**이라는 주제로, 조건에 따라 웹사이트의 색깔과 모양이 실시간으로 바뀌는 화려한 기술을 배워볼게요.
