JS 에서의 비동기처리

JavaScript에서 비동기 처리를 위한 여러 가지 방법들이 있습니다.

콜백 함수 (Callback functions):

fs.readFile('/file.txt', function(err, data) {
    if (err) throw err;
    console.log(data);
});

JavaScript에서 가장 오래된 비동기 처리 방법 중 하나입니다.
비동기적으로 실행될 함수를 다른 함수의 인자로 전달하는 방식입니다.
그러나 콜백 함수는 중첩이 많아질 경우 코드를 이해하고 디버그하기 어렵게 만드는
콜백 지옥(callback hell) 문제를 가지고 있습니다.

프로미스 (Promises):

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(err => console.error(err));

콜백 지옥 문제를 해결하기 위해 도입된 방식입니다.
프로미스는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체입니다.
프로미스는 .then과 .catch 메서드를 통해 결과값이나 예외를 처리합니다.

제너레이터 (Generators):

function* generatorFunction() {
    const data = yield fetch('https://api.example.com/data');
    console.log(data);
}

제너레이터 함수는 호출자와 협력하여 작업을 수행하며, 중간에 실행을 일시 중단하고 다시 시작할 수 있습니다.
이러한 특성 때문에 비동기 작업을 동기적으로 보이게 작성할 수 있게 해줍니다.

Async/Await:

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
    } catch (err) {
        console.error(err);
    }
}

프로미스를 더 편하게 사용할 수 있게 만드는 문법적 설탕(syntactic sugar)입니다.
함수 앞에 async를 붙이면 해당 함수는 항상 프로미스를 반환하며,
async 함수 내에서 await를 사용하면 프로미스의 결과값을 기다릴 수 있습니다.

이벤트 리스너 (Event listeners):

document.getElementById('myButton').addEventListener('click', function() {
    console.log('Button clicked!');
});

이벤트 리스너를 등록해두면, 특정 이벤트가 발생했을 때 등록된 함수가 자동으로 호출됩니다.
이벤트 리스너를 사용하면 비동기적으로 이벤트를 처리할 수 있습니다.

백그라운드 워커 (Web Workers, Service Workers):

var myWorker = new Worker('worker.js');
myWorker.postMessage([first.value, second.value]);
myWorker.onmessage = function(e) {
    result.textContent = e.data;
}

웹 워커를 사용하면 백그라운드 스레드에서 스크립트를 실행할 수 있습니다.
이를 통해 주 스레드가 블로킹되지 않고 비동기 작업을 수행할 수 있습니다.

이러한 각 비동기 처리 방법들은 각각의 장점과 단점을 가지고 있으며, 작업의 특성에 따라 적절한 방법을 선택하여 사용하게 됩니다.