버그 발생

프로젝트 관리 툴을 개발하는 LESSER 프로젝트의 스프린트를 마치고 데모 리뷰를 하던 중에 버그가 발견됐다.
프로젝트를 생성하는 페이지에서는 제목과 주제를 입력한 후 프로젝트를 생성할 수 있었고, 입력 후 엔터를 치면 다음 단계로 넘어가거나 생성 API를 요청하도록 개발했었다.
팀원들이 해당 기능을 테스트해보다가 제목을 입력하고 엔터를 누르면 주제를 입력하지도 않았는데 바로 프로젝트가 생성되는 버그가 있음을 발견했다.

왜 나는 안 되지...?

한 팀원이 발견한 후 다른 팀원들도 해봤을 때 모두 버그가 일어난다고 했다. 그런데 나는 아무리 해봐도 그런 현상이 일어나지 않았다.
리뷰 당시에는 왜 그런 버그가 발생하는지, 버그 발생 조건이 무엇인지 알지 못했다. 그런데 시간이 지나고 생각해보니 팀원들과 내가 가진 차이가 떠올랐다. 바로 팀원들은 맥을 사용하고 나는 윈도우를 사용한다는 점이었다.

버그의 원인

• 버그는 맥에서만 발생한다.
• 버그는 한글을 입력할 때만 발생한다.

팀원들이 조금 더 테스트해본 결과 한글을 입력할 때만 발생한다는 점을 알아냈다. 이를 토대로 검색해보다가 같은 오류를 경험한 사람들의 글을 발견했고 IME로 인해 발생한다는 사실을 알게 되었다.

IME

IME(Input Method Editor)는 텍스트 입력을 위해 특별한 UI를 제공하는 프로그램으로 한글을 입력할 때 IME가 이용된다.
IME를 통해 문자가 조합될 때 composition 이벤트가 발생하고 그 일부로 keydown 이벤트도 발생한다.

위와 같은 이유로 한글을 입력한 후 엔터를 누르면 keydown 이벤트 핸들러로 두 번 이벤트가 감지되었다.

윈도우와 맥의 차이

그렇다면 어떤 차이가 있어서 내 컴퓨터에서는 발생하지 않고 다른 팀원들에게는 발생하는지 궁금했다.

const handleEnterDown = (event: React.KeyboardEvent) => {
  if (event.key === "Enter" && valid) {
    handleNextButtonClick();
  }
};

이렇게 작성했었던 코드에서 event.nativeEvent.isComposing과 event.key 값을 콘솔에 출력하도록 하고 엔터를 쳐봤다.
그러니 윈도우에서는 true와 'Processing'이라는 값이 먼저 출력됐고 바로 false와 'Enter'라는 값이 출력됐다. 윈도우에서도 이벤트가 두 번 발생하는데, key값이 달라서 처리는 한 번만 된 것이다.

이 결과를 보고 맥에서는 어떤 일이 일어날지 추측은 됐지만 확실히 확인하기 위해 팀원에게도 같은 값을 출력해달라고 부탁했다. 그리고 추측대로 true, 'Enter'가 먼저 출력됐고 false, 'Enter'가 연달아서 출력됐다.
맥에서는 문자를 조합하는 중이더라도 key값이 다르게 출력되지 않고 입력한 키보드 값 그대로 나왔다. 그렇기 때문에 발생한 이벤트 둘 모두 처리된 것이다.

해결

const handleEnterDown = (event: React.KeyboardEvent) => {
  if (event.nativeEvent.isComposing) {
    return;
  }

  if (event.key === "Enter" && valid) {
    handleNextButtonClick();
  }
};

원인을 알았으니 해결은 간단했다. 입력 이벤트가 조합 중에 발생한 것인지 판별 후 그렇지 않을 때만 처리되도록 해 버그를 해결했다.

느낀점

해당 버그를 통해 같은 코드라도 환경이 달라지면 다르게 동작할 수 있음을 확실히 알 수 있었다. OS, 브라우저 등 다른 실행 환경을 가진 모든 사용자들이 만족하며 서비스를 사용하도록 하기 위해서 작성한 코드의 브라우저 지원 범위를 확인하고, 여러 환경에서 테스트해보면서 의도한 대로 동작하는지 확인하는 것이 중요함을 느꼈다.

참고자료

[JS] keydown/keyup에서 한글 입력 시 함수가 두 번 실행되는 경우
https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event
https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event