V-Gesture 제작기 - 3. VGesture
지금 생각하면 가장 처음에 이야기했어야 할 듯 하지만 이미 Bottom-Top 방식으로 이야기하고 있으니...ㅋㅋㅋ 바로 VGesture 모듈이다.
주 기능이랄까나... 주 기능은 앞서 소개한 모든 모델들을 하나로 모아주는(aggregate)하는 역할에 직접적인 인터페이스를 개발자에게 제공한다는 점이다.
이 글에서 할 이야기는 아무래도 무슨 생각으로 설계를 했는지를 알려주는게 맞는것 같아 그 부분에 초점을 맞춰보겠다.
_task().
먼저 task함수인데, 해당 함수가 곧 VGesture의 모든 실행 로직을 담고 있는 함수이다.
최대한 처음보는 개발자 입장에서 코드를 이해하기 쉽게 하기 위해 task함수에 주요 실행 로직들을 "평면화"시켰는데, 이를 통해 디버깅 혹은 코드 이해 과정에서 물리적인 파일 이동량이 적어지기 때문이다.(하나의 정보를 얻기 위해 파일 -> 파일 -> 파일... 이동하는 행위)
전 회사에 처음 모듈을 만들었을 때, 이 부분을 고려하지 않고 만들었다가 굉장한 원성을 들었어서 일부러 이렇게 만들었다. 실제로 이렇게 평면화 시키는게 가독성엔 훨씬 더 좋다고 느꼈다.
task 함수의 경우, 인자로 driverKey라는 Symbol 값을 받고 있는데, 이를 통해, task의 직접적인 실행을 막았다.
간혹 몇몇이들이 좀 과한 구현이다 혹은 너무 생각이 많다하는 피드백을 남겨서 이 글을 통해 반박하고자한다.
일단 tfjs는 "오픈소스"지 "오픈 코드"가 아니다. Apach2.0 라이센스를 쓰기에 맘대로 받아서 사용해도 되지만,코드 자체가 공개가 아니라는 것이다. 즉, 빌드 결과물만 받아서 사용하는 것이다.
이는 즉, 사용하는 개발자 입장에서 tfjs를 일종의 블랙박스로 생각해야하는데, VGesture는 tfjs에 크게 의존하고 있기에, tfjs가 어떤 취약점을 가지고 있는지 모르는 상태에서 일반적이지 않는 시나리오를 허용하는 행위는 위험하다고 판단한다. 게다가 task 함수 실행을 통해 하위 모델들의 상태가 변경되기에, 올바르지 않는 접근들은 강하게 제한해야한다 판단했다.
따라서, 오직 startDetection , endDetection 메서드로만 VGesture를 구동할 수 있도록 제약을 건 것이다.
sesstionState.
지금 생각해보면 추후 수정해야겠다는 생각이 들지만, VGesture 인스턴스는 기본적으로 세션이다.
초기화 후, 실행 후, 종료 시 세션이 닫히는 데, 세션이 닫히면 재시작이 불가능하다.
따라서 재시작하려면 인스턴스를 새로 만들어야한다.
이렇게 된 배경이 있는데, 웹캠 데이터를 받아오는 mediaStream api의 경우, 한번 스트림을 종료하면 인스턴스를 다시 만들어야하기에...
혹시 모를 오작동에 대비해 그냥 VGesture인스턴스를 다시 생성하도록 했다.
솔직히... 이건 내가 게을러서 그런거다.. 추후에 업데이트 하겠다.
Observer.
일반적인 유스케이스 상, 웹사이트는 렌더 트리가 생성된 후 지속적으로 유저 인터렉션에 따라 업데이트 된다.
즉, vgesturable 객체들이 첫 렌더링 후 추가되거나 제거 될 수 있다는 뜻이므로, mutation observer를 활용해 DOM의 변경 사항을 감지하게 하였다.
크나큰 문제가 하나있다면... mutation observer가 기본적으로 DOM의 변경만 감지하지 CSSOM의 변경은 감지하지 못하기에 CSS에 의한 레이아웃이 일어날 시, 능동적으로 대체가 불가능한 점이다.
이러한 연유로 어쩔수 없이 제스처 대상 요소들의 업데이트를 강제적으로 수행하는 메서드를 하나 노출시켰는데 음... 일단 이부분은 조금더 연구를 해봐야할듯 하다.