자바스크립트의 비동기처리 & 콜백 함수

 

 

동기식 처리 모델(Synchronous processing model)

일(task)을 직렬적, 순차적으로 처리하여 어떤 작업이 수행하는 동안 다음 작업은 대기하게 된다.  

비동기식 처리 모델(Asynchronous processing model)

일(task)를 병렬적으로 수행한다. 어떤 작업이 수행하는 동안 다음 작업이 대기하지 않고 수행된다. 즉 자바스크립트에서 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 실행하는 것이다.  자바스크립트의  대부분의 DOM 이벤트 핸들러와 Timer 함수(setTimeout, setInterval), Ajax 요청은 비동기식 처리 모델로 동작한다. 

( setTimeout의 콜백함수는 즉시 실행되지 않고 지정 대기 시간만큼 기다리다가 “tick” 이벤트가 발생하면 태스크 큐로 이동한 후 Call Stack이 비어졌을 때 Call Stack으로 이동되어 실행된다. )

자바스크립트의 비동기 처리 방식의 문제점은?

특정 로직의 실행이 끝날 때 까지 기다리지 않고 다음 코드들을 수행하기 때문에 특정 로직의 결과를 끝나기 전에 호출하는 문제점이 발생한다. 

해결방법

자바스크립트의 비동기 처리 방식에서 문제점들을 해결하기 위해서는 콜백함수를 이용하는 방법이 있다. 특정 로직이 끝날을 때 결과를 콜백 함수를 호출하며 인자로 넘겨주게 되면 특정 로직이 끝났을 때 원하는 동작을 수행시킬 수 있다. 

 

 

 

 

 

 

---

콜백 함수란? 

다른 코드의 인자로 넘겨주는 함수이다.

콜백 지옥이란? 

콜백 지옥은 비동기 처리 로직을 위해 콜백 함수를 연속으로 사용 할 때 발생하는 문제이다. 

예를 들어 서버에서 데이터를 받아와 한가지 로직이 아닌 여러 가지의 로직을 거쳐 화면에 표시하게 된다면 콜백 안에 콜백을 계속 무는 형식으로 코딩을 해야 하는 것이다. 

이러한 코드 구조는 가독성도 떨어지고 로직을 변경하기도 어렵다. 

콜백 지옥을 해결하는 방법

코딩 패턴을 개선하여 해결 해 줄 수 있지만 일반적으로 Promise나 Async를 사용하는 편한 방법이 있다. 

 

 

 

 

reference 

https://poiemaweb.com/js-async

https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/