Vue3와 Vuetify3

Vue2가 2023년 12월 31일부로 지원이 중단됐다.(EOL)

회사에서 진행하는 프로젝트에서 Vue2를 사용하고 있었기에 Vue3로 업그레이드 시키는 작업을 시작했다.

 

이전에 실무 작업을 할 땐, 항상 UI 컴포넌트를 직접 작업했었는데,

이번 프로젝트에선 꼭 UI Framework 사용하기로 마음 먹었다.

 

우선, 기존 프로젝트에서 Vue2, Vuex, Bootstrap-vue 등 Vue2에 최적화 된 패키지들을 걷어내고

Vue3에 최적화 된 패키지들을 검토했다.

 

Vue-router는 그대로 사용하고, 상태 관리 라이브러리는 Pinia로 변경했다.

빌드 도구는 Vite를 선택했다.

UI Framework를 선택해야 하는데...

 

UI Framework 상위 3개를 비교했다.

각 버전 1부터 현재 버전까지 통합 이용자 수를 비교했을 때

 

Vuetify > Bootstrap-Vue > Quasar

Vuetify가 가장 많았다.

 

Bootstrap-vue도 현재 공식 버전을 지원하지 않고, Vue3 환경에서 사용하려면 특정 패키지를 같이 설치해야 했다.

 

Vuetify는 Bootstap-Vue와 마찬가지로 현재 Vue3를 위한 공식 버전이 릴리즈 되지 않았다.

그럼에도 불구하고 이용자 수가 가장 많고, 현재 3.5.1버전을 제공하고 있기 때문에, 조만간 정식 버전이 출시될거라는 기대를 안고 Vuetify를 선택했다.

 

프로젝트 최초 환경 셋팅을 하고 Vuetify를 설치를 시도했다.

설치를 하면서부터 이슈가 생겼다.

 

Vue 셋팅에 따라 설치 방법도 여러 가지고, 각 설치 방법에 따라 지원하는 vite나 관련 플러그인들의 버전도 다양했고, 실제로 버전 충돌도 발생했다.

여러 분석과 시도 끝에 버전 충돌이 나지 않으면서 최신의 버전의 Vuetify를 설치하는 데 성공했다.

 

설치 후, 스타일 설정을 위해 Sass를 설치하고 셋팅을 시도했다.

문제는 여기서 발생했다.

 

Vuetify는 기본적으로 material 기반의 디자인 컴포넌트를 제공하고, 커스텀 하기 위해선 Sass 파일을 만들고, 사용하는 변수들을 Override하는 방식을 사용하는데, Override해서 변수를 재설정하면 관련 Sass들을 모두 수정하기 때문에 파일 로딩이 느리다.

 

Vite가 HMR(Hot Module Replacement) 방식으로 파일을 렌더링하기 때문에, 파일이 수정되면 갱신된 파일만 실시간으로 반영해서 화면 반영이 굉장히 빠른 편임에도 불구하고, 굉장히 느린 속도로 화면이 전환되었다.

 

SCSS 속성 3개 Override 시 변경되는 파일들

왜 그런지 확인해 보니...

속성 3개만 수정해도 관련된 모든 파일이 수정되었다.

 

이는 로딩 속도에서도 차이를 만들어 냈다.

최초 로딩 시

 화면을 최초 로딩할 땐, 평균적으로 0.3초에서 0.5초의 로딩 시간이 소요되었다.

 

Override 후, 로딩 시

SCSS 속성 3개를 Override 후, 화면을 로딩했을 때엔 말도 안되게 23초 이상의 시간이 소요되었다.

SCSS 공통 속성 수정은 최초에만 작업할 예정이긴 하지만, 추후 어떤 문제를 야기시킬지 짐작할 수 없기 때문에 Vuetify의 치명적인 단점으로 다가왔다. (* 간혹 저장 시 Vite(빌드 & 스캐폴딩 도구)가 다운되는 일도 빈번했다.)

 

이 외에도 공식 사이트의 제공 정보가 너무 불친절하다.
-기초적인 정보가 없음.
-내용이 부실함.

현재 공식 버전이 나온 게 아니기 때문에 검색을 해도 deprecated 된 코드에 대한 정보와 현재 사용되는 대체 코드가 분별없이 노출되어 있어서 정보 습득의 어려움이 있다.

 

그래서 불안정한 Vuetify를 실무에 적용하느니 현재 가장 안정적인 Quasar를 적용하기로 했다.

추후 UI Framework 전환의 기회가 있고, Vuetify가 공식적으로 안정 버전을 배포하면 그때 전환하는 것을 생각해 보려한다.