안녕! 오늘은 자바스크립트 개발하다 보면 무조건 마주치게 되는 두 친구, setTimeout과 setInterval에 대해 제대로 파헤쳐볼 거야. 🎉

"어, 나 이거 써봤는데?" 싶은 사람도 있을 거고, "이름은 들어봤는데 정확히 어떻게 돌아가는지 모르겠어" 하는 사람도 있을 거야. 둘 다 환영이야! 오늘 끝나고 나면 이 두 함수를 완전히 내 것으로 만들 수 있을 거거든.

단순히 "몇 초 뒤에 실행해줘" 수준을 넘어서, 이벤트 루프와의 관계, 실전에서 자주 쓰는 패턴, 그리고 흔히 빠지는 함정까지 — 전부 다 커버할 거야. 준비됐어? 그럼 고고! 🚀

🕰️ 타이머, 왜 필요한 거야?

먼저 왜 타이머가 필요한지부터 생각해보자. 자바스크립트는 기본적으로 싱글 스레드(Single Thread) 언어야. 한 번에 하나의 작업만 처리할 수 있다는 뜻이지.

그런데 현실 세계의 웹 앱을 보면 어때? 3초 뒤에 팝업 띄우기, 1초마다 시계 업데이트, 사용자가 타이핑 멈추면 0.5초 뒤에 검색 실행... 이런 것들이 넘쳐나잖아.

이걸 가능하게 해주는 게 바로 비동기 타이머 API야. 자바스크립트 엔진 자체가 아니라, 브라우저(또는 Node.js)가 제공하는 Web API를 통해 타이밍을 제어하는 거지.

이 사실이 왜 중요하냐고? 나중에 이벤트 루프 얘기할 때 이게 핵심이 되거든. 일단 계속 가보자!

이벤트 루프와 타이머의 관계 🔄

위 그림을 보면서 이해해보자. 자바스크립트 엔진이 코드를 실행하는 방식은 이래:

setTimeout 취소하기 — clearTimeout

타이머를 등록했다가 취소하고 싶을 때는 clearTimeout을 써!

// 타이머 등록
const timerId = setTimeout(() => {
  console.log("이건 실행 안 될 거야!");
}, 3000);

// 1초 뒤에 타이머 취소
setTimeout(() => {
  clearTimeout(timerId);
  console.log("타이머 취소됨!");
}, 1000);

// 결과: "타이머 취소됨!" 만 출력됨

🔁 setInterval — "계속 반복해서 실행해줘"

기본 문법

setInterval은 지정한 시간마다 콜백을 반복 실행해주는 함수야. 멈추라고 할 때까지 계속!

// 기본 형태
const intervalId = setInterval(콜백함수, 간격ms, ...추가인자);

// 예시: 1초마다 카운트
let count = 0;
const intervalId = setInterval(() => {
  count++;
  console.log(`${count}초 경과`);
  
  if (count >= 5) {
    clearInterval(intervalId);
    console.log("5초 완료! 타이머 종료");
  }
}, 1000);

// 출력:
// 1초 경과
// 2초 경과
// 3초 경과
// 4초 경과
// 5초 경과
// 5초 완료! 타이머 종료

setInterval 취소하기 — clearInterval

const intervalId = setInterval(() => {
  console.log("반복 중...");
}, 500);

// 3초 뒤에 반복 중지
setTimeout(() => {
  clearInterval(intervalId);
  console.log("반복 종료!");
}, 3000);

🕳️ 자주 빠지는 함정들

이제 실수하기 쉬운 부분들을 짚어볼게. 이거 알아두면 나중에 디버깅 시간 엄청 아낄 수 있어!

함정 1: this 바인딩 문제 😵

class Timer {
  constructor() {
    this.count = 0;
  }
  
