피드로 돌아가기
Dev.toFrontend
원문 읽기
KeyboardEvent 필드 정밀 분석을 통한 레이아웃 독립적 단축키 설계 전략
A Live KeyboardEvent Inspector — Settling the `event.key` vs `event.code` Question for JS Shortcuts
AI 요약
Context
브라우저의 KeyboardEvent 처리 시 event.key와 event.code의 차이로 인한 입력 레이아웃 및 IME 호환성 이슈 발생. 기존의 keyCode 기반 처리 방식은 OS 및 브라우저별 일관성 결여로 인해 신뢰할 수 없는 레거시 구조로 전락함.
Technical Solution
- Physical Key 기반의 event.code를 채택하여 Dvorak, AZERTY 등 다양한 키보드 레이아웃에서도 일관된 Shortcut 동작 보장
- event.isComposing 및 legacy keyCode 229 체크 로직을 통한 IME 입력 중 단축키 오작동 방지 필터링 구현
- getModifierState() 메서드를 활용하여 boolean 플래그로 확인 불가한 CapsLock, NumLock, AltGraph 상태의 정밀 탐지
- event.location 필드를 통해 좌우 modifier 구분 및 Numpad 입력의 물리적 위치 식별 구조 설계
- DOM 의존성을 제거한 Pure Helper 모듈 기반의 설계로 Node.js 환경에서 합성 이벤트 객체를 통한 단위 테스트 가능 구조 확보
실천 포인트
- 전역 단축키 구현 시: event.code를 사용하여 물리적 키 위치에 바인딩할 것 - 텍스트 입력 처리 시: event.key를 사용하여 실제 출력 문자를 캡처할 것 - IME 입력 대응: isComposing 필드와 keyCode 229를 동시에 체크하는 가드 로직 적용 - 특수 Modifier 확인: CapsLock 등의 상태가 필요할 경우 getModifierState() 호출