자바스크립트 타이머와 이벤트(효율적인 비동기 작업 관리)

자바스크립트에서 비동기 작업을 처리하는 방법은 여러 가지가 있으며, 그 중 타이머와 이벤트 리스너는 매우 유용한 도구입니다. 이 글에서는 자바스크립트에서 타이머와 이벤트 리스너를 사용하는 방법에 대해 심도 있게 다루어 보겠습니다. 타이머와 이벤트를 잘 활용하면 비동기 작업을 효율적으로 관리할 수 있으며, 이로 인해 애플리케이션의 성능과 반응성을 크게 향상시킬 수 있습니다.

타이머를 이용한 작업 스케줄링

자바스크립트에서 타이머를 이용하여 일정 시간 후에 작업을 실행하거나, 주기적으로 작업을 실행할 수 있습니다. 타이머는 setTimeout과 setInterval 함수로 설정할 수 있으며, 각각 1회성 작업과 주기적 작업에 사용됩니다.

1. setTimeout을 이용한 1회성 작업 실행

setTimeout 함수는 일정 시간이 지난 후에 콜백 함수를 실행합니다. 이는 특정 작업을 일정 시간 후에 실행하고자 할 때 유용하게 사용됩니다.

반응형

function simpleTimeout(consoleTimer) {
    console.timeEnd(consoleTimer);
}

console.time("twoSecond");
setTimeout(simpleTimeout, 2000, "twoSecond");

console.time("oneSecond");
setTimeout(simpleTimeout, 1000, "oneSecond");

console.time("fiveSecond");
setTimeout(simpleTimeout, 5000, "fiveSecond");

console.time("50MilliSecond");
setTimeout(simpleTimeout, 50, "50MilliSecond");

반응형

위 코드에서는 setTimeout을 이용해 각각 50밀리초, 1초, 2초, 5초 후에 simpleTimeout 함수가 실행되도록 설정했습니다.

2. setInterval을 이용한 주기적 작업 실행

반면, setInterval 함수는 일정 간격으로 반복적으로 콜백 함수를 실행합니다. 이는 특정 작업을 주기적으로 실행해야 할 때 매우 유용합니다.

반응형

var x = 0, y = 0, z = 0;
var idX, idY, idZ;

function displayValues() {
    console.log("X=%d; Y=%d; Z=%d", x, y, z);
}

function updateX() {
    x += 1;
}

function updateY() {
    y += 1;
}

function updateZ() {
    z += 1;
    displayValues();
}

function clearTimerAll() {
    clearInterval(idX);
    clearInterval(idY);
    clearInterval(idZ);
}

idX = setInterval(updateX, 500);
idY = setInterval(updateY, 1000);
idZ = setInterval(updateZ, 2000);
setTimeout(clearTimerAll, 10000);

반응형

이 예제에서는 setInterval을 사용하여 updateX, updateY, updateZ 함수가 각각 500밀리초, 1초, 2초 간격으로 실행되도록 설정했습니다. 10초 후에는 clearTimerAll 함수를 호출하여 모든 타이머를 종료합니다.

타이머 관리: 즉시 실행 및 보류/복구

타이머를 설정한 후에는 즉시 실행하거나, 특정 상황에서 타이머의 실행을 보류하거나 복구할 수 있는 기능도 있습니다.

1. setImmediate를 이용한 즉시 실행

setImmediate 함수는 호출과 동시에 콜백 함수를 실행하고, 이후에 주기적으로 실행할 수 있도록 설정합니다. 이는 비동기 작업을 매우 빠르게 시작하고 싶을 때 유용합니다.

반응형

function immediateCallback() {
    console.log("This function runs immediately!");
}

setImmediate(immediateCallback);

위 코드는 immediateCallback 함수를 즉시 실행하도록 설정합니다.

2. 타이머의 보류와 복구: unref와 ref

unref와 ref 함수는 타이머의 실행을 보류하거나 복구하는 데 사용됩니다. 이는 자바스크립트 애플리케이션이 유휴 상태로 진입하는 것을 방지하거나, 반대로 유휴 상태로 진입하게 할 수 있습니다.

반응형

var timer = setTimeout(() => {
    console.log("This will not run if unref is called.");
}, 5000);

timer.unref(); // 타이머 실행 보류

// 나중에 타이머를 재개하고 싶다면
timer.ref();

