토이프로젝트를 진행하던 중 input창에서 한글을 입력하고 바로 엔터를 치면 검색이 두번되는 오류를 발견하여서 해결방법과 왜 이런 상황이 나타났는지 알아보았다.
1. 발생
onKeydDown과 클릭 이벤트를 사용하여 검색을 하도록 구현 했는데, 클릭이벤트에서는 잘 작동하던 것이 한글을 입력하고 엔터를 누르면 검색이 두번 되어서 저장기록에도 두번남고, input창에도 검색결과가 남아있어 사용자에게 좋은 경험이 아니라고 생각되어 알아보기로 마음먹었다.
2. 발생이유
발생이유는 내 코드의 문제는 아니였고, javascript의 일종의 버그(?)였다.
한글을 입력하는 동안 keypress의 keycode값을 보면 229로 나오는데, 이는 composing이 완료되이지지 않았기 때문에 나타나는 현상이다.
3. 해결
composing은 입력이 완료되어지면 false를 반환하고, 입력중이면 true를 반환한다. composing이 true일 때는 keycode가 229 오류를 반환하기 때문에 이용하여 keydown에 조건을 추가하면 오류가 해결되었다.
사실 keypress를 이용하면 이러한 문제는 해결되었지만, keypress는 더이상 사용하지 않는다고 하여 vscode에서도 밑줄이 그어져 있어서 keydown으로 해결하는 방법을 찾다가 적용하였는데, keycode에도 더이상 사용하지 않는다는 밑줄이 그어져 있어서 둘 중 어느 방법이 더 적합한지는 잘 모르겠다..
