야근시렁

어느날 문득 어떤 로컬에서 어떤 페이지를 열어도 이런 에러가 발생했다.

lockdown-run.js:17 Lockdown failed: TypeError: At intrinsics.Object.groupBy expected boolean not function

lockdown-more.js:99 Protecting intrinsics failed: ReferenceError: harden is not defined

이렇게 두가지 에러가 한번에 나왔다.

찾아보니 이건 chorme extension에서 발생되는 에러라고 한다. 

나같은 경우에는 Metamask 에서 오류가 발생됬다. 

또 무슨 npm버전관련된 에러인줄 알았는데, extension 에러라니... 🥹 다행임.

onKeyPress는 보통 input 에서 엔터키를 눌러 함수를 호출하는데 많이 사용했었습니다. 

그런데 어느 순간부터 deprecated 되었다는 warning 메세지를 받고, 찾아보니 사실은 오래전부터 W3C의 UI Events 명세에는 2016년부터 "keypress" 이벤트들을 deprecated로 표시 하였다고 한다. 😥

이를 대체할 방안은 onKeyDown을 사용하는 것이다. 

애시당초 keydown, keyup 이벤트로 대부분의 것들을 처리할 수 있었기 때문에 keypress 자체 사용이 줄어든것 같다. 

onKeyPress 와 onKeyDown 의 차이점 

우선 이벤트 발생 시점이 onKeyPress의 경우 문자의 키가 눌렸을때 발생 된다. 그렇기 때문에 문자가 아닌 fn 같은 키를 누르면 호출이 동작이 안될 수 있다. onKeyDown의 경우는 거의 모든키가 눌렸을때 발생된다. 

그렇기 때문에 onKeyDown을 사용하면 shift, alt, backspace 등 많은 키값을 가지고 활용할 수 있다. 

여기 간단한 예제가 있다. 이를 확인해 보고 직접 사용해보면 좋을 꺼 같다. 

function App() {
  const handleAlert = () => {
    alert("함수호출~!");
  };

  return (
    <div>
      <input type="text" onKeyDown={handleAlert} placeholder="여기에 키를 누르세요" />
      <button onClick={handleAlert}>Alert 버튼</button>
    </div>
  );
}

export default App;

또한, f12 로 개발자 도구를 사용하는 방지하는 코드도 만들 수 있다. 

이는 크게 도움이 안될 수도 있지만 나름 보안상으로 필요할 때가 있다. 

function App() {
  useEffect(() => {
    const preventF12 = (e) => {
      if (e.keyCode === 123) { // F12의 keyCode는 123입니다.
        e.preventDefault();
        e.stopPropagation();
      }
    };

    window.addEventListener('keydown', preventF12);

    return () => {
      window.removeEventListener('keydown', preventF12);
    };
  }, []);

  return (
    <div>
      F12 키를 눌러도 개발자 도구가 열리지 않습니다.
    </div>
  );
}