Stimulus를 활용한 코나미 코드 구현

코나미 코드 이스터 에그의 구현은 HTML과 Stimulus 컨트롤러를 중심으로 이루어집니다. 먼저, HTML 마크업은 data-controller="sequence"와 data-action="keydown@window->sequence#detect" 속성을 통해 sequence 컨트롤러를 설정하고, 브라우저 창 전체에서 발생하는 키다운 이벤트를 감지하도록 합니다. sequence 컨트롤러는 사용자가 입력한 키를 저장하는 #enteredKeys 배열을 관리합니다. 키가 눌릴 때마다 해당 키는 배열에 추가되며, 배열의 길이가 미리 정의된 코나미 시퀀스 길이보다 길어지면 가장 오래된 키가 제거되어 최근 키 입력의 ‘슬라이딩 윈도우’를 형성합니다. #isSequenceTooLong와 #isSequenceMatched와 같은 private 메서드를 활용하여 코드의 가독성과 유지보수성을 높입니다. 키 시퀀스가 코나미 코드와 일치하는 경우, 단순히 콘솔에 메시지를 로깅하는 대신 this.dispatch("matched", { detail: { sequence: this.sequenceValue } }) 메서드를 사용하여 sequence:matched라는 커스텀 이벤트를 디스패치합니다. Stimulus의 dispatch 메서드는 CustomEvent 객체를 생성하고 window.dispatchEvent를 호출하는 과정을 간소화한 편의 메서드입니다. 커스텀 이벤트는 JavaScript 애플리케이션의 여러 컴포넌트 간에 비동기적으로 통신하는 강력한 메커니즘으로, Turbo와 같은 프레임워크에서도 핵심적인 역할을 합니다. 이 이스터 에그에 시각적인 즐거움을 더하기 위해, sequence:matched 이벤트를 수신하는 party 컨트롤러를 추가합니다. party 컨트롤러는 js-confetti 라이브러리를 활용하여 코나미 코드가 성공적으로 입력되었을 때 다채로운 폭죽 효과를 화면에 표시합니다. 이 구현 방식은 매우 유연하고 확장성이 뛰어나, 동일한 이벤트에 여러 리스너를 추가하여 다양한 추가 동작을 트리거하거나, 코나미 코드 외의 다른 사용자 정의 키 시퀀스를 쉽게 적용할 수 있습니다.