[10분 테코톡] 📖 카일의 프론트엔드의 비동기(16분) 를 보고 정리하면서 추가적인 내용이 있는 글입니다 :)

<br/>

👀 CallBack

자바스크립트 개발자들은 꽤 오랜 시간 동안 비동기 처리를 위해 콜백 함수를 사용해왔습니다. 하지만 요새는 단순히 이 방법만으로 비동기를 처리하는 코드는 거의 보지 못할 것입니다.

콜백 기반의 비동기 처리 방식이 가지고 있었던 한계와 그 대안점으로 출현한 Promise, Async Function이 해결해고자 한 것이 무엇인지 살펴보겠습니다.

<br/>

1️⃣ 콜백 문제 - 신뢰성 (제어의 역전)

제어의 역전 (Inversion Of Control)

function BrowserTasks() {
  // 제어의 대상
	console.log('sync task');
	asyncRequest(asyncTask);
}

function asyncRequest(callBackFn) {
	// 비동기 요청과 함께 전달된 콜백은
  // 외부 라이브러리에 대한 의존성을 가져서 제어권의 주체가 뒤바뀝니다.
  // 콜백 내부에서 데이터에 대한 예외처리는 가능해도
  // 비동기 요청-콜백 호출로 이어지는 흐름은 외부에서 관찰하거나 제어할 수 없습니다.
  // ❗️이렇게 제어권이 뒤바뀌는 현상을 '제어의 역전'이라 합니다.
	ajax('url', function(data) {
			callBackFn(data);
	});
}

funciton asyncTask(data) {
	console.log(data);
}

<br/>

☑️ 제어권을 잃은 콜백으로 인해 가늠할 수 없는 경우는 다음과 같습니다.

1. 필요한 데이터를 콜백에 전달 했는지에 대한 여부
2. 호출 시점 (빠르거나, 느리거나)
3. 호출 횟수 (호출을 아예 안하거나, 많이 호출하거나)

유저가 어떤 상품의 구매 버튼을 눌렀을때, 서버에 요청을 보내는 콜백이 이와 같은 예시 중 하나라도 해당된다면 어떻게 될까요? 이러한 버그는 곧 매출에 직결되는 문제를 만듭니다. 더 심각한 것은 여기에 나열한 케이스는 최소한의 경우이고 방금의 상호아 또한 많은 예시 중 하나일 뿐이라는 점입니다.