JS)비동기 처리란 무엇인가? 콜백부터 콜백 지옥 해결까지

자바스크립트 비동기 처리의 이해와 사례

---

자바스크립트의 비동기 처리는 특정 연산이 끝날 때까지 기다리지 않고 다음 코드를 실행하며 효율적인 작업 흐름을 유지하는 중요한 개념입니다. 서버 요청이나 시간 지연 처리와 같은 상황에서 유용하게 사용됩니다. 이번 글에서는 비동기 처리의 대표적인 사례들과 이를 처리하기 위한 방식들을 살펴보겠습니다.

---

비동기 처리란?

비동기 처리는 자바스크립트에서 특정 코드의 연산이 끝날 때까지 기다리지 않고 다음 코드를 먼저 실행하는 특성입니다. 이는 주로 다음과 같은 이유에서 중요합니다:

1. 서버 응답 대기 시간 절약: 요청이 완료될 때까지 멈춰 있으면 전체 애플리케이션이 느려질 수 있습니다.
2. 다중 작업 처리: 여러 요청이나 작업을 동시에 처리하여 효율성을 높입니다.

대표적인 비동기 처리 방식에는 ajax, setTimeout(), Promise, async/await가 있습니다.

---

1. Ajax와 비동기 처리

Ajax 코드의 비동기적 동작

function getData() {
    var tableData;
    $.get('https://domain.com/products/1', function(response) {
        tableData = response;
    });
    return tableData;
}

console.log(getData()); // undefined

왜 undefined가 나올까?

$. get()은 서버에 데이터를 요청한 후 응답을 기다리지 않고 바로 다음 코드(return tableData;)를 실행합니다. 데이터가 아직 준비되지 않았으므로 undefined가 반환됩니다.

해결 방법: 콜백 함수 사용

function getData(callbackFunc) {
    $.get('https://domain.com/products/1', function(response) {
        callbackFunc(response);
    });
}

getData(function(tableData) {
    console.log(tableData); // 서버의 응답 데이터를 처리
});

콜백 함수는 서버의 응답 데이터가 준비된 후에 실행되므로 문제를 해결할 수 있습니다.

---

2. setTimeout()과 비동기 처리

코드 예시

console.log('Hello'); // #1
setTimeout(function() {
    console.log('Bye'); // #2
}, 3000);
console.log('Hello Again'); // #3

실제 출력 결과

Hello
Hello Again
Bye (3초 후 출력)

setTimeout()은 Web API로 지정된 시간(3000ms)을 기다리는 동안 다른 코드(console.log('Hello Again'))를 먼저 실행합니다.

---

3. 콜백 지옥과 문제점

콜백 지옥은 비동기 처리를 위해 콜백 함수가 중첩될 때 발생합니다.

$.get('url', function(response) {
    parseValue(response, function(id) {
        auth(id, function(result) {
            display(result, function(text) {
                console.log(text);
            });
        });
    });
});

문제점

• 가독성 저하: 코드를 읽거나 디버깅하기 어렵습니다.
• 유지보수 어려움: 로직을 수정하거나 확장하는 데 많은 비용이 듭니다.

---

4. 콜백 지옥 해결 방법

1) 함수 분리

function parseValueDone(id) {
    auth(id, authDone);
}
function authDone(result) {
    display(result, displayDone);
}
function displayDone(text) {
    console.log(text);
}

$.get('url', function(response) {
    parseValue(response, parseValueDone);
});

2) Promise 사용

$.get('url')
    .then(parseValue)
    .then(auth)
    .then(display)
    .then(console.log)
    .catch(console.error);

3) async/await 사용

async function process() {
    try {
        const response = await $.get('url');
        const id = await parseValue(response);
        const result = await auth(id);
        const text = await display(result);
        console.log(text);
    } catch (error) {
        console.error(error);
    }
}

process();

---

마무리

자바스크립트의 비동기 처리 방식은 코드 실행을 효율적으로 관리하고 사용자 경험을 개선하는 데 필수적입니다. 그러나 비동기 처리 중 발생할 수 있는 문제점을 이해하고, 콜백 함수, Promise, async/await를 적절히 활용하면 효율적이고 가독성 높은 코드를 작성할 수 있습니다.

---