고민 배경

노드 삭제 기능을 구현하던 중… 사용자가 노드를 실수로 삭제하는 일이 있지 않을까? 라는 생각이 들었음

이를 방지하기 위한 방법은 두 가지

→ window.confirm이나 모달창을 통해 사용자에게 허락(?)을 받는다

→ 뒤로가기 기능을 지원한다

사실 첫 번째는 개별 요소 하나하나에 적용하면 투머치에다가 사용자 경험에도 좋지 않을 것이라 생각

두 번째가 원래 얘기가 나왔던 기능이기도 하고 해서 한 번 구현해 보기로 마음 먹음

커스텀 훅으로 historyState를 관리할 수 있게 만들고 이를 캔버스에 적용하면 좋을 것 같다 ~

→ useHistoryState라는 이름의 커스텀 훅을 만들어보겠습니다

ctrl + z / ctrl + y 이벤트 감지하기

일단 적용하려면 이벤트부터 감지할 수 있어야 한다

keydown 이벤트에 아래와 같이 적용하면 됨

https://stackoverflow.com/questions/16006583/capturing-ctrlz-key-combination-in-javascript

function keyPressHandler(e) {
      var evtobj = window.event ? window.event : e;

      if (evtobj.ctrlKey && evtobj.keyCode == 90) {
          alert('Ctrl+z');
      }
}

window.addEventListener('keydown', keyPressHandler);

→ ctrlKey랑 90번 키 (z)가 함께 눌렸을 때를 조건문으로 잡아주면 됨

앞으로 가기 기능을 하는 ctrl + y 이벤트는 그럼 이렇게 잡아주면 됨

function keyPressHandler(e) {
      var evtobj = window.event ? window.event : e;

      if (evtobj.ctrlKey && evtobj.keyCode == 89) {
          alert('Ctrl+z');
      }
}

window.addEventListener('keydown', keyPressHandler);