[버그해결] OnkeyDown 이벤트 중복 발생

발생한 문제와 해결 방법

리액트 환경에서 OnkeyDown 이벤트를 통해 Enter 키를 눌리면 특정 태그가 추가되는 코드를 작성하고 테스트를 하는 과정에서 영어를 입력 했을 때는 정상적으로 발생하는 이벤트가 한글 입력할 경우네는 이벤트가 두 번 발생하는 버그를 발견했습니다.

원인을 찾아보니 한글, 한자처럼 컴퓨터 자판에 있는 글자보다 수가 더 많은 문자를 계산하거나 조합하여 입력해 주는 시스템 소프트웨어인 IME(input method editor) 문제임을 알 수 있었습니다.

IME가 문자를 조합 중인지 여부는 KeyboardEvent.isComposing의 값(boolean으로 반환)으로 확인할 수 있으며, 조합 중일 때는 true, 아닌 경우에는 false 값을 가집니다. true는 문자를 조합중일 때 반환되고 false는 조합이 끝난 후에 반환됩니다.

결국 IME의 조합 기능 자체를 막을 수는 없었기 때문에 이벤트가 두 번 실행되는 것은 제어할 수 없었지만 isComposing 의 값에 따라 실행할 동작을 1번만 수행하도록 조건을 변경해서 문제를 해결할 수 있었습니다.

아래의 코드는 isComposing 값이 fasle 일때만 태그가 생성되도록 수정한 코드입니다.

    const enterHandler = (event: KeyboardEvent<HTMLInputElement>): void => {
    const tag = state.postInput.tag;
    const tagContent = state.postInput.tagContent;
    if (event.key === 'Enter' && event.nativeEvent.isComposing === false) {
      // 공백 방지
      if (tagContent === '') {
        return;
      }
      // 띄어쓰기 방지
      if (tagContent.includes(' ')) {
        alert('태그에 띄어쓰기를 포함할 수 없습니다.');
        return;
      }
      // 태그 개수 제한
      if (tag.length >= 5) {
        alert('태그는 5개까지만 입력 가능합니다.');
        return;
      } else {
        dispatch(setTagContent(''));
        dispatch(setTag(tagContent));
      }
    }
  };

느낀점

문자의 종류에 따라 다르게 동작하는 버그를 인지하고 어느 부분에서 문제가 발생하는지 찾는데까지 다소 어려움이 있었습니다. 처음엔 단순히 제가 작성한 로직에 문제가 있는지 고민하는데 시간을 많이 사용했습니다. 앞으로 문제가 발생 했을 때, 코드 뿐만 아니라 다른 외부적인 영향로 발생하는 버그를 고려 해야한다는 것을 알 수 있는 좋은 경험이었습니다.

Reference

https://velog.io/@euji42/solved-%ED%95%9C%EA%B8%80-%EC%9E%85%EB%A0%A5%EC%8B%9C-2%EB%B2%88-%EC%9E%85%EB%A0%A5%EC%9D%B4-%EB%90%98%EB%8A%94-%EA%B2%BD%EC%9A%B0