#21 자바스크립트 비동기 처리: setTimeout과 setInterval

자바스크립트는 기본적으로 단일 스레드로 작동하는 언어입니다. 이 말은 한 번에 하나의 작업만 처리할 수 있다는 것을 의미합니다. 하지만 웹 애플리케이션 개발에서는 여러 작업이 동시에 이루어지는 것처럼 보여야 하는 경우가 많습니다. 예를 들어, 버튼을 클릭한 후 데이터를 서버에서 가져오는 동안 다른 작업을 계속할 수 있어야 합니다. 이러한 상황을 처리하기 위해 자바스크립트는 비동기 처리(Asynchronous Processing) 메커니즘을 제공합니다.

이 글에서는 자바스크립트의 비동기 처리 메커니즘 중 가장 기본적인 setTimeout과 setInterval에 대해 설명하고, 실제 사용 예제를 통해 그 동작 방식을 살펴보겠습니다.

비동기 처리란?

비동기 처리란 어떤 작업이 완료될 때까지 기다리지 않고, 그 작업과 상관없이 다음 작업을 계속 진행하는 방식을 의미합니다. 자바스크립트에서는 setTimeout, setInterval과 같은 함수, 프로미스(Promise), 그리고 비동기 함수(async/await) 등을 통해 비동기 처리를 구현할 수 있습니다.

setTimeout 함수

setTimeout 함수는 지정한 시간 후에 특정 작업(콜백 함수)을 한 번 실행합니다. 이 함수는 다음과 같은 형식을 가집니다.

setTimeout(callback, delay);

• callback: 지연 시간 후에 실행할 함수입니다.
• delay: 지연 시간을 밀리초(ms) 단위로 지정합니다.

setTimeout 예제

console.log('Start');

setTimeout(function() {
    console.log('This message is delayed by 2 seconds');
}, 2000);

console.log('End');

위 코드를 실행하면 다음과 같은 순서로 로그가 출력됩니다:

1. console.log('Start')가 먼저 실행됩니다.
2. setTimeout 함수가 호출되어, 2초 후에 실행될 콜백 함수가 태스크 큐에 등록됩니다.
3. console.log('End')가 실행됩니다.
4. 2초 후, setTimeout의 콜백 함수가 실행되어 "This message is delayed by 2 seconds"가 출력됩니다.

출력 결과는 다음과 같습니다:

Start
End
This message is delayed by 2 seconds

이 예제에서 알 수 있듯이, setTimeout 함수는 콜백 함수의 실행을 일정 시간 동안 지연시키지만, 자바스크립트는 해당 시간을 기다리지 않고 다음 코드를 계속 실행합니다. 이것이 바로 비동기 처리의 기본적인 동작 방식입니다.

setInterval 함수

setInterval 함수는 지정한 시간 간격마다 특정 작업(콜백 함수)을 반복적으로 실행합니다. 이 함수는 다음과 같은 형식을 가집니다.

setInterval(callback, delay);

• callback: 지정한 간격마다 실행할 함수입니다.
• delay: 반복 간격을 밀리초(ms) 단위로 지정합니다.

setInterval 예제

let counter = 0;

const intervalId = setInterval(function() {
    counter++;
    console.log(`Counter: ${counter}`);

    if (counter === 5) {
        clearInterval(intervalId);
    }
}, 1000);

위 코드는 counter라는 변수를 1초마다 증가시키고, 그 값을 콘솔에 출력합니다. counter가 5에 도달하면 clearInterval 함수를 호출하여 setInterval을 중단합니다.
출력 결과는 다음과 같습니다:

Counter: 1
Counter: 2
Counter: 3
Counter: 4
Counter: 5

이 예제에서 setInterval 함수는 1초마다 counter 값을 증가시키고, 증가된 값을 출력합니다. clearInterval을 사용해 반복을 중지하지 않으면, 이 함수는 무한히 실행될 수 있습니다.

setTimeout과 setInterval의 차이점

• setTimeout: 지정된 시간이 지나면 한 번만 실행됩니다.
• setInterval: 지정된 시간 간격으로 계속해서 반복 실행됩니다.

비동기 처리의 중요성

비동기 처리는 자바스크립트에서 매우 중요한 개념입니다. 브라우저나 Node.js 환경에서는 많은 작업이 비동기적으로 처리됩니다. 예를 들어, 사용자 입력을 처리하는 이벤트 핸들러, 서버와의 통신(HTTP 요청), 타이머, 파일 읽기 등이 모두 비동기적으로 동작합니다. 이를 통해 자바스크립트는 사용자가 특정 작업을 기다릴 필요 없이 다른 작업을 계속할 수 있게 해줍니다.

비동기 처리 예제: setTimeout

다음은 setTimeout을 사용하여 애니메이션 효과를 구현하는 간단한 예제입니다.
애니메이션 예제

let position = 0;

function moveBox() {
    position += 5;
    document.getElementById('box').style.left = position + 'px';

    if (position < 300) {
        setTimeout(moveBox, 20);
    }
}

moveBox();

이 코드는 setTimeout을 사용해 moveBox 함수를 20ms마다 반복적으로 호출하여, HTML 요소를 오른쪽으로 이동시키는 애니메이션을 만듭니다. 이 예제는 자바스크립트의 비동기 처리 방식을 활용하여 사용자 인터페이스를 부드럽게 처리하는 방법을 보여줍니다.

결론

자바스크립트의 비동기 처리는 웹 애플리케이션에서 매우 중요한 역할을 합니다. setTimeout과 setInterval은 비동기 작업을 처리하는 기본적인 도구로, 지연된 작업이나 주기적인 작업을 쉽게 구현할 수 있게 해줍니다. 비동기 처리의 개념과 이러한 도구들을 잘 이해하면, 더 효율적이고 응답성 높은 애플리케이션을 개발할 수 있습니다.