Project 1 : 가상키보드(3) - 개발 중간 완료

오늘은 강의를 보면서 프로젝트를 진행했다.

추가한 기능은 별거 없다.

1. 마우스 클릭으로 입력 창에 키 입력되는 기능

강의를 따라가되 기능은 똑같이 구현하면서 내부적으로 소스코드는 다른 방식으로 구현을 했다.

강의에서는 그냥 하나의 함수에서 여러 다른 기능들이 돌아가도록 했다.

나중에 그 코드가 쓰일 지는 모르겠지만, 한 함수에 하나의 기능을 하는 방식으로 구현을 하면 나중에 유지보수 측면에서 봤을 때 좋을 것 같다는 생각에 그렇게 구현했다.

 

일단 이벤트 연결 함수 관련 코드로 onMouseUp, resetKeyState, onWriteKey가 있다.

이 함수들은 각각의 상황에 맞는 이벤트가 발생했을 때 실행된다.

onMouseUp 함수는 말 그대로 마우스를 누른 다음에 땠을 때 발생하는 이벤트 함수이다.

이 함수는 onMouseDown함수가 실행된 뒤에 거의 바로 호출되는 함수이기 때문에 관련된 기능을 수행한다.

만약 이전에 마우스를 누른 상태에서 다른 요소에서 마우스를 땐다면 해당 키에 대한 입력을 중지시킨다.

이전에 'a'에 해당하는 엘리먼트를 클릭한 뒤에 'b'를 클릭한다면 그 클릭은 무효화가 된다고 생각을 하면 된다.

그리고 이 onMouseUp이라는 함수에서 기능을 분리하기 위해서 사용자가 정의한 이벤트를 호출시킬 수 있는 dispatchEvent 함수를 이용했다.

이 함수를 이용해서 이전에 연결해놨던 사용자 정의 함수인 onWriteKey함수를 직접 호출했다.

이렇게 되면 onMouseUp 함수가 더 규모가 커지더라도 독립적인 기능을 수행하는 함수에 대한 이벤트만 연결해주면 되기 때문에 관리하기가 쉬워진다.

이 함수는 key 엘리먼트를 클릭했을 때 적용되는 active클래스를 제거하는 기능을 수행한다.

왜 querySelectorAll을 사용했냐면 입력창에 키를 마구 누른 상태에서 마우스를 때면 active가 그대로 남는 오류가 있기 때문에 사용했다.

onWritekey는 이벤트로 넘어온 값을 적절한 처리를 해주는 함수이다.

이렇게 기능을 분리를 해놓으면 각각의 함수가 어떤 기능을 하는지 한눈에 알 수 있고, 추후에 유지보수하기에도 용이하다.

onMouseDown 함수는 마우스를 누르는 그 순간에 발생하는 이벤트 함수이다.

해당 함수가 수행하는 기능은 누르는 Dom 요소의 class에 active라는 값을 추가한다.

내일은 하나의 문제만 해결하면 된다.

무슨 문제냐 하면, 마우스로 클릭을 하게 되면 영어만 입력된다.

이 문제를 해결하려면 일단 화면상에서 한/영 버튼을 클릭했을 때 영어에서 한글로, 한글에서 영어를 입력할 수 있는 기능을 만들어야 한다.

 

강의는 여기까지가 끝이지만, 나는 좀 더 기능을 추가하고 싶다.

1. 한글/영어를 키보드, 마우스로 입력 가능(빠른 시간 내에 가능)

2. 하나의 독립적인 라이브러리로 만들어서 npm이나 다른 사이트에 올리기(1주일 이상)