[Node.js] 콜백헬을 해결하기 위한 Promise와 Async/await 알아보기

안녕하세요. 

오늘은 콜백헬이 뭔지 알아보고 해결하기 위한 방법인 promis와 Async/await에 대해 알아보겠습니다.

 

 

1. 동기 vs 비동기

동기방식은 하난가 끝날 때까지 다음 작업을 수행할 수 없는 방식으로, 데이터의 요청과 결과가 한 자리에서 동시에 일어나는 것입니다. 

비동기 방식은 요청과 결과가 한 자리에서 일어나지 않는 방식으로, 요청 후 응답을 기다리지 않고 다른 활동을 합니다. 

 

 

 

2. 콜백 (Callback) 함수?

함수가 끝난 뒤 실행되는 함수로, 함수를 만들 때 parameter로 함수를 받아서 사용합니다. 

 

 

 

3. 예시

console.log("1 start");

// cb: callback function
function login(id, pw, cb) {
    setTimeout(() => {
        console.log( '2 정보없음' );
        cb(id);
    }, 0);
}


const users = login("teamnova", "123", user => {
    console.log('3 '+ user + "님 반갑습니다.");
});


console.log("4 finish");

 

 

 

4. 결과

1 start
4 finish
2 정보없음
3 teamnova님 반갑습니다.

1-2-3-4가 아닌 1-4-2-3 순으로 결과가 출력됩니다. 

왜냐면  setTimeout()함수가 비동기함수이기 때문입니다. 

login()함수가 비동기적으로 실행되기 때문에 4가 실행된 후에 3의 코드가 값을 반환하게 됩니다. 

 

 

 

5. 예시

console.log("1 start");

// cb: callback function

function login(id, pw, cb) {

  console.log( '2 정보없음' );

  cb(id);

    // setTimeout(() => { // 비동기 함수를 주석처리함

    // }, 0);

}

const users = login("teamnova", "123", user => {

    console.log('3 '+ user + "님 반갑습니다.");

});

console.log("4 finish");

 

 

6. 결과

1 start
2 정보없음
3 teamnova님 반갑습니다.
4 finish

비동기 함수를 주석처리했더니 1-2-3-4순으로 출력이 됩니다. 

 

 

 

7. 콜백 지옥(Callback Hell)?

콜백지옥이란 비동기 처리에 함수의 매개변수가 넘겨지는 콜백 함수가 반복되어 코드의 들여쓰기가 깊어지는 현상을 말합니다. 가독성이 떨어지고 코드 수정이 어렵다는 문제가 있습니다. 

 

 

 

8. 예시

(1)

원하는대로 실행이 되지않는 예시

Start - 1초마다 출력(3개) - End

이렇게 출력되기를 원하지만 생각대로 안 됩니다.

 

 

(2)

콜백헬 예시

콜백 안에 콜백 안에 콜백함수를 넣는 형태로 만들게 되었습니다. 

콜백헬에 빠졌습니다. 

 

 

(코드)

console.log("Start");

setTimeout(() => {

    console.log("First callback");

    setTimeout(() => {

        console.log("Second callback");

        setTimeout(() => {

            console.log("Third callback");

        }, 1000);

    }, 1000);

}, 1000);

console.log("End");

 

 

 

9. 해결방법 - (1)

promise객체로 콜백헬 피하기

promise 객체를 사용한다면 then()을 이용해서 기존의 중첩되는 구조를 피할 수 있다. 

 

 

 

(코드)

console.log("Start");

function delay(time) {

    return new Promise((resolve) => {

        setTimeout(() => {

            console.log(`Delayed for ${time / 1000} seconds`);

            resolve();

        }, time);

    });

}

delay(1000)

    .then(() => delay(1000))

    .then(() => delay(1000))

    .then(() => {

        console.log("End");

    });

 

 

 

10. 

async/await를 사용해서 콜백헬 피하기

async/await를 사용해서 간단하게 코드를 작성할 수 있습니다. 

 

 

(코드)

function delay(ms) {

  return new Promise((resolve) => {

      setTimeout(resolve, ms);

  });

}

async function main() {

  console.log("Start");

  await delay(1000);

  console.log("First callback");

  await delay(1000);

  console.log("Second callback");

  await delay(1000);

  console.log("Third callback");

  console.log("End");

}

main();

 

 

이상으로 콜백헬을 해결하기 위한 Promise와 Async/await 알아보기였습니다 :)