크로미움 기반 브라우저(크롬, 오페라) 버그!

최근 사이드 프로젝트를 하면서 nestjs를 써보고 싶어서, ios개발하는 친구와 채팅을 만들어보기로했다.

서버개발 속도가 좀 빨라서 react+ts로 스타일코드는 1개도 없이 기능만 구현해봤다.

채팅은 문자를 입력하고 엔터를 누르는게 기본 기능인데, 그것을 구현하다가 발견한 버그이다.

react에서 키보드입력을 감지하는 이벤트 => onKeyPress

맥에서는 한글입력하면 제일 마지막글자가 블럭쌓인것처럼 검은 밑줄?같은게 쳐지는데,

이상태에서 엔터를 눌러서 onKeyPress 에 바인딩된 함수를 호출하면

해당 마지막글자가, 한번 더 전달된다.

예를들어, 'ㅁㄴㅇㄹ'을 쓰고 엔터를 누르면 [ㅁㄴㅇㄹ, ㄹ] 이렇게 전송된다.

띠용???????

그런데 onkeydown을 쓰면 문제없다. 근데 deprecated 됐다.

결국 저런 경우 때문에라도, onkeypress를 쓰되, setTimeout같은걸로 연속입력을 빠르게 못하도록 컨트롤하는 방법을 써야함. 뭐 어차피 해야하는 작업이었지만..