[T.Viewer 개발일기] 9. Vuetify 소소한 수정

굳이 하나의 글로 뽑아서 쓸만한 내용인가 싶은 소소한 수정 사항을 적어봤다. Vuetify 진짜 편하다. 쉽고 빠르게 깔끔한 UI 만들 수 있어서 넘 좋다. 레퍼런스도 많고, QnA도 많아서 개발하기 참 좋다.

https://vuetifyjs.com/ko/

v-icon

v-icon은 아이콘을 쉽게 사용할 수 있는 컴포넌트이다. Bootstrap과는 달리 attribute나 property에 값을 넣는게 아니고, text 값에 따라서 아이콘이 변경되는 것이 독특하다.

Material Design Icons의 아이콘 들은 간단하게 mdi- prefix를 붙이고 사용할 수 있다.

    <v-icon>mdi-filter</v-icon>

Material Design와 Font Awesome을 사용할 수도 있는데, 추가로 설치가 필요하다.

install-material-icons

v-select

html select element에 해당하는 콤포넌트로 v-select를 제공한다. 기본적으로 속성들이 비슷하다. 왠만한거 다 되는데, 최소 높이가 56px로 좀 높다. toolbar의 default 높이가 48px라서 그 안에 넣으면 망. stackoverflow 에도 관련된 문의들이 몇개 있는데, 썩 마음에 드는 방법을 못찾아서 일단 그냥 가고 나중에 더 손봐야 겠다. 수학 시험 볼 때 어려운 문제는 잠깐 패스하는 그런 스킬이랄까?ㅎ 일단 toolbar 높이를 높이는 것으로 고.

    <v-flex xs4>
        <v-select dense v-model="logLevelsSelected" :items="logLevels"></v-select>
    </v-flex>

log level 에 따라서 필터링하기

Tizen Dlog는 아래와 같은 로그 레벨을 갖고 있다. 6개의 레벨 중 하나를 선택하면 그 아래 레벨은 모두 출력되도록 구성할까 한다. 안스 로그캣처럼.ㅎ

• V – verbose
• D – debug
• I – info
• W – warning
• E – Error
• F – Fatal

로그는 이렇게 출력되는데, log level의 표시는 대문자 하나로 고정된 위치에 출력 되기 때문에 그냥 잘라서 단순 비교했다.

    // 07-10 14:51:21.337+0900 I/RESOURCED( 2617): heart-battery.c:....
    filterLogLevel: function (line) {
      const LOG_LEVEL_CHAR_START_POSITION = 24;
      let logLevelIndex = this.logLevels.indexOf(this.logLevelsSelected);
      let logChar = line.substr(LOG_LEVEL_CHAR_START_POSITION,1);

      if (logLevelIndex == 0 || this.logLevelChars[5] == logChar)
        return true;

      if (this.logLevelChars[4] == logChar) {
        return logLevelIndex <= 4;
      } else if (this.logLevelChars[3] == logChar) {
        return logLevelIndex <= 3;
      } else if (this.logLevelChars[2] == logChar) {
        return logLevelIndex <= 2;
      } else if (this.logLevelChars[1] == logChar) {
        return logLevelIndex <= 1;
      } else {
        return logLevelIndex == 0;
      }
    }

Window resize 이벤트 처리

데탑용 앱이라 윈도우 사이즈가 자유 자재로 변경이 가능한데, 이 부분에 대한 처리는 기존에 웹에서 하는 것과 동일하다. resize 이벤트를 수신해서 처리해주면 된다. Vue는 css도 바인딩이 되어서, height값을 변경만 해주어도 자동으로 반영이 된다.

mount 될 때 이벤트 리스너 붙여주고,

    window.addEventListener('resize', this.handleResize);

이벤트가 호출될 때 계산만 해주면,

    getEditorHeight() {
      console.log(window.innerHeight - toolbarHeightTotal);
      return window.innerHeight - toolbarHeightTotal;
    },
    handleResize() {
      this.editorHeight = this.getEditorHeight();
    },

css 스타일도 바로 업데이트가 된다.

    <div ref="viewer" :style="{'height': height + 'px'}"></div>

마치며

Vue와 Vuetify를 쓰면 쓸 수록 참 잘 만들었다는 생각이 든다. 웹이라는 진입장벽이 있는 것 같지만, 생각보다 굉장히 낮고, 일단 장벽을 넘어서면 다른 모듈이나 component를 사용하기가 너무 쉽다. 말그대로 직관적이다. 어느 시점부터는 레퍼런스를 안봐도 '이렇게 하면 되겠다' 싶은 생각이 든다. 프레임워크를 관통하는 컨셉과 통일성이 잘 유지되기 때문인것 같다. 어떻게 하면 App을 쉽게 만들 수 있을까. 쉽게 만들 수 있게 해줄까에 대한 깊은 고민에 큰 영감을 준다.

msaltnet/T.Viewer - Create filter dialog