키보드 단축키 구현
우리는 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는 로컬 스토리지에 키보드 단축키 사용자화를 JSON 문자열 형식으로 저장합니다. keysFor가 호출될 때, 제공된 명령어 객체의 id를 사용하여 로컬 스토리지에서 발견된 사용자화를 조회하고, 사용자화되지 않은 경우 기본 키바인딩을 반환합니다. 이러한 사용자화를 편집할 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 함수와 새로운 명령어 객체를 가져와서 Mousetrap을 사용하여 단축키를 핸들러에 바인딩하세요:
import { keysFor, MAKE_COFFEE } from '~/behaviors/shortcuts/keybindings'
Mousetrap.bind(keysFor(MAKE_COFFEE), makeCoffee);
기타 예제는 keybindings.js의 기존 명령어 정의를 참조하세요.
단축키 비활성화
단축키는 빈 배열 []에 할당하여 비활성화할 수 있으며, 이를 _비할당_이라고도 합니다. 예를 들어, 기본적으로 비활성화된 새로운 단축키를 도입하려면 다음과 같이 명령어를 정의할 수 있습니다:
export const MAKE_MOCHA = {
id: 'foodAndBeverage.makeMocha',
description: s__('KeyboardShortcuts|Make a mocha'),
defaultKeys: [],
};
단축키를 사용자화 불가능하게 만들기
가끔, 키보드 단축키가 _사용자화_되지 않아야 할 필요가 있습니다(이는 드문 경우입니다).
이 경우, customizable: false로 단축키를 정의하여 키바인딩의 사용자화를 비활성화할 수 있습니다:
export const MAKE_AMERICANO = {
id: 'foodAndBeverage.makeAmericano',
description: s__('KeyboardShortcuts|Make an Americano'),
defaultKeys: ['mod+shift+a'],
// 이것은 이 단축키의 사용자화를 비활성화합니다
customizable: false
};
이 단축키는 항상 defaultKeys에 바인딩됩니다.
크로스 플랫폼 단축키 만들기
모든 플랫폼과 브라우저에서 잘 작동하는 단축키를 만드는 것은 어렵습니다.
이것은 단축키를 사용자 정의하고 비활성화할 수 있는 것이 매우 중요한 이유 중 하나입니다.
키보드 단축키를 보다 이동할 수 있도록 만드는 중요한 방법 중 하나는 mod 단축키 문자열을 사용하는 것입니다.
이 문자열은 Mac에서는 command로, 그 외의 경우에는 ctrl로 변환됩니다.
자세한 내용은 Mousetrap 문서를 참조하세요.
도움말