[JS] keydown 이벤트에서 한글을 입력 시 두 번이 실행되는 경우

태그 기능을 구현하고 있던 중 생긴 일이다.

우리 서비스의 태그는 input에 값을 입력하도 Enter나 ',' 키를 누르면 태그가 생성되도록 구현했다.

영어로 입력한 태그는 잘 작동하는 반면 한글로 입력한 태그는 태그가 두 개가 생성이 되었다.

예를 들어 '자바스크립트'라고 입력을 하면 '자바스크립트', '트' 다음과 같이 태그가 두개 생성되었다.

이 문제의 원인을 찾아본 결과 한글이 조합문자이기 때문에 생긴 것 같다.

한글은 자음과 모음을 조합하는 조합문자이고 영어는 조합문자가 아니다.

keyboardevent 내에서 isComposing이라는 것이 있는데 이것은 조합문자인이 아닌지를 판단한다고 한다.

태그가 두 개가 생성된 이유는 글자가 조합중인지, 조합이 끝난상태인지 파악하기 어렵기 때문에 js 내에서 어찌저찌 처리한 것 같다.

해결방법

if (e.nativeEvent.isComposing) return;

다음 코드를 추가하면 한글 입력 시에도 한번만 실행되는 것을 확인할 수 있다.

참고

https://velog.io/@corinthionia/JS-keydown%EC%97%90%EC%84%9C-%ED%95%9C%EA%B8%80-%EC%9E%85%EB%A0%A5-%EC%8B%9C-%EB%A7%88%EC%A7%80%EB%A7%89-%EC%9D%8C%EC%A0%88%EC%9D%B4-%EC%A4%91%EB%B3%B5-%EC%9E%85%EB%A0%A5%EB%90%98%EB%8A%94-%EA%B2%BD%EC%9A%B0-%ED%95%A8%EC%88%98%EA%B0%80-%EB%91%90-%EB%B2%88-%EC%8B%A4%ED%96%89%EB%90%98%EB%8A%94-%EA%B2%BD%EC%9A%B0