자바스크립트 콜백 함수와 비동기 처리 (Callback Functions and Asynchronous Processing)

09 Sep 2023

javascript

자바스크립트는 단일 스레드 기반의 언어이기 때문에 동기적인 처리를 기본으로 합니다. 그러나 웹 애플리케이션에서는 대부분의 작업이 비동기적으로 처리되어야 합니다. 이를 위해 자바스크립트는 콜백 함수와 비동기 처리를 제공합니다.

콜백 함수 (Callback Functions)

콜백 함수는 다른 함수의 인자로 전달되어 수행되는 함수입니다. 비동기 작업이 완료되거나 특정 이벤트가 발생했을 때, 콜백 함수가 실행됩니다.

function processAsync(callback) {
  setTimeout(function() {
    callback();
  }, 2000);
}

function greeting() {
  console.log("안녕하세요!");
}

processAsync(greeting); // 2초 후 "안녕하세요!" 출력

위의 예제에서 processAsync 함수는 2초 후에 콜백 함수를 실행합니다. 이는 비동기적인 처리를 하기 위한 기본적인 방법입니다.

비동기 처리 (Asynchronous Processing)

비동기 처리란, 특정 작업이 완료되기를 기다리지 않고 다음 코드를 실행하는 것을 말합니다. 자바스크립트에서 비동기 처리는 다양한 방식으로 이루어질 수 있습니다.

setTimeout

setTimeout 함수를 사용하면 주어진 시간만큼 대기한 후 콜백 함수를 실행할 수 있습니다.

console.log("첫 번째 줄");
setTimeout(function() {
  console.log("두 번째 줄");
}, 2000);
console.log("세 번째 줄");

위의 코드는 첫 번째 줄과 세 번째 줄을 바로 실행하고, 2초 후에 두 번째 줄이 출력됩니다.

XMLHttpRequest

서버로부터 데이터를 비동기적으로 가져올 때 자주 사용되는 XMLHttpRequest 객체는 콜백 함수를 활용하여 응답을 처리할 수 있습니다.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};
xhr.send();

위의 예제에서 xhr.onreadystatechange는 XMLHttpRequest 객체의 상태가 변할 때마다 호출되는 콜백 함수입니다. 이를 통해 서버로부터 데이터를 비동기적으로 받아와서 처리할 수 있습니다.

비동기 처리의 장점

비동기 처리를 사용하면 다음과 같은 장점을 얻을 수 있습니다.

애플리케이션의 응답 속도를 향상시킬 수 있습니다. 비동기적으로 작업을 처리하기 때문에, 다른 작업을 기다리지 않고 동시에 여러 작업을 수행할 수 있습니다.
웹 애플리케이션의 사용자 경험을 향상시킬 수 있습니다. 사용자는 비동기적으로 발생하는 이벤트에 대한 실시간 업데이트를 볼 수 있고, 장시간 작업이 진행될 때 애플리케이션이 먹통되는 것을 방지할 수 있습니다.

결론

자바스크립트의 콜백 함수와 비동기 처리를 이용하면 비동기 작업을 효과적으로 처리할 수 있습니다. 콜백 함수를 사용하여 특정 작업이 완료되었을 때 함수를 호출하거나, 비동기 작업 시간을 지연시키는 등의 기능을 구현할 수 있습니다. 비동기 처리를 통해 빠른 응답 속도와 좋은 사용자 경험을 제공하는 웹 애플리케이션을 개발해보세요.