GitLab에서는 Mousetrap을 사용하여 키보드 단축키를 구현합니다.

Mousetrap은 mod+shift+p 나 p b 같은 키보드 단축키 문자열을 JavaScript 핸들러에 바인딩할 수 있는 API를 제공합니다.

// Don't do this; see note below
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 문자열로 localStorage에 저장합니다. 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'],

  // this disables customization of this shortcut
  customizable: false
};

이 단축키는 항상 defaultKeys에 바인딩됩니다.

크로스 플랫폼 단축키 만들기#

모든 플랫폼과 브라우저에서 잘 동작하는 단축키를 만들기는 어렵습니다. 단축키를 커스터마이징하고 비활성화할 수 있다는 점이 중요한 이유도 여기에 있습니다.

키보드 단축키의 이식성을 높이는 중요한 방법 하나는 mod 단축키 문자열을 사용하는 것입니다. 이 문자열은 Mac에서는 Command, 그 외에서는 Control로 해석됩니다.

자세한 내용은 Mousetrap 문서를 참고합니다.