「hotkey」 라이브러리

Daum Google

 

함수 실행하기

'핫키 설정'은 '콘텐츠 웹앱' 제작에 있어 필수적인 기능이다. 특히, 3D 그래픽과 같은 콘텐츠를 기반으로 하는 웹앱들은 반드시 hotkey가 필요한데, 이때 사용할 수 있는 JS라이브러리가 'hotkey.js', 'ninja-keys.js'이다.

 

 

 

---

1 hotkey.js

hotkey.js는 고수준의 웹앱이 아닌 마크업 기능을 구현하기 위한 핫키 라이브러리다. 특정 html태그의 기능을 실행할 때 사용하며, 태그와 결합된 '링크', 'onclick함수'와 결합할 수 있다. 가령, 아래와 같이 코드를 작성했을 때, 웹사이트에 'ctrl + g', 'ctrl + d'핫키 조합을 통해 지정된 태그가 실행된다.

 

* ctrl + g : 구글 실행

* ctrl + d : 다음 실행

<script type="module">          import { Leaf, RadixTrie, install, uninstall } from 'https://cdn.jsdelivr.net/npm/@github/hotkey@1.6.1/dist/index.min.js';     // Install all the hotkeys on the page          for (const el of document.querySelectorAll('[data-hotkey]')) {                     install(el)              }    </script>    <a href="https://www.naver.com" data-hotkey="Control+n">Naver</a>    <a href="https://www.google.com" data-hotkey="Control+g">Google</a>

 

또, 아래와 같이 특정 태그에 있는 이벤트 함수도 실행할 수 있는데, 주로 'on이벤트'기능이다.(적극 사용은 비추)

 

<script type="module">         function test() {            alert('핫키 테스트')         }    </script>    <div onclick=test() data-hotkey="Control+a"></div>

 

hotkey.js는 기능적으로 그렇게 훌륭하지 않기 때문에 웹디자인용으로 괜찮을 듯 하다.

 

https://github.com/github/hotkey

GitHub - github/hotkey: Trigger an action on an element with a keyboard shortcut.

 

 

 

 

 

 

 

---

| Ninja-keys

두 번째 핫키 라이브러리, 'ninja-keys'는 기능적으로 훌륭하다. 마치 'vue1.0'시절 가상DOM과 같은 느낌으로 <ninja-keys>내부에서 DOM Element간의 상하관계 그리고 이벤트 핸들러를 지정할 수 있다. 만일, 웹 게임을 제작한다면, 메뉴의 기능을 ninja.data의 하위 객체를 통해 비동기로 제작가능하다.

 

 

ninja-keys에 관한 자세한 설명은 아래 사이트에서 확인할 수 있다. 

 

https://github.com/ssleptsov/ninja-keys

GitHub - ssleptsov/ninja-keys: Keyboard shortcuts interface for your website. Working with static HTML, Vanilla JS, Vue, React,