WEB/JavaScript

[JavaScript][비동기] 비동기 처리는 코드의 실행순서가 불명확 => 콜백 함수를 사용하자

bay07 2024. 4. 25. 11:22

문제의식)

▶ 비동기 처리의 단점 

비동기 처리의 핵심은 Web API로 들어오는 순서가 아니라 
작업이 완료되는 순서에 따라 처리한다는 것이다. 

그런데 이는 개발자 입장에서 보면
코드의 실행 순서가 불명확하다는 단점이 존재한다 

이와 같은 단점은
실행 결과를 예상하면서 코드를 작성할 수 없게 한다

 

해결방안)

콜백 함수 활용하기 


비동기 콜백 

처리하는 작업이 비동기적으로 완료되었을 때 실행되는 함수 
연쇄적으로 발생하는 비동기 작업을 
순차적으로 동작할 수 있게 해준다 

=> 작업의 순서와 동작을 제어하거나, 결과를 처리하는 데 사용한다 



 비동기 콜백의 한계

비동기 콜백 함수는 
보통 어떤 기능의 실행 결과를 받아서 
다른 기능을 수행하기 위해 많이 사용된다 

이 과정을 작성하다 보면, 비슷한 패턴이 계속 발생한다 

A를 처리해서 결과가 나오면, 첫번째 callback 함수를 실행하고 
첫 번째 callback 함수가 종료되면, 두 번째 callback 함수를 실행하고 
두 번째 callback 함수가 종료되면, 세 번째 callback 함수를 실행하고 ... 
=>콜백 지옥의 발생 

▶콜백 지옥 (Callback Hell)

비동기 처리를 위한 콜백을 작성할 때 마주하는 문제 

작성된 코드의 형태가 마치 "피라미드"와 같다고 해서 
Pyramid of doom (파멸의 피라미드)라고 불린다 

▶콜백 함수 정리 

콜백 함수는 비동기 작업을 순차적으로 실행할 수 있게 하는 로직이다. 
(반드시 필요함)

비동기 코드를 작성하다 보면, 콜백 지옥은 빈번히 발생하는 문제이며
이는 코드의 가독성을 해치게 된다. 
(유지보수가 어려워짐)
=> 콜백 지옥에 빠지지 않는 다른 표기 형태가 필요하다