Vue 3 마이그레이션

GitLab 프론트엔드 코드베이스를 Vue 2에서 Vue 3으로 마이그레이션하는 방법과 호환성 변경 사항, 공통 마이그레이션 패턴을 설명합니다.

Vue 2에서 Vue 3으로의 마이그레이션은 에픽 &6252 에서 추적됩니다. Vue 3.x로의 마이그레이션을 용이하게 하기 위해, 코드베이스에서 다음의 더 이상 사용되지 않는 기능을 사용하지 못하도록 방지하는 ESLint 규칙 을 추가했습니다. GitLab에서 Vue 3 (@vue/compat) 사용 가능 # GitLab 프론트엔드 팀은 GDK와 같은 개발 환경에서 Vue 3 (@vue/compat)을 활성화했습니다. 아직 프로덕션에 사용할 준비는 되지 않았지만, 로컬에서 opt-in하여 클라이언트 코드가 Vue 3과 순방향 호환되는지 확인할 수 있습니다. 어떻게 동작하나요? 빌드 도구(Vite 또는 Webpack)가 VUE_VERSION=3 환경 변수를 감지하면, 모듈 에일리어싱(module aliasing)을 사용하여 Vue 자체를 포함한 특정 의존성을 Vue 3 호환 버전으로 교체합니다. 이 대체 라이브러리 중 일부는 팀에서 유지 관리합니다. 이 라이브러리들은 기존 라이브러리를 감싸는 얇은 래퍼(thin wrapper) 역할을 하여, 컨슈머(consumer) 코드를 변경하지 않고도 Vue 3와 호환되도록 합니다. GDK에서 Vue 3 (@vue/compat) 설정 # 이 가이드는 GitLab Development Kit (GDK)에서 Vite를 빌드 도구로 사용하여 Vue 3을 설정하는 방법을 안내합니다. 사전 요구 사항 # GDK가 설치 및 구성되어 있어야 합니다. Vue.js와 Vite에 대한 기본 지식이 있어야 합니다. GDK 환경에서 Vite가 구성되어 있어야 합니다( GDK Vite Settings 참고). 초기 설정 # Vue 버전 간 전환 # Vue 2와 Vue 3 사이를 전환하려면 다음 단계를 따르세요: 원하는 Vue 버전을 설정합니다: gdk config set vite.vue_version 3 # or 2 GDK를 재구성합니다: gdk reconfigure GDK를 재시작합니다: gdk restart # or `gdk start` if running for the first time 중요: Vue 버전을 전환할 때 문제가 발생하면 yarn clean 또는 gdk kill vite 로 캐시를 지울 수 있습니다. 설정 확인 # gdk.yml 파일을 확인하여 Vite 구성을 검증할 수 있습니다: gdk config get vite 이 명령은 활성화 상태와 Vue 버전을 포함한 현재 Vite 설정을 표시합니다. GDK도 실행 중이어야 합니다. --- enabled: true hot_module_reloading: true https: enabled: true port: 3038 vue_version: 3 문제 해결 # 일반적인 디버깅 # 문제가 발생하면 Vite 로그를 먼저 확인하세요: gdk tail vite 이 명령은 실시간 Vite 출력 및 오류 메시지를 표시하여 문제를 파악하는 데 도움이 됩니다. 버전 전환 후 빌드 오류 # Vue 버전 전환 후 빌드 오류가 발생하면: yarn clean 으로 Vite