<aside> 📎

</aside>

문제 상황

화면 기록 2024-11-14 오전 12.34.32.mov

• 한글을 입력하고 엔터를 쳤을때, 블록이 2개가 생긴다. 영어는 문제가 없다.
• 스페이스바를 치거나, 오른쪽 화살표키를 누르고 enter를 입력하면 기대한대로 동작된다. (블록 1개)

왜 블록이 2개가 생길까?

• 아마 블록을 만드는 이벤트 자체가 2번 호출될 것이다.

• enter 이벤트 핸들러부분에 로그를 찍어보니 2번이 나왔다.

  

isComposing 이란?

• 한글은 영어와 달리 조합문자이다 ('ㅇ' → 'ㅏ' → 'ㄴ’)

• 조합문자의 경우 키보드로 텍스트를 입력하기 어렵기에, IME(Input Method Editor) 이라는 소프트웨어를 사용한다.

• 그래서 만약 한글을 입력하면 IME가 입력 중임을 나타내는 isComposing 상태가 된다.

• 입력값과 isComposing을 출력해봤다.

  • 영어의 경우, 계속 isComposing은 false이다

    

  • 한글의 경우, 2가지를 테스트해봤다.

    • 자음만 계속 입력하는 경우, (”ㅁㄴㅇㅁㄴㅇ”)

      • 이때 처음에만 false가 뜨고, 계속해서 true가 뜬다. 나는 자음과 모음이 합쳐지는 순간 true가 되는 줄 알았다.
      • 그러나 글자(한글) 1개를 입력하고, 그 다음부터(2번째부터) 계속 true가 된다.

      

    • 자음 + 모음 조합으로 입력하는 경우 (”밥”)

      • 이때도 마찬가지로 2번째부터 true가 된다.

      

• 즉, 한글의 경우 글자 하나를 입력하고 다른 입력이 들어오는 순간 isComposing 상태가 된다.

  • 여기서 다음 입력은 글자가 아닌 경우도 해당한다. 예를 들어 Enter
  • 즉, 한글을 친 상태에서 Enter 를 누르면, IME는 Enter 를 한글로 인식하여 하나의 글자로 처리한다.

내부 로직을 더 살펴보자

• IsComposing이 동작하는 원리가 어떻게 될까?

• 기본적으로 조합문자의 경우, 이벤트가 compositionstart compositionupdate compositionend 3단계로 나뉜다.

  

  • https://w3c.github.io/uievents/#idl-inputevent