시작..

  • qooxdoo는 자바스크립트 하나로 UI도 그리고 데이터도 처리하는 프레임워크입니다.
  • 해당 프레임워크를 사용하면서 한 번씩, “UI가 다 완성되고 난 후 처리되어야 하는 작업은 어떻게 처리하지?“에 대한 고민이 있었습니다.
  • 이벤트로 처리 가능한 상황들은 문제가 없지만, 그렇지 못한 상황들도 존재하고 있었거든요.
  • 이 이슈는 그런 상황에서 사용가능한 qx.util.DeferredCall() 에 관한 이야기입니다.

문제점

  • 기존에는 테이블 UI가 그려질 때 특정 컬럼에 필터(원하는 조건의 데이터만 보여줌)가 적용되어 있으면, 필터가 적용된 것을 표시하기 위해 색상을 변경하는 작업이 있었습니다.
  • 하지만 버전이 업데이트되고 나서부터, 처음 테이블 UI가 그려지는 경우에는 해당 기능이 동작하지 않는 이슈가 발생했습니다. 한 번 그려진 이후에는 필터를 걸면 색상 표시가 잘 됐고요.

원인

  • 우선 테이블 헤더 셀은 table - pane scroller - header - headerCell의 구조로 이루어져 있습니다.
  • 테이블 컬럼 필터 정보를 표시하기 위해 header cell에 폰트 색상을 적용하고 있습니다.
  • 디버깅을 해보니, 처음에 테이블을 그리고 폰트 색상을 변경하였으나 이후에 pane의 modelChanged 이벤트로 header가 새로 그려지면서 header cell 폰트 정보가 초기화되고 있었습니다.
  • pane의 modelChanged 이벤트가 왜 발생했는지는 알아보지를 알았네요. 그냥 프레임워크의 변경이겠거니 생각만 하고 있었습니다. 추후에 찾아서 추가적으로 포스팅하겠습니다.
  • 무튼 이것을 해결하기 위해, 클래스의 작업이 모두 끝난 이후에 수행할 작업을 스케줄링할 수 있는 qx.util.DeferredCall() 메소드를 사용했습니다.
  • V7.6에 새롭게 추가된 메소드가 아니라 예전부터 존재하던 메소드였는데, 이제 알았다니.. 아주 개탄스럽네요.
  • header cell에 폰트를 적용하는 로직을 qx.util.DeferredCall()에 추가함으로써 문제를 해결했습니다.

느낀 점

  • 디버깅을 잘하자? 입니다. 이상한 문제가 발생하는 경우, 디버깅도 중구난방으로 하게 되는 경우가 있는데, 컴퓨터는 역시나 거짓말을 하지 않기 때문에 차근차근 따라가다보면 풀리는 문제였습니다.
  • 그리고 매뉴얼을 잘 읽자 입니다. 어떤 메소드들을 제공하는지 유심히 살펴볼 필요를 느꼈습니다.