가상키보드 예제 중 한글 입력 시 오류

HyunSooBae·2022년 9월 22일

MegabyteSchool 개발자취업부트캠프 국비지원교육 내일배움카드 메가바이트스쿨 패스트캠퍼스

프론트엔드 공부

목록 보기

2/13

과정 수료를 위해 필수로 들어야 하는 강의 외에도, 따로 '30개 프로젝트로 배우는 프론트엔드 with React' 강의를 듣고 있다.

가상키보드 파트를 들으면서 🌓다크모드 전환,
키보드에 적용된 ✒서체 바꾸기

까지는 잘 따라했는데,

💻키보드 입력 이벤트에서 브라우저가 한글을 인식하지 못했다.

오류로 예상되는 부분

원래 코드는

#onKeyDown(event) {
	this.#inputGroupEl.classList.toggle(
		"error",
  	/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/.test(event.key)
	);
}

이거였다. keyDown이벤트가 일어났을때 이벤트의 key값이 한글인지 정규식으로 확인(test)하고,
한글이라면 html의 input요소에 error클래스를 붙였다 뗐다 하는.

그래서 키보드로 한글을 입력했을때 /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/.test(event.key) 얘가 true를 뱉어줘야 하는것 같은데, 자꾸 false만 나오는 것 이었다...😩

콘솔창을 열어봤더니, 왜째서인지 한글은 죄다 key값이 process, keyCode는 229라고 나오고 있었다. 그래서 바로 구글링. 역시나 구글은 답을 알고 있다.

문제의 원인?

한 음절이 하나의 알파벳인 영어와 달리, 자모음 조합으로 만들어지는 한글은 조합문자이다. 조합문자의 경우 keyDown이벤트 → keyUp까지 이어지는 과정에서 문자의 구성(process)이 끝나지 않았다고 보고 keyDown이벤트에서 key값을 process로 뱉어내는 오류가 있다.

...라는 답을 얻을 수 있었다. 문자 구성이 끝나지 않았다고 판단하는 친구는 IME라는 녀석인데... 더보기

더 찾아봤지만 당장은 내 수준으로 정리할 수 있는 것은 이정도였고😊...

여기까지 알게 된 나는 영어, 숫자(기타 외국어나 특수 문자 등)는 상관없고 오로지 한글 입력만 막는 것이 목표이므로, 한글 입력시 활용할 수 있는 isComposing 속성 을 사용하기로 했다.

해결한 방법

위의 코드를 다음과 같이 수정해줬다.

#onKeyDown(event) {
    if (event.isComposing || event.keyCode === 229) {
      	this.#inputGroupEl.classList.add("error");
    } else {
      	this.#inputGroupEl.classList.remove("error");
    };
}