피드로 돌아가기
Dev.toFrontend
원문 읽기
@tanstack/hotkeys 기반 Ember Glimmer 라이프사이클 통합 선언적 단축키 설계
Declarative Hotkeys in Ember with @tanstack/hotkeys
AI 요약
Context
레거시 제거와 Type-safe 환경 구축을 위한 Ember Polaris 앱의 .gts 및 Vite 전환 과정 수행. 기존 단축키 관리 방식의 복잡성과 TypeScript 타입 안정성 결여로 인한 개발 생산성 저하 문제 직면.
Technical Solution
- Headless 라이브러리인 @tanstack/hotkeys 채택을 통한 런타임 오버헤드 최소화 및 타입 안정성 확보
- Ember Helper 클래스를 이용해 Glimmer 라이프사이클과 Hotkey 등록/해제 로직을 바인딩한 브릿지 설계
- Template Root 단계에서 Helper를 호출하는 선언적 인터페이스 구현으로 컴포넌트 렌더링 상태와 단축키 활성화 상태를 동기화
willDestroy훅을 통한 자동 리스너 해제로 메모리 누수 방지 및 리소스 관리 자동화Mod키 추상화 및formatForDisplay유틸리티 활용으로 OS별 플랫폼 종속적 입력 로직 제거- Input 요소 내 단일 키 입력 무시 및 App-level 명령(Ctrl/Meta) 허용하는 Pragmatic Defaults 적용
실천 포인트
- 컴포넌트 기반 프레임워크에서 글로벌 이벤트 리스너는 반드시 라이프사이클 훅(Destroy/Unmount)과 연동하여 설계할 것 - OS별 키 매핑 로직을 직접 구현하는 대신 `Mod`와 같은 추상화 레이어를 제공하는 라이브러리 검토 - 비즈니스 로직과 UI 선언부를 분리하기 위해 Modifier보다 Helper 형태의 브릿지 패턴 적용 고려