위 코드에서 unref를 호출하면, 설정된 타이머가 유일한 비동기 작업인 경우, 노드 애플리케이션은 타이머가 실행되기 전에 종료될 수 있습니다.

이벤트 기반 프로그래밍(EventEmitter 객체 사용하기)

자바스크립트에서 이벤트 기반 프로그래밍은 EventEmitter 객체를 이용하여 구현할 수 있습니다. 이벤트 기반 프로그래밍은 특히 서버 측 개발에서 비동기 이벤트를 관리하는 데 필수적입니다.

반응형

1. 이벤트 발생시키기(emit)

emit 메서드를 사용하면 특정 이벤트를 발생시킬 수 있습니다. 이는 이벤트 리스너가 해당 이벤트를 감지하고, 그에 따라 적절한 콜백 함수를 실행하도록 합니다.

var events = require('events');
var emitter = new events.EventEmitter();

emitter.emit("simpleEvent");

위 코드는 simpleEvent라는 이름의 이벤트를 발생시킵니다.

2. 이벤트 리스너 추가/삭제

이벤트 리스너를 추가하거나 제거함으로써, 이벤트가 발생했을 때 특정 작업을 수행하도록 할 수 있습니다.

이벤트 리스너 추가

이벤트 리스너는 on, once, addListener 메서드를 통해 추가할 수 있습니다.

반응형

var events = require("events");

function Account() {
    this.balance = 0;
    events.EventEmitter.call(this);

    this.deposit = function(amount) {
        this.balance += amount;
        console.log("occurred event in deposit");
        this.emit('balanceChanged'); // 이벤트 발생
    }
    
    this.withdraw = function(amount) {
        this.balance -= amount;
        console.log("occurred event in withdraw");
        this.emit('balanceChanged');
    }
}

Account.prototype.__proto__ = events.EventEmitter.prototype;

function displayBalance() {
    console.log("Account balance: $%d", this.balance);
}

function checkOverdraw() {
    if (this.balance < 0) {
        console.log("Account overdrawn!!!");
    }
}

var account = new Account();
account.on("balanceChanged", displayBalance);
account.on("balanceChanged", checkOverdraw);

account.deposit(220);
account.withdraw(300);

반응형

위 코드에서는 balanceChanged 이벤트가 발생할 때마다 잔액을 출력하고, 계좌가 초과 인출되었는지 확인합니다.

이벤트 리스너 제거

이벤트 리스너를 제거하려면 removeListener 메서드를 사용합니다.

account.removeListener("balanceChanged", displayBalance);

이 코드는 더 이상 잔액이 출력되지 않도록 displayBalance 리스너를 제거합니다.

이벤트와 타이머의 효율적인 결합

이벤트와 타이머를 결합하면 매우 복잡한 비동기 작업도 쉽게 처리할 수 있습니다. 예를 들어, 타이머를 설정하여 주기적으로 이벤트를 발생시키고, 이벤트 리스너를 통해 그에 따른 작업을 처리하는 구조를 만들 수 있습니다.

반응형

var events = require("events");

function TimerEvent() {
    events.EventEmitter.call(this);
    var self = this;

    this.start = function() {
        setInterval(function() {
            self.emit("tick");
        }, 1000);
    }
}

TimerEvent.prototype.__proto__ = events.EventEmitter.prototype;

var timerEvent = new TimerEvent();

timerEvent.on("tick", function() {
    console.log("Tick event triggered");
});

timerEvent.start();

위 코드에서는 1초마다 tick 이벤트가 발생하고, 그에 따라 이벤트 리스너가 호출됩니다. 이를 통해 주기적인 작업을 이벤트 기반으로 관리할 수 있습니다.

반응형

결론

자바스크립트에서 타이머와 이벤트를 효과적으로 사용하면 비동기 작업을 유연하고 효율적으로 관리할 수 있습니다. 이 글에서 다룬 예제들은 기본적인 타이머 및 이벤트 사용법부터 시작해, 복잡한 비동기 작업을 처리할 수 있는 방법까지 폭넓게 설명했습니다. 자바스크립트를 사용하여 비동기 작업을 처리할 때, 이러한 타이머와 이벤트의 조합을 잘 활용하면 더욱 강력하고 반응성 높은 애플리케이션을 개발할 수 있을 것입니다.