자바스크립트용 Key bind 라이브러리

자바스크립트용 키 바인드 라이브러리 중 유명한 것 몇 개 살펴 보고 현재 프로젝트에 적용한 내용을 정리해 본다.

• jquery.hotkeys https://github.com/jeresig/jquery.hotkeys
• keymaster https://github.com/madrobby/keymaster
• keymage https://github.com/piranha/keymage
• Keypress https://github.com/dmauro/Keypress

리엑트 용으로 react-hotkeys 를 적용하려고 했는데 이 모듈은 해당 스코프에서만 사용할 수 있고 기본적으로 <input> 과 <textarea> 같이 포커스가 들어가는 곳에 적합한 모듈이었다.

하는 수 없이 글로벌로 (index.html 에) 이벤트 트리거를 세팅하고 키가 들어올 때마다 체크해 해당 컴포넌트 쪽으로 emit 하고 이벤트를 받을 컴포넌트에 커스텀 이벤트 리스너를 세팅하여 사용하는 방법으로 코딩하였다. 몇 번의 삽질 끝에 작동하는 코드를 만들어내긴 했지만 verbose 했다.

혹시나 하는 마음에 커스텀 이벤트를 받는 쪽에 아예 키 바인딩 라이브러리를 그냥 사용하면 어떨까 해서 적용했는데 그냥 되더라…

위의 각 라이브러리는 글로벌 스코프로 키 이벤트를 캡춰하고 있다. 내 경우 특정 페이지 (특정 컴포넌트 상태)에서만 필요한 키 바인드가 있기 때문에 리엑트의 라이프 사이클 콜백에 따라 bind/unbind 가 제공되는 라이브러리를 쓰기로 했다. 아마 이 라이브러리는 하루패드에서도 사용하는 것 같다.

componentDidMount: function() {

    var that = this;

    if (isMac) {

        Keymage('cmd-enter', function() {

            that.toggleState();

        });

    } else {

        Keymage('ctrl-enter', function() {

            that.toggleState();

        });

    }

},

componentWillUnmount: function () {

    var that = this;

    if (isMac) {

        Keymage.unbind('cmd-enter', function () {

            that.toggleState();

        });

    } else {

        Keymage.unbind('ctrl-enter', function () {

            that.toggleState();

        });

    }

},

리엑트는 쓸 때마다 편한 느낌이다. 폴리머 삽질했을 때와 비교할 수 없는 생산성과 속도를 보여준다. 생각하는 대로 코딩할 수 있다는게 정말 큰 장점이다. 그리고 당분간 폴리머는 쳐다보지도 않을 예정.