라이브러리 창고/웹앱 기능

「hotkey」 라이브러리

Recstasy 2022. 1. 28. 05:38

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.

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

github.com

 

 

 

 

 

 

 


| 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,

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

github.com