[JavaScript] 간단한 비동기 애플리케이션, 왜 promise를 쓰는지 맛만 보기, 콜백함수

자바스크립트 공부하는데 비동기, 콜백함수 관련 개념이 많이 나와서 간단히만 정리해보려고 한다. 물론 자세하게 쓸 지식도 없지만(...) 이후에 개념이 정립이 되면 다시 정리하려고 한다.

 

일단 비동기의 동작에 대해 설명하면, 1번 작업과 2번작업이 동시에 실행되는 것이다. 또는 1번과 2번이 순차적으로 실행되지 않는 것이라고도 할 수 있다. 이렇게 말하면 어렵게 느껴지지만 간단한 코드를 보자.

 

console.log("1번 작업");

setTimeout(function() {
	console.log("2번 작업");
}, 3000);

console.log("3번 작업");

비동기 개념을 모를때는 "1번 작업", "2번 작업", "3번 작업"이 순차적으로 실행될거라고 생각할 것이다.

 

 

실행 결과

하지만 생각과는 다른 결과가 나온다는 것을 확인할 수 있다. 물론 JavaScript는 위에서부터 코드를 읽어내려간다. 따라서 "1번 작업" 을 실행하고, setTimeout 함수를 실행한다. 하지만 이 함수는 비동기 함수이기 때문에, 넘어가서 "3번 작업" 을 실행한 뒤, 3초 후에야 대기해놨던 "2번 작업"이 진행되는 것이다.

 

사실 위의 함수도 콜백함수인데, setTimeout 함수에 인자로 익명함수를 전달하고 있다. 콜백함수는 어려운 개념이 아니라 '다른 코드에 인자로 넘겨주고 원할때 실행할 수 있는 함수' 정도로 이해하면 편하다. 또한 이 콜백함수는 동기식으로 작동할 수도 있고 비동기식으로 작동할 수도 있다.

 

//동기 콜백함수
function sync(hello) {
    hello();
}

sync(()=>console.log("hello"));

예를 들어 위처럼 함수를 전달하고 즉시 실행할 수도 있다.

 

//비동기 콜백함수
function async(hello, sec) {
    setTimeout(hello, sec);
}

async(()=>console.log('hello'),2000);

이렇게 나중에 실행할 수도 있다.

 

 

이렇게 콜백함수를 쓰면 비동기 작업을 간단하게 처리할 수 있을것처럼 보인다. 하지만 해야하는 작업이 늘어나면 상황이 달라진다.

// Callback Hell Example

a(function (resultsFromA) {
    b(resultsFromA, function(resultsFromB) {
        c(resultFromC, function(resultFromC) {
              // more callback ...
        })
    })        
});

위 함수는 실제로 실행하는 것은 없는 극단적인 예시지만 실제로 콜백함수를 중첩시키다보면 비슷한 구조를 가지게 되는 경우가 많다. 

 

이런 코드는 가독성이 현저히 떨어지므로 유지보수에서 어려움을 겪을 수 밖에 없다.(콜백지옥이라고 한다.) 이럴 때 사용할 수 있는것이 바로 Promise 이다.

 

다음 포스팅에는 실제로 Promise를 사용해보도록 하자.

 

 

 

---

참고 :

 

callbackhell.com/

Callback Hell