← Back to NOTES 🌰 ← Effective JavaScript 🤿

← 아이템 65 - 계산 중 이벤트 큐를 블로킹하지 마라

핵심 요약

• 자바스크립트 애플리케이션에서 이벤트는 비결정론적으로, 즉 예측 불가능한 순서로 발생
• 동시 연산에서 데이터 경쟁(race condition)을 피하기 위해 카운터를 사용하라
• 배열 인덱스만으로 완료 여부를 판단하면 잘못된 결과를 얻을 수 있음
• pending 카운터를 사용하여 대기 중인 연산의 수를 추적하는 것이 올바른 구현
• 예측 불가능한 이벤트 순서에 관계없이 결과가 항상 예측 가능하도록 구현해야 함

자세한 내용

문제: downloadAllAsync 함수의 버그

URL 배열을 받아 모두를 다운로드하고, 각 URL당 하나의 문자열로 된 파일 내용의 배열을 반환하는 downloadAllAsync 유틸리티 함수를 구현할 때 발생하는 문제점들.

첫 번째 문제: 결과 순서

파일이 동시에 다운로드되기 때문에, 이벤트들이 임의의 순서로 발생할 수 있다. 만약 tiny.txt가 먼저 완료되고 medium.txt, huge.txt 순서로 완료된다면, files에 담긴 순서는 다운로드 요청할 때 입력했던 순서와 달라지게 된다.

첫 번째 해결: 고정된 인덱스에 저장

각 결과를 배열의 마지막에 푸시하는 것이 아니라 원본 인덱스의 위치에 저장한다.

두 번째 문제: 완료 시점 판단

고정된 인덱스에 저장하는 방식도 여전히 문제가 있다. tiny.txt 파일이 다른 파일보다 먼저 로딩이 끝나면, 결과 배열은 인덱스 2에 있는 프로퍼티를 얻어오려 할 것이고, 이는 result.length를 3으로 만들어 onsuccess를 너무 일찍 호출하는 결과를 가져오게 된다.

최종 해결: 카운터 사용

올바른 구현은 대기 중인 연산의 수를 추적하는 카운터를 사용하는 것이다.