키보드 단축키 구현
우리는 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의 문서를 참조하세요.