[타자치자 #6] 모바일 장치에서 타수 결과가 Infinity

프로젝트
1. 타자치자(1.0.1) - 한글타자연습
2. 리팩토링(Redux)
3. 리팩토링(TypeScript)
4. 타자치자(1.0.2) - 기능 추가
5. 타자치자(1.0.3) - 모바일
6. 타자치자(1.0.4) - 모바일 장치에서 타수 결과가 Infinity
7. 리팩토링(redux, styled-components)

 

타자치자 놀러가기

 

const resultSpeed = (tasu.length * 60) / time;

이런 식으로 타수를 계산하고 있다.

 

가지고 있는 PC, 아이패드에서는 타수가 제대로 계산되고 있는데, 다른 안드로이드 모바일 장치에서는 아래와 같은 결과가 나오고 있었다. 

 

모바일 디버깅을 해보니 time을 0으로 받고 있었다.

 

엔터키를 제외한 다른 입력키를 입력하면 하단 부분 카운터가 증가해야 하는데 아무 변동이 없다.

 

한글 키코드를 아예 못 받는 건가 싶어서 다시 콘솔로 찍어보니 229가 찍힌다.

 

 

원인

검색해보니 한글을 입력할 때 입력 방식 편집기(IME)를 쓴다고 한다. 안드로이드 모바일 역시 한글을 입력할 때 IME를 사용하고 있다.

IME는 한글을 입력 시 컴포징이라는 단계를 거치는데 미완성이라는 메시지로 keyCode로 229를 보내는 것이라고 한다. 

 

 

방법(1) - keydown 이벤트

어차피 타자치자는 한글만 측정하는 것이므로 229가 찍히면 그냥 한글이라고 판단하고 처리하기로 하였다.

 

이전에는 엔터키 입력될 때, 나머지를 분기하여 처리했었다. 

// 엔터키
if (e.keyCode === 13) { 
	...
    ....
    .....
  } 
  
// 그 외
  else {
  	...
    ....
    .....
 }

 

수정된 코드는 엔터키, 한글 입력으로 분기하였다.

// 엔터키
if (e.keyCode === 13) { 
	...
    ....
    .....
} 
  
// 한글 입력
if (e.keyCode === 229) {
  	...
    ....
    .....
}

 

결과는 실패다.

229가 찍히면 카운터가 증가해야 하는데 계속 00:00..

 

방법(2) - keyup 이벤트

keyup으로 변경하니 코드가 잘 찍혔다.

 

그런데 내용 모두 작성 후에 엔터를 누르면 엔터키(키코드: 13)가 자동으로 한 번 더 입력되는 문제가 발생했다.

 

타수, 정확도가 출력되나 엔터가 자동으로 입력되면서 값이 변경됨

 

방법(3) - keypress 이벤트

한글은 keypress 이벤트가 작동하지 않는다.

(콘솔에 키코드가 안 찍힘)

 

해결

삽질을 심하게 하고 있었다...

화면이 큰 데스크톱이나 아이패드에서는 아래와 같이 하단 부분에 가상 키보드를 만들어놔서 한글이 입력될 때 색깔이 들어오게 처리하고 있었다.

 

그리고 작은 폰 화면이나 브라우저 크기가 작아질 때 이 가상 키보드를 없애고 있었다.

 

그런데 이 가상 키보드가 있을 때만 타수 측정을 시작되도록 해놨던 것이다. 진짜 바보 같은 삽질이었다.

 

큰 화면

작은 화면

 

똑같이 한글을 입력하는데 결과가 다르다.

 

아래와 같이 처리하니 해결되었다.

 

- 가상키보드 유, 무에 따라 나누고

- keypress: 엔터키 이벤트만

- keydown: 엔터키 제외 나머지 키에 대한 이벤트만(한글 입력 키코드 229)

 

 

 

진짜 별거 아닌 것이었는데 너무 오래 걸렸다.

그래도 삽질하면서 keydown, keyup, keypress 공부한걸 다행이라고 생각하자....