키보드 단축키 구현
우리는 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 함수와 새로운 명령어 객체를 가져와서 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
};
이 단축키는 항상 기본 키로 바인딩될 것입니다.
크로스 플랫폼 단축키 만들기
모든 플랫폼과 브라우저에서 잘 작동하는 단축키를 만드는 것은 어려운 일입니다. 이것이 단축키 사용자 정의 및 비활성화가 중요한 이유 중 하나입니다.
키보드 단축키를 더 이식성 있게 만드는 한 가지 중요한 방법은 mod 단축키 문자열을 사용하는 것입니다. 이는 Mac에서 command로 해석되고 그 외에서는 ctrl로 해석됩니다.
자세한 정보는 Mousetrap의 문서를 참조하세요.
도움말