웹, 서버, 네이티브 플랫폼에서 사용할 수 있으며 조합 가능한 컴포넌트로 인터랙티브 UI를 만드는 JavaScript 라이브러리입니다.
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
npm으로 패키지를 설치합니다
npm install --save tinykeys - 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 통계는 매일 갱신됩니다.
관련 프로젝트
선언형 웹 컴포넌트를 효율적인 JavaScript로 컴파일해 DOM을 필요한 부분만 직접 업데이트하는 프레임워크입니다.
CLI와 MCP 서버로 둘러볼 수 있는, 에이전트가 활용하기 좋은 UI 및 디자인 엔지니어링 스킬 레지스트리입니다.
React, Vue, Angular, Svelte 등을 지원하며 UI 컴포넌트를 격리된 환경에서 만들고 문서화하고 테스트하는 프런트엔드 워크숍입니다.
Go만으로 선언형 컴포넌트 기반 UI를 작성해 WebAssembly로 프로그레시브 웹 앱을 만드는 Go 패키지입니다.
웹사이트에 검색 가능한 액션 메뉴와 키보드 단축키를 추가하는 React 커맨드 팔레트(Cmd+K) 컴포넌트입니다.