새로 설정한 스벨트킷(SvelteKit) 프로젝트에 기존에 사용하던 UI 모듈을 추가하고 있었는데 못보던 타입스크립트 오류가 보였다.

Hint: 'keyCode' is deprecated. (ts)

if (event.keyCode === 27) {

ESC 키가 눌렸는지 검사하는 코드였는데 지금까지 잘 쓰고 있던 event.keyCode에 무슨 일이 생겼나 보니 event.keyCode는 지원이 중단됐고 event.code를 사용하라고 한다. 브라우저 호환성을 보니 이미 오래전부터 모든 모던 브라우저가 지원하고 있었다. 인터넷 익스플로러만 제외하면 사용할 수 있다.

event.keyCode가 숫자를 반환하는데 비해 event.code는 Escape와 같은 문자열을 반환해서 좀 더 직관적으로 이해가 쉬운 코드를 작성할 수 있다.

event.code와 유사한 event.key도 있는데 두 속성이 반환하는 값이 조금씩 다르다. 숫자키 1을 누르면 event.code는 Digit1을 반환하고 event.key는 1을 반환한다. A를 누를 때에는 event.code는 KeyA를 반환하는데 비해 event.key는 Shift 키가 눌렸는지에 따라 실제로 입력되는 a 또는 A를 반환한다. shift도 event.code는 ShiftLeft 또는 ShiftRight와 같이 키의 위치를 고려하지만 event.key는 둘 다 Shift로 반환한다. 사용자가 누른 키의 정밀한 제어를 위해서는 event.code를 사용하고 사용자가 입력하는 값을 파악할 때에는 event.key를 사용할 수 있다. MDN 페이지에서 각 속성이 어떤 값을 반환하는지 테스트 해 볼 수 있다.

event.code를 이용해서 메타키들과의 조합을 상세하게 제어 할 수도 있겠지만 메타키를 위한 속성도 있어서 키보드 레이아웃을 신경써야 하는 경우가 아니면 event.code는 쓸 일이 많지는 않을 것 같다.