document.addEventListener("keydown", (event) => {
// 모든 한글 조합에 대한 정규식 /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/
console.log(event);
console.log(event.key, /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/.test(event.key));
this.#keyboardEl
.querySelector(`[data-code=${event.code}]`)
?.classList.add("active");
});
consolo.log로 event를 찍어서 a와 ㅁ을 찍어보았다. a는 아래와 같이 key과 keyCode값이 문제없이 출력되었다.
하지만 ㅁ을 입력했을 때는 key값으로 "Process"가 오고 모든 한글의 keyCode가 229로 출력되었다.
왜 이런 현상이 발생하는지 찾아보았더니 input에서 한글자판 사용시 IME에서 메시지를 가로채기 때문에 keyCode가 229를 가리키는 것이었다.
IME는 한글을 입력 시 컴포징이라는 단계를 거친다. 예를 들어, "ㄱ"을 입력하면 아직 글자가 완성되지 않았다고 판단하고 글자가 완성될 때까지 조합을 하는데 이것을 컴포지션이라고 부른다.
그런데 문제는 컴포징이 진행 중일 때에도 keydown 및 keyup 이벤트를 보낸다는 것이다.
컴포징이 시작되었을 때 미완성이라는 메시지로 keyCode로 229를 보내는 것이다. 아래는 문제가 있는 코드이다.
document.addEventListener("keydown", (event) => {
this.#inputGroupEl.classList.toggle(
"error",
/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/.test(event.key)
);
// event.code가 keyA일 때, data-code가 keyA인 것이 있다면 active라는 클래스를 추가해준다.
this.#keyboardEl
.querySelector(`[data-code=${event.code}]`)
?.classList.add("active");
});toggle로 한글을 입력했을 때 error 클래스가 추가되는 코드로 작성하였지만 위와 같은 문제들로 인해 제대로 동작하지 않았다.
#addEvent() {
document.addEventListener("keydown", this.#onKeyDown.bind(this)); // This를 바인드안하면 inputGroupEl, keyboardEl을 몾 찾는다.
// 클래스를 바라보게 바인드 해준다.
}
#onKeyDown(event) {
if (event.key == "Process") {
this.#inputGroupEl.classList.add("error");
} else {
this.#inputGroupEl.classList.remove("error");
}
// 모든 한글 조합에 대한 정규식 /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/
// event.code가 keyA일 때, data-code가 keyA인 것이 있다면 active라는 클래스를 추가해준다.
this.#keyboardEl
.querySelector(`[data-code=${event.code}]`)
?.classList.add("active");
}위처럼 if문으로 Process가 발생하였을 때 class를 더해주는 형식으로 짜보았다. 이게 좋은 코드인지 아닌지는 잘모르겠다. 동작에는 전혀 문제가 없는 것을 확인하였고 만약 학습을 하다가 이 코드보다 좋은 코드가 있다면 대체해볼 예정이다.
