자바스크립트 비동기 콜 스택(callstack) , 콜 백(callback)

자바스크립트는 쓰레드가 단일이다.

동시에 처리하는게 아닌 하나씩 처리를 해나간다는 뜻이다.

 

그렇기 때문에 비동기식 처리가 꼭 필요하다.

그렇지 않으면 데이터를 불러오는 시간동안 처리가 멈춰있으니

매우 비효율적이다.

 

일단 콜스택과 콜백에 대해 알아보려고 한다.

 

 

# 콜 스택(call stack)

데이터 저장방식에 스택과 큐가 있었다.

콜 스택의 스택이 바로 그 뜻이다.

 

예를 들어서

function add(a, b){
	return a + b;
}

function square(){
	return add(1, 2) * add(1, 2);
}

function half(){
	return square() / 2;
}

보기와 같은 함수들이 있다고 치자

두 수를 더해서 제곱한후 2로 나누는 수학 식이 있다고 가정하고

half();

하프 함수를 실행해서 크롬으로 확인해보면

 

콜 스택이 쌓이는 것을 볼 수 있다.

half를 실행했을 때 square로 square에서 add로 쌓아올라가면서 

add 부터 계산해서 하나씩 사라진다.

 

이것을 콜 스택이라고 한다.

 

# 콜백(callback)

 

함수에서 파라미터로 전달되는 함수를 콜백 함수라고 한다.

 

예를 들어서

1초마다 배경색이 바뀌는 화면이 있다고 치자

 

setTimeout(() => {
	obj.style.background = 'red';
}, 1000)

setTimeout(() => {
	obj.style.background = 'yellow';
}, 1000)

이렇게 작성하면 결과는

빨간색으로 바뀌었다가 노란색으로 바뀌는게 보이지도 않을것이다.

 

1초마다 라는 간격을 주려면 뒤에 실행된것 보다 1초를 더 딜레이 시켜줘야 한다.

setTimeout(() => {
	obj.style.background = 'red';
}, 1000)

setTimeout(() => {
	obj.style.background = 'yellow';
}, 2000)

이렇게 하면 1초 후 빨간색으로 바뀌엇다가 또 1초 후 노란색으로 바뀐다.

 

함수 안에서 처리하면

setTimeout(() => {
	obj.style.background = 'red';
    setTimeout(() => {
		obj.style.background = 'yellow';
	}, 1000)
}, 1000)

이런식으로 쓸수 있다.

 

콜백은 통신할 때 성공일 때와 실패일 때를 구분할 때에 자주 사용한다.

강아지의 정보를 가져온다고 치자

searchDog('hoho', function(success, fail){
	if(success){
    	// 성공일때
    	getName(name, function(success, fail){
        	if(success){
            	// 성공
            }else {
            	// 실패
            }
        })
    }else if(fail){
    	// 실패
    }
})

아주 작은 예지만 이런식으로 성공 실패를 나누고 그 안에서 성공 실패를 또 나눈다.

이런 식의 콜백안에 콜백이 계속 되는 것을 콜백 지옥이라고 한다.

중첩의 연속이면서 보기도 힘들다.

 

 

혼자서는 하나의 일밖에 못하기 때문에 브라우저의 힘을 빌려서 콜백을 사용하는데

이것이 단일 쓰레드인 자바스크립트의 문제이다.

 

역시나 해결방안은 있다.

바로 Promise 비동기 함수이다.

유용한만큼 어렵기 때문에 내용이 길어질 수 있으니 다음에 이어서 진행해보려고 한다.