키보드 단축키 구현
우리는 Mousetrap를 사용하여 GitLab에서 키보드 단축키를 구현합니다.
Mousetrap은 JavaScript 핸들러에 바인딩될 수 있는 키보드 단축키 문자열(mod+shift+p 또는 p b와 같은)을 제공하는 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|커피 만들기'),
defaultKeys: ['mod+shift+c'],
};
그 다음, 적절한 키바인딩 그룹 객체에 새 명령을 추가하세요:
const COFFEE_GROUP = {
id: 'foodAndBeverage',
name: s__('KeyboardShortcuts|음식과 음료'),
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|모카 만들기'),
defaultKeys: [],
};
변경할 수 없는 단축키 만들기
가끔씩 키보드 단축키가 사용자 정의되지 않도록 하는 것이 중요할 수 있습니다(비록 이것은 드물게 발생해야 할 일입니다).
이 경우, 키보드 단축키는 customizable: false로 정의될 수 있으며, 이는 키바인딩의 사용자 정의를 비활성화합니다:
export const MAKE_AMERICANO = {
id: 'foodAndBeverage.makeAmericano',
description: s__('KeyboardShortcuts|아메리카노 만들기'),
defaultKeys: ['mod+shift+a'],
// 이는 이 단축키의 사용자 정의를 비활성화합니다
customizable: false
};
이 단축키는 항상 기본 키에 바인딩될 것입니다.
크로스 플랫폼 단축키 만들기
모든 플랫폼과 브라우저에서 잘 작동하는 단축키를 만드는 것은 어려운 일입니다. 이것이 단축키를 사용자 정의하고 비활성화할 수 있는 능력이 매우 중요한 이유 중 하나입니다.
키보드 단축키를 더 이식 가능하게 만드는 중요한 방법 중 하나는 mod 단축키 문자열을 사용하는 것인데, 이는 Mac에서 command로 해석되고 그렇지 않은 경우에는 ctrl로 해석됩니다.
더 많은 정보는 Mousetrap 문서를 참조하세요.
도움말