자바스크립트 비동기 처리의 이해: 콜백에서 프로미스까지

F-Lab : 상위 1% 개발자들의 멘토링

2024-03-14

AI가 제공하는 얕고 넓은 지식을 위한 짤막한 글입니다!

자바스크립트와 비동기 처리의 시작

자바스크립트는 싱글 스레드 기반의 언어로, 한 번에 하나의 작업만을 처리할 수 있습니다. 이러한 특성 때문에, 자바스크립트에서는 비동기 처리가 매우 중요한 개념으로 자리 잡고 있습니다.

비동기 처리는 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 실행하는 방식을 말합니다. 이를 통해 웹 애플리케이션의 성능을 향상시킬 수 있습니다.

왜냐하면 비동기 처리를 사용함으로써, 사용자의 입력 처리나 네트워크 요청과 같은 시간이 많이 소요되는 작업을 백그라운드에서 처리할 수 있기 때문입니다.

이 글에서는 자바스크립트의 비동기 처리 방법에 대해 콜백 함수부터 프로미스(Promise), 그리고 async/await까지 살펴보겠습니다.

비동기 처리는 자바스크립트의 효율적인 실행을 위해 필수적인 요소입니다.

콜백 함수(Callback Function)와 비동기 처리

콜백 함수는 다른 함수의 인자로 전달되는 함수로, 어떤 이벤트가 발생한 후 또는 특정 작업이 완료된 후에 실행됩니다. 자바스크립트에서 비동기 처리의 가장 기본적인 형태입니다.

콜백 함수를 사용한 비동기 처리는 간단하고 직관적이지만, 여러 비동기 작업을 연속적으로 처리할 경우 코드의 중첩이 심해지는 '콜백 지옥'이 발생할 수 있습니다.

왜냐하면 각 콜백 함수 내에서 다른 비동기 작업을 호출하고, 그 결과를 처리하기 위해 또 다른 콜백 함수를 사용해야 하기 때문입니다.

다음은 콜백 함수를 사용한 비동기 처리의 예제입니다.

    setTimeout(function() {
        console.log('Hello');
        setTimeout(function() {
            console.log('JavaScript');
        }, 1000);
    }, 1000);

이 예제에서 볼 수 있듯, setTimeout 함수는 비동기 작업을 수행하는 대표적인 예로, 지정된 시간이 지난 후 콜백 함수를 실행합니다.

프로미스(Promise)의 도입과 활용

프로미스는 자바스크립트 ES6에서 도입된 비동기 처리를 위한 객체입니다. 프로미스는 비동기 작업의 성공(fulfill) 또는 실패(reject)를 나타내는 결과값을 가집니다.

프로미스를 사용하면, 콜백 지옥 문제를 해결하고 비동기 코드의 가독성을 높일 수 있습니다. 프로미스는 then, catch, finally 메소드를 통해 비동기 작업의 결과를 처리합니다.

왜냐하면 프로미스는 비동기 작업의 성공과 실패를 명확하게 구분하고, 체이닝을 통해 여러 비동기 작업을 순차적으로 처리할 수 있기 때문입니다.

다음은 프로미스를 사용한 비동기 처리의 예제입니다.

    new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve('Hello Promise');
        }, 1000);
    }).then(function(result) {
        console.log(result);
        return 'Success';
    }).catch(function(error) {
        console.error(error);
    });

이 예제에서 볼 수 있듯, 프로미스 객체는 비동기 작업을 수행하고, 그 결과에 따라 then 또는 catch 메소드를 호출합니다.

async/await의 등장과 비동기 처리의 간소화

async/await는 자바스크립트 ES8에서 도입된 비동기 처리 패턴입니다. async 함수는 항상 프로미스를 반환하며, await 키워드는 프로미스의 결과가 반환될 때까지 함수의 실행을 일시 중지합니다.

async/await를 사용하면, 비동기 코드를 동기 코드처럼 간결하고 이해하기 쉽게 작성할 수 있습니다. 이는 비동기 처리의 복잡성을 크게 줄여줍니다.

왜냐하면 async/await를 사용함으로써, 프로미스의 then 체인을 사용하지 않고도 비동기 작업의 결과를 직관적으로 처리할 수 있기 때문입니다.

다음은 async/await를 사용한 비동기 처리의 예제입니다.

    async function asyncFunction() {
        const result = await new Promise(resolve => setTimeout(() => resolve('Hello async/await'), 1000));
        console.log(result);
    }
    asyncFunction();

이 예제에서 볼 수 있듯, async/await를 사용하면 프로미스의 결과를 기다리는 동안 함수의 실행이 일시 중지되고, 결과가 반환되면 다시 실행됩니다.