  start() {
    // ❌ 잘못된 방법 - this가 undefined 또는 window가 됨
    setInterval(function() {
      this.count++; // 에러! this가 Timer 인스턴스가 아님
      console.log(this.count);
    }, 1000);
    
    // ✅ 올바른 방법 1: 화살표 함수 사용
    setInterval(() => {
      this.count++; // 화살표 함수는 this를 상위 스코프에서 가져옴
      console.log(this.count);
    }, 1000);
    
    // ✅ 올바른 방법 2: bind 사용
    setInterval(function() {
      this.count++;
      console.log(this.count);
    }.bind(this), 1000);
    
    // ✅ 올바른 방법 3: 변수에 저장
    const self = this;
    setInterval(function() {
      self.count++;
      console.log(self.count);
    }, 1000);
  }
}

const timer = new Timer();
timer.start();

함정 2: 클로저와 루프 🔄

// ❌ 흔한 실수: 모든 타이머가 같은 i 값을 참조
for (var i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i); // 5, 5, 5, 5, 5 출력됨!
  }, i * 1000);
}

// ✅ 해결책 1: let 사용 (블록 스코프)
for (let i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i); // 0, 1, 2, 3, 4 출력됨!
  }, i * 1000);
}

// ✅ 해결책 2: IIFE로 클로저 생성
for (var i = 0; i < 5; i++) {
  (function(j) {
    setTimeout(() => {
      console.log(j); // 0, 1, 2, 3, 4 출력됨!
    }, j * 1000);
  })(i);
}

// ✅ 해결책 3: setTimeout의 추가 인자 활용
for (var i = 0; i < 5; i++) {
  setTimeout((j) => {
    console.log(j); // 0, 1, 2, 3, 4 출력됨!
  }, i * 1000, i);
}

함정 3: 메모리 누수 💧

// ❌ 컴포넌트가 제거돼도 타이머가 계속 실행됨
class MyComponent {
  constructor() {
    this.data = new Array(1000000).fill('데이터'); // 큰 데이터
    
    // 이 타이머는 컴포넌트가 제거돼도 계속 실행됨!
    setInterval(() => {
      this.updateData(); // this.data 참조 → 메모리 해제 안 됨
    }, 1000);
  }
}

// ✅ 올바른 방법: 정리(cleanup) 함수 구현
class MyComponent {
  constructor() {
    this.data = new Array(1000000).fill('데이터');
    this.intervalId = null;
  }
  
  mount() {
    this.intervalId = setInterval(() => {
      this.updateData();
    }, 1000);
  }
  
  unmount() {
    // 컴포넌트 제거 시 타이머 정리!
    clearInterval(this.intervalId);
    this.intervalId = null;
  }
}

// React에서의 예시
// useEffect(() => {
//   const id = setInterval(doSomething, 1000);
//   return () => clearInterval(id); // cleanup 함수
// }, []);

함정 4: 문자열 인자 사용 (절대 하지 마!) 🚫

// ❌ 절대 이렇게 하지 마! (eval과 동일한 보안 위험)
setTimeout("console.log('위험!')", 1000);
setTimeout("doSomething()", 1000);

// ✅ 항상 함수를 직접 전달
setTimeout(() => console.log('안전!'), 1000);
setTimeout(doSomething, 1000);

🧪 Promise와 async/await로 타이머 다루기

현대 자바스크립트에서는 타이머를 Promise로 감싸서 async/await와 함께 쓰는 패턴이 정말 많이 쓰여!

sleep 함수 만들기 😴

// Promise로 감싼 sleep 함수
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// async/await와 함께 사용
async function main() {
  console.log("시작!");
  
  await sleep(2000); // 2초 대기
  console.log("2초 후...");
  
  await sleep(1000); // 1초 대기
  console.log("3초 후!");
}

main();

취소 가능한 sleep 만들기 🛑

function cancellableSleep(ms) {
  let timerId;
  
  const promise = new Promise((resolve, reject) => {
    timerId = setTimeout(resolve, ms);
  });
  
  const cancel = () => {
    clearTimeout(timerId);
  };
  
  return { promise, cancel };
}

