Vue 3.1.0-beta 마이그레이션 빌드 문서 번역

kdeun1·2021년 5월 9일
1
post-thumbnail

개요

마이그레이션 빌드가 포함된 Vue 3.1.0-beta 버전이 릴리즈되었다.
@vue/compat(일명 "마이그레이션 빌드")은 Vue 2의 동작이 호환되는 구성을 제공하는 Vue 3의 빌드이다. 마이그레이션 빌드는 기본적으로 Vue 2에서 실행되며, 몇 가지 예외 케이스말고는 왠만한 공통 APIs는 Vue 2와 동일하게 사용하다. Vue 3에서 변경되었거나 더이상 지원되지 않는 기능을 사용하면 런타임 경고가 발생한다. 기능의 호환성은 컴포넌트별로 활성화/비활성화 할 수 있다.

제한점

마이그레이션 빌드가 가능한 한 Vue 2의 동작을 모방하도록 최선을 다했지만, 업그레이드 할 수 없는 몇 가지 제한사항이 있다.

  • Vue 2 내부 APIs나 문서화되지 않은 동작에 의존하는 종속성. 프로젝트가 Vuetify, Quasar, ElementUI와 같은 컴포넌트 라이브러리에 의존하는 경우 Vue 3 호환 버전을 기다리는 것이 가장 좋다.
  • IE 11 지원에 대한 문제. Vue 3은 공식적으로 IE 11를 지원하지 않으므로, IE 11 이하의 환경에서 개발하는 경우 Vue 2를 유지해야 한다.
  • SSR의 문제. 마이그레이션 빌드는 SSR에서 사용할 수 있지만, 커스텀된 SSR의 마이그레이션인 경우는 복잡하다. 일반적으로 vue-server-renderer@vue/server-renderer로 대체해야 한다. Vue 3은 번들 렌더러의 역할을 사용자 영역에서 할 수 있어 더이상 번들 렌더러를 지원을 하지 않아, Vite와 함께 Vue 3 SSR을 사용하는 것을 추천한다. Nuxt를 사용하는 경우 Nuxt 3을 기다리는 것이 좋다.

기대 효과

마이그레이션 빌드는 공개적으로 문서화된 Vue 2 API와 동작만을 포함하는 것을 목표로 한다. 공식적인 동작 외에 커스텀한 경우에 일일히 모든 케이스에 마이그레이션 빌드를 수정할 수 없으므로, 마이그레이션 빌드를 사용하여 버그가 나는 경우에 리펙토링을 해야한다.
2021년 3분기 후반에 릴리즈할 예정인 Vue 2.7버전에서 Composition API 및 기타 Vue 3 기능을 백포트할 것이다.
마이그레이션 빌드는 3.1 버전부터 제공된다. 2021년 후반까지만 마이너 버전으로 마이그레이션 빌드를 제공할 것이며, 그 때까지 개발자는 Vue 3의 표준 빌드로 전환하는 것을 목표로 해야 한다.

어떻게 업그레이드할까?

  1. deprecated된 named / scoped slot 문법을 최신 문법으로 변경한다. (2.6 버전에서 이미 지원함)

  2. package 버전 업데이트

  • 커스텀 웹팩 환경인 경우 vue-loader를 ^16.0.0으로 업그레이드
  • vue-cli 환경인 경우 @vue/cli-service를 업그레이드
  1. vue 버전
  • package.json에서 vue를 3.1로 업데이트하고 동일한 @vue/compat을 설치
  • vue-template-compiler가 있는 경우 @vue/compiler-sfc를 3.1로 변경하여 설치
"dependencies": {
-  "vue": "^2.6.12",
+  "vue": "^3.1.0-0",
+  "@vue/compat": "^3.1.0-0"
  ...
},
"devDependencies": {
-  "vue-template-compiler": "^2.6.12"
+  "@vue/compiler-sfc": "^3.1.0-0"
}
  1. 빌드 설정에서 vue를 @vue/compat으로 별칭을 지정하고, Vue 컴파일러 옵션을 통해 호환 모드를 활성화한다. vue-cli
    // vue.config.js
    module.exports = {
      chainWebpack: config => {
        config.resolve.alias.set('vue', '@vue/compat')
        config.module
          .rule('vue')
          .use('vue-loader')
          .tap(options => {
            return {
              ...options,
              compilerOptions: {
                compatConfig: {
                  MODE: 2
                }
              }
            }
          })
    }
    
    일반적인 webpack
    // webpack.config.js
    module.exports = {
      resolve: {
        alias: {
          vue: '@vue/compat'
        }
      },
      module: {
        rules: [
          {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
              compilerOptions: {
                compatConfig: {
                  MODE: 2
                }
              }
            }
          }
        ]
      }
    }
    
  1. 마이그레이션 빌드 사용 시 filters를 사용하는 코드에 대해 브라우저 콘솔에서 런타임 경고와 커맨드에서 컴파일러 경고가 모두 표시된다. filters를 methods로 만들어 변경한다.
  1. 많은 경고가 표시되지만 앱은 실행될 수 있어야 함.

  2. <transition> 클래스 이름을 업데이트한다.

  1. 새로운 전역 마운팅 API를 변경한다.
  1. vuex를 v4로 업데이트한다.
  1. vue-router를 v4로 업데이트한다.
  1. 일부 기능에서는 Vue 2와 Vue 3간의 충돌이 있을 수 있으므로 compatConfig 옵션을 사용해서 컴포넌트 별로 Vue 3 동작을 옵트 인 할 수 있다.
  1. 모든 경고가 수정되면, 마이그레이션 빌드를 제거하고 Vue 3으로 적절하게 전환할 수 있다. Vue 2 동작에 의존하는 종속성이 있는 경우에는 전환하기 어렵다.

기타

  1. 마이그레이션 빌드 문서
    https://github.com/vuejs/vue-next/tree/master/packages/vue-compat
  2. Vue 3 버전 로그
    https://github.com/vuejs/vue-next/blob/master/CHANGELOG.md
profile
프론트엔드 개발자입니다.

0개의 댓글