[Task queue] click과 promise

자세한 정리는 나중에 시간을 내서 하기로 하고 지금은 기록을 위한 간단한 정리.

 

마이크로태스크 큐에 쌓인 태스크들은 매크로태스크가 한 번 실행될 때마다 처리된다.

다시 말해 하나의 마이크로태스크 큐가 실행될 때 그동안 쌓인 N개의 마이크로태스크 큐가 처리된다.

 

클릭 이벤트는 매크로태스크 큐에 들어간다. Promise는 마이크로태스크 큐에 들어간다.

반복문 안에서 데이터를 가져오는 fetch 함수가 호출되고 있다고 해보자. 이 때 발생한 클릭 이벤트는 매크로태스크 큐에 들어간다. 핸들러가 있다면 핸들러도 매크로태스크 큐에 들어간다. 처리되고 있던 매크로태스크가 끝나면 마이크로태스크들이 처리될 거고, 클릭 이벤트가 처리될 때 그동안 쌓인 마이크로태스크 큐들이 처리될  거다.

 

작업을 하다가 발견한 것인데 다음 의사 코드를 보자.

let indicators = [];
zNodes.map(function(item) {
    const nowTreeObj = zTreeObj.getNodeByParam('id', item.id);

    fetch("/daaURL").then(function(data) {

        const addItem = data.list.map(function(item) {
            return {
                id: item.piCode,
                pId: nowTreeObj.id,               
            }
        });

        indicators.push(...addItem);

        zTreeObj.addNodes(nowTreeObj, addItem, true);
    });
});

// console.log(indicators) // 당연히 빈 배열이 출력된다

// 클릭 이벤트
treeNode[0].addEventListener('click', function(event) {
    const targetNode = event.target;

    if (zNodes.find(function(item) { return item.name === targetNode.textContent})) {
        return;
    }
    
    console.log(indicators);				
});

주목할 코드는 indicators를 출력하는 console.log(indicators) 다. 해당 클릭 이벤트가 발생하기 전에 zNode.map 함수에서 fetch를 반복적으로 호출하는 코드가 돌고 있는 상태에서(마이크로태스크 큐에 태스크가 쌓이면서) 클릭 이벤트가 발생한다. 그러므로 클릭 이벤트가 발생하는 시점에 따라 indicators에 있는 데이터가 달라진다. 이런 일이 발생하는 이유는 앞서 얘기했던 매크로태스크와 마이크로태스크 간에 관계 때문이다.

 

하나의 매크로태스크가 처리되고 나서 마이크로태스크들이 처리되고 있을 때, 마이크로태스크가 추가된다고 해서 이어서 이들이 처리되지 않는다. 만약 이런 매커니즘이라면 매크로태스크는 영원히 처리되지 않을지도 모른다. 처리되던 마이크로태스크가 다 처리되고 나서야 다음 마이크로태스크가 실행된다(물론 이 사이에 자바스크립트 엔진은 렌더링 같은 작업도 해야 한다.) 그러므로 데이터 로드가 진행 중일 때 클릭 시점에 따라 출력되는 데이터 수가 달라지게 된다.