// 사용 예시
async function example() {
  const { promise, cancel } = cancellableSleep(5000);
  
  // 2초 뒤에 취소
  setTimeout(cancel, 2000);
  
  await promise;
  console.log("이건 실행 안 될 수도 있어!");
}

AbortController와 함께 사용하기 🎮

function sleepWithAbort(ms, signal) {
  return new Promise((resolve, reject) => {
    const timerId = setTimeout(resolve, ms);
    
    signal.addEventListener('abort', () => {
      clearTimeout(timerId);
      reject(new DOMException('Aborted', 'AbortError'));
    });
  });
}

// 사용 예시
async function fetchWithDelay() {
  const controller = new AbortController();
  
  // 3초 뒤에 취소
  setTimeout(() => controller.abort(), 3000);
  
  try {
    await sleepWithAbort(5000, controller.signal);
    console.log("5초 완료!");
  } catch (error) {
    if (error.name === 'AbortError') {
      console.log("취소됨!");
    }
  }
}

재시도 로직 구현하기 🔄

async function retry(fn, options = {}) {
  const {
    maxAttempts = 3,
    delay = 1000,
    backoff = 2, // 지수 백오프 배수
  } = options;
  
  let lastError;
  
  for (let attempt = 1; attempt <= maxAttempts; attempt++) {
    try {
      return await fn();
    } catch (error) {
      lastError = error;
      console.log(`시도 ${attempt}/${maxAttempts} 실패:`, error.message);
      
      if (attempt < maxAttempts) {
        const waitTime = delay * Math.pow(backoff, attempt - 1);
        console.log(`${waitTime}ms 후 재시도...`);
        await sleep(waitTime);
      }
    }
  }
  
  throw lastError;
}

// 사용 예시
async function main() {
  try {
    const result = await retry(
      () => fetch('https://api.example.com/data'),
      { maxAttempts: 3, delay: 1000, backoff: 2 }
    );
    console.log('성공!', result);
  } catch (error) {
    console.error('모든 재시도 실패:', error);
  }
}

// 재시도 간격: 1초 → 2초 → 4초 (지수 백오프)

🧩 Node.js에서의 타이머

Node.js에서도 setTimeout과 setInterval을 쓸 수 있어. 브라우저와 거의 같지만 몇 가지 차이점이 있어!

Node.js 전용 타이머 함수들

// Node.js 실행 순서 테스트
console.log("1: 동기");

process.nextTick(() => console.log("2: nextTick"));

Promise.resolve().then(() => console.log("3: Promise"));

setImmediate(() => console.log("4: setImmediate"));

setTimeout(() => console.log("5: setTimeout 0ms"), 0);

console.log("6: 동기");

// 출력 순서:
// 1: 동기
// 6: 동기
// 2: nextTick      ← 가장 먼저!
// 3: Promise       ← 마이크로태스크
// 4: setImmediate  ← I/O 이후
// 5: setTimeout 0ms

// Node.js 15+ timers/promises 모듈
import { setTimeout, setInterval } from 'timers/promises';

// Promise 기반 setTimeout
async function main() {
  console.log("시작");
  await setTimeout(2000); // 2초 대기
  console.log("2초 후!");
}

// setInterval을 async iterator로 사용
async function* generateTicks(interval) {
  for await (const _ of setInterval(interval)) {
    yield Date.now();
  }
}

// 사용
const ticker = generateTicks(1000);
for await (const timestamp of ticker) {
  console.log('틱:', timestamp);
  // 5번 후 break
}

🧪 타이머 테스트하기

타이머가 포함된 코드를 테스트할 때는 실제로 기다리면 테스트가 너무 느려지잖아. 그래서 가짜 타이머(Fake Timers)를 사용해!

Jest의 가짜 타이머

