Repolode
jamiebuilds

jamiebuilds/tinykeys

키보드 단축키와 여러 키로 이루어진 시퀀스를 핸들러 함수에 연결하는 브라우저용 경량 키 바인딩 라이브러리입니다.

스타
4,104
포크
89
열린 이슈
7
마지막 커밋
지난달

어떤 프로젝트인가요?

tinykeys는 웹 애플리케이션에서 키보드 단축키를 등록하는 작은 JavaScript 라이브러리입니다. window 같은 대상과 "Shift+D" 또는 "$mod+b" 같은 키 패턴을 콜백 함수에 매핑한 객체를 전달하면, 키보드 이벤트를 감지해 일치하는 핸들러를 호출합니다. 구독 해제 함수도 반환하므로 컴포넌트가 언마운트될 때 바인딩을 쉽게 정리할 수 있습니다.

문법은 modifier, 대괄호로 표기하는 선택적 modifier, Mac에서는 Meta로, 그 외 플랫폼에서는 Control로 변환되는 크로스 플랫폼 $mod 별칭, 그리고 여러 키를 매칭하는 정규식 그룹을 지원합니다. "g i" 같은 시퀀스도 지원하며, 키 입력 사이의 타임아웃을 설정할 수 있습니다. 바인딩은 KeyboardEvent.key 또는 KeyboardEvent.code를 기준으로 매칭하며, UI에 단축키를 표시할 수 있는 parseKeybinding 헬퍼도 포함되어 있습니다.

이 라이브러리는 npm에서 설치하거나 CDN에서 불러올 수 있으며 TypeScript로 작성되었습니다.

핵심 기능

  • 01단일 키, modifier 조합, 여러 키로 이루어진 시퀀스를 핸들러 함수에 연결합니다.
  • 02$mod 별칭을 제공해 Mac에서는 Meta로, 다른 플랫폼에서는 Control로 변환합니다.
  • 03정규식 그룹을 지원해 하나의 바인딩으로 여러 키를 매칭할 수 있습니다.
  • 04리스너를 정리할 수 있도록 구독 해제 함수를 반환합니다.
  • 05key 또는 code를 기준으로 매칭할 수 있으며 AltGraph 같은 키보드 레이아웃 차이도 처리합니다.
  • 06UI에 단축키를 표시할 수 있는 parseKeybinding을 제공합니다.

활용 사례

  • 웹 텍스트 편집기에서 굵게 표시하는 Cmd+B 같은 키보드 단축키를 추가합니다.
  • 웹 앱에서 "g i" 같은 Gmail 스타일의 여러 키 탐색 시퀀스를 구현합니다.
  • 언마운트 시 정리 작업을 수행하도록 React 컴포넌트 안에 단축키를 등록합니다.

빠른 시작

  1. 1

    npm으로 패키지를 설치합니다

    npm install --save tinykeys
  2. 2

    tinykeys를 가져와 단축키를 window에 바인딩합니다

포함된 컬렉션

토픽

자주 묻는 질문

tinykeys은(는) 무엇인가요?
키보드 단축키와 여러 키로 이루어진 시퀀스를 핸들러 함수에 연결하는 브라우저용 경량 키 바인딩 라이브러리입니다. tinykeys는 웹 애플리케이션에서 키보드 단축키를 등록하는 작은 JavaScript 라이브러리입니다. window 같은 대상과 "Shift+D" 또는 "$mod+b" 같은 키 패턴을 콜백 함수에 매핑한 객체를 전달하면, 키보드 이벤트를 감지해 일치하는 핸들러를 호출합니다. 구독 해제 함수도 반환하므로 컴포넌트가 언마운트될 때 바인딩을 쉽게 정리할 수 있습니다.
tinykeys은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
tinykeys은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
tinykeys은(는) 아직 유지보수되고 있나요?
6개월 이내 업데이트. tinykeys의 마지막 커밋은 2026년 9월 25일입니다.
tinykeys은(는) 어디에 사용할 수 있나요?
웹 텍스트 편집기에서 굵게 표시하는 Cmd+B 같은 키보드 단축키를 추가합니다. 웹 앱에서 "g i" 같은 Gmail 스타일의 여러 키 탐색 시퀀스를 구현합니다. 언마운트 시 정리 작업을 수행하도록 React 컴포넌트 안에 단축키를 등록합니다.
tinykeys는 어떻게 설치하나요?
npm으로 패키지를 설치합니다: npm install --save tinykeys tinykeys를 가져와 단축키를 window에 바인딩합니다
tinykeys은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/jamiebuilds/tinykeys

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트