키보드 단축키 구현

GitLab에서 Mousetrap 라이브러리를 사용해 키보드 단축키를 구현하고, 단축키를 추가·비활성화·커스터마이징하는 방법을 설명합니다.

GitLab에서 키보드 단축키를 구현할 때는 Mousetrap 을 사용합니다. Mousetrap은 키보드 단축키 문자열(예: mod+shift+p 또는 p b )을 JavaScript 핸들러에 바인딩할 수 있는 API를 제공합니다: // 이 방식은 사용하지 마세요. 아래 설명 참고 Mousetrap.bind('p b', togglePerformanceBar) 그러나 위와 같이 하드코딩된 키 시퀀스를 핸들러에 직접 연결하면, 사용자가 해당 키보드 단축키를 커스터마이징하거나 비활성화할 수 없습니다. 키보드 단축키를 커스터마이징할 수 있도록, 커맨드는 ~/behaviors/shortcuts/keybindings.js 에 정의됩니다. keysFor 메서드는 제공된 커맨드에 맞는 올바른 키 시퀀스를 반환하는 역할을 합니다: import { keysFor, TOGGLE_PERFORMANCE_BAR } from '~/behaviors/shortcuts/keybindings' Mousetrap.bind(keysFor(TOGGLE_PERFORMANCE_BAR), togglePerformanceBar); 단축키 커스터마이징 # keybindings.js 는 키보드 단축키 커스터마이징 내용을 localStorage 에 JSON 문자열로 저장합니다. keysFor 가 호출되면, 제공된 커맨드 객체의 id 를 사용해 localStorage 에 저장된 커스터마이징 내용을 조회하고, 커스텀 키바인딩이 있으면 해당 키바인딩을 반환하며, 커맨드가 커스터마이징되지 않은 경우에는 기본 키바인딩을 반환합니다. 현재 이 커스터마이징을 편집할 수 있는 UI는 없습니다. 새 단축키 추가 # 키보드 단축키는 최종 사용자가 커스터마이징하거나 비활성화할 수 있으므로, 개발자는 GitLab에 다양한 키보드 단축키를 적극적으로 추가하는 것이 권장됩니다. 사용 빈도가 낮을 것으로 예상되는 단축키는 기본적으로 비활성화 하는 것이 좋습니다. 새 단축키를 추가하려면, keybindings.js 에 새 커맨드 객체를 정의하고 내보냅니다: export const MAKE_COFFEE = { id: 'foodAndBeverage.makeCoffee', description: s__('KeyboardShortcuts|Make coffee'), defaultKeys: ['mod+shift+c'], }; 다음으로, 적절한 키바인딩 그룹 객체에 새 커맨드를 추가합니다: const COFFEE_GROUP = { id: 'foodAndBeverage', name: s__('KeyboardShortcuts|Food and Beverage'), keybindings: [ MAKE_ESPRESSO, MAKE_LATTE, MAKE_COFFEE ]; } 마지막으로, 애플리케이션 코드에서 keysFor 함수와 새 커맨드 객체를 import하고, Mousetrap을 사용해 단축키를 핸들러에 바인딩합니다: import { keysFor, MAKE_COFFEE } from '~/behaviors/shortcuts/keybin