// Jest 테스트 예시
describe('타이머 테스트', () => {
  beforeEach(() => {
    jest.useFakeTimers(); // 가짜 타이머 활성화
  });
  
  afterEach(() => {
    jest.useRealTimers(); // 실제 타이머 복원
  });
  
  test('setTimeout 테스트', () => {
    const callback = jest.fn();
    
    setTimeout(callback, 3000);
    
    // 아직 실행 안 됨
    expect(callback).not.toHaveBeenCalled();
    
    // 3초 앞으로 빨리감기
    jest.advanceTimersByTime(3000);
    
    // 이제 실행됨
    expect(callback).toHaveBeenCalledTimes(1);
  });
  
  test('setInterval 테스트', () => {
    const callback = jest.fn();
    
    setInterval(callback, 1000);
    
    jest.advanceTimersByTime(5000); // 5초 앞으로
    
    expect(callback).toHaveBeenCalledTimes(5); // 5번 실행
  });
  
  test('모든 타이머 즉시 실행', () => {
    const callback = jest.fn();
    
    setTimeout(callback, 99999); // 엄청 긴 타이머
    
    jest.runAllTimers(); // 모든 타이머 즉시 실행
    
    expect(callback).toHaveBeenCalled();
  });
});

📊 성능 최적화 팁

타이머 배칭(Batching) 🎯

여러 개의 타이머를 따로따로 만드는 것보다 하나로 묶어서 관리하면 성능이 좋아져!

// ❌ 비효율적: 타이머 여러 개
setTimeout(updateHeader, 100);
setTimeout(updateSidebar, 100);
setTimeout(updateFooter, 100);

// ✅ 효율적: 하나로 묶기
setTimeout(() => {
  updateHeader();
  updateSidebar();
  updateFooter();
}, 100);

타이머 매니저 클래스 만들기 🏗️

class TimerManager {
  constructor() {
    this.timers = new Map();
  }
  
  setTimeout(key, fn, delay) {
    // 같은 키의 기존 타이머 취소
    this.clearTimeout(key);
    
    const id = setTimeout(() => {
      this.timers.delete(key);
      fn();
    }, delay);
    
    this.timers.set(key, { type: 'timeout', id });
    return id;
  }
  
  setInterval(key, fn, interval) {
    this.clearInterval(key);
    
    const id = setInterval(fn, interval);
    this.timers.set(key, { type: 'interval', id });
    return id;
  }
  
  clearTimeout(key) {
    const timer = this.timers.get(key);
    if (timer && timer.type === 'timeout') {
      clearTimeout(timer.id);
      this.timers.delete(key);
    }
  }
  
  clearInterval(key) {
    const timer = this.timers.get(key);
    if (timer && timer.type === 'interval') {
      clearInterval(timer.id);
      this.timers.delete(key);
    }
  }
  
  clearAll() {
    this.timers.forEach(({ type, id }) => {
      if (type === 'timeout') clearTimeout(id);
      else clearInterval(id);
    });
    this.timers.clear();
  }
}

// 사용 예시
const tm = new TimerManager();

// 같은 키로 여러 번 호출해도 마지막 것만 실행됨 (자동 디바운스!)
tm.setTimeout('search', () => doSearch(), 500);
tm.setTimeout('search', () => doSearch(), 500); // 이전 것 자동 취소

// 페이지 이탈 시 모든 타이머 정리
window.addEventListener('beforeunload', () => tm.clearAll());

🌟 실전 예제: 완성된 타이머 컴포넌트

지금까지 배운 내용을 종합해서 실제로 쓸 수 있는 타이머 컴포넌트를 만들어보자! 재능넷 같은 플랫폼에서 경매나 한정 시간 이벤트에 쓸 수 있는 카운트다운 타이머야.

class CountdownTimer {
  constructor(options = {}) {
    this.duration = options.duration || 60; // 초 단위
    this.onTick = options.onTick || (() => {});
    this.onComplete = options.onComplete || (() => {});
    this.onPause = options.onPause || (() => {});
    this.onResume = options.onResume || (() => {});
    
    this.remaining = this.duration;
    this.intervalId = null;
    this.isPaused = false;
    this.isRunning = false;
    this.startTime = null;
    this.pausedAt = null;
  }
  
