JavaScript Generator 기반의 알고리즘-UI 완전 분리 설계

Context

기존 정렬 시각화 구현 방식은 알고리즘 로직 내부에 DOM 조작과 async/await 기반의 sleep 함수가 혼재된 Tightly Coupled 구조임. 이로 인해 DOM 환경 없이는 로직 테스트가 불가능하며, 애니메이션 속도 변경 및 중단 제어를 위해 복잡한 상태 플래그를 관리해야 하는 한계가 존재함.

Technical Solution

• Generator 함수 도입을 통한 알고리즘 로직과 애니메이션 드라이버의 Concern Separation 구현
• yield 키워드를 활용해 비교 및 교환 시점의 상태를 외부로 전달하는 상태 기반 제어 구조 설계
• Animation Driver가 .next() 호출과 setTimeout을 통해 실행 흐름을 제어함으로써 알고리즘 코드 내 DOM 의존성 제거
• delay() 함수가 호출 시점에 슬라이더 값을 읽도록 설계하여 실행 중 즉각적인 속도 변경 반영 구조 구축
• clearTimeout 기반의 단순한 중단 메커니즘을 통해 별도의 취소 플래그 없는 클린한 제어 흐름 확보
• Recursive call 시 yield*를 통한 제너레이터 위임으로 Merge/Quick Sort의 계층적 상태 전달 최적화