  start() {
    if (this.isRunning) return this;
    
    this.isRunning = true;
    this.isPaused = false;
    this.startTime = Date.now();
    
    this._tick();
    this.intervalId = setInterval(() => this._tick(), 100); // 100ms마다 체크
    
    return this;
  }
  
  _tick() {
    if (this.isPaused) return;
    
    const elapsed = (Date.now() - this.startTime) / 1000;
    this.remaining = Math.max(0, this.duration - elapsed);
    
    this.onTick({
      remaining: this.remaining,
      elapsed: elapsed,
      progress: elapsed / this.duration,
      formatted: this._format(this.remaining)
    });
    
    if (this.remaining <= 0) {
      this.stop();
      this.onComplete();
    }
  }
  
  pause() {
    if (!this.isRunning || this.isPaused) return this;
    
    this.isPaused = true;
    this.pausedAt = Date.now();
    this.onPause({ remaining: this.remaining });
    
    return this;
  }
  
  resume() {
    if (!this.isPaused) return this;
    
    // 일시정지된 시간만큼 시작 시간 조정
    const pausedDuration = Date.now() - this.pausedAt;
    this.startTime += pausedDuration;
    
    this.isPaused = false;
    this.pausedAt = null;
    this.onResume({ remaining: this.remaining });
    
    return this;
  }
  
  stop() {
    clearInterval(this.intervalId);
    this.intervalId = null;
    this.isRunning = false;
    
    return this;
  }
  
  reset() {
    this.stop();
    this.remaining = this.duration;
    this.isPaused = false;
    this.startTime = null;
    this.pausedAt = null;
    
    return this;
  }
  
  _format(seconds) {
    const h = Math.floor(seconds / 3600);
    const m = Math.floor((seconds % 3600) / 60);
    const s = Math.floor(seconds % 60);
    
    if (h > 0) {
      return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
    }
    return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
  }
}

// 사용 예시
const timer = new CountdownTimer({
  duration: 300, // 5분
  onTick: ({ formatted, progress }) => {
    document.getElementById('display').textContent = formatted;
    document.getElementById('progress').style.width = `${progress * 100}%`;
  },
  onComplete: () => {
    console.log('시간 종료!');
    alert('경매가 종료되었습니다!');
  }
});

// 시작
document.getElementById('startBtn').onclick = () => timer.start();
// 일시정지
document.getElementById('pauseBtn').onclick = () => timer.pause();
// 재개
document.getElementById('resumeBtn').onclick = () => timer.resume();
// 초기화
document.getElementById('resetBtn').onclick = () => timer.reset();

📚 핵심 내용 총정리

🎓 마무리하며

자, 이제 setTimeout과 setInterval에 대해 정말 깊이 파헤쳐봤어! 처음에는 단순히 "몇 초 뒤에 실행해주는 함수" 정도로만 알고 있었다면, 이제는 이벤트 루프와의 관계, 정밀도의 한계, 실전 패턴까지 완전히 이해했을 거야. 🎉

자바스크립트 개발을 하다 보면 타이머는 정말 어디서나 쓰이거든. 디바운스, 쓰로틀, 폴링, 애니메이션, 카운트다운... 이 모든 것의 기반이 바로 오늘 배운 두 함수야.

프로그래밍 실력을 키우고 싶다면 이런 기초 개념들을 제대로 이해하는 게 정말 중요해. 재능넷에서도 JavaScript 관련 재능을 가진 분들이 많이 활동하고 있으니, 더 깊은 내용이 궁금하다면 전문가의 도움을 받아보는 것도 좋은 방법이야!

이제 타이머 관련 코드를 보면 "아, 이게 이렇게 돌아가는 거구나!" 하고 바로 이해할 수 있을 거야. 코딩 즐겁게 해! 🚀