! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

Vue 2에서 Vue 3.1로 마이그레이션하는 방법 > 인사이트

본문 바로가기

MESCIUS 커뮤니티

인사이트 - IT&개발 정보

IT&개발 정보 Vue 2에서 Vue 3.1로 마이그레이션하는 방법

페이지 정보

작성자 GrapeCity 작성일 2021-10-21 11:51 조회 12,474회 댓글 0건

본문

많은 개발자들은 MVVM(model-view-viewmodel) JavaScript 프레임워크인 오픈 소스 Vue.js를 사용하여 사용자 인터페이스와 단일 페이지 응용 프로그램을 빌드하는 것을 즐깁니다. Vue.js의 증분형, 적응형 모놀리식(monolithic) 프레임워크는 뷰 레이어에 중점을 두는 핵심 라이브러리를 포함하고 있으며, 기타 레이어의 다른 라이브러리와 통합됩니다.

Vue 버전 2에는 제한된 typescript 지원, 성능 병목 현상, 까다로운 유지 보수, 제한된 스케일링 성능 등의 단점이 있습니다. Vue 버전 3은 성능, 가독성, 유지 보수, 보안 향상을 위해 아키텍처와 함수를 변경하여 이러한 문제를 해결하려고 합니다. Vue 3은 비교적 새롭고 여전히 개발 중인 버전이지만 거의 모든 프로젝트는 결국 Vue 3으로 변환하거나 마이그레이션해야 합니다.

새로운 Vue.js 버전의 몇 가지 변경 내용을 살펴보고, 실습 예제를 사용하여 응용 프로그램을 Vue 2에서 Vue 3으로 마이그레이션하는 방법을 알아보겠습니다. 계속 진행하려면 Vue 2에 대해 알고 있어야 합니다.


Vue 3 변경 내용

Vue 3에는 새 글로벌 API, 새 컴퍼지션 API, 템플릿 지시문 변경 내용, 렌더링 기능 API 변경 내용 같은 기본 아키텍처 변경 내용을 포함하여 많은 변경 내용이 있습니다. 이 블로그에서 이러한 차이점을 간략하게 살펴볼 것이며, Vue 개발자 문서에서 각 개발에 대한 자세한 정보를 확인할 수 있습니다.


전역 API 또는 응용 프로그램 만들기

Vue 2 응용 프로그램 생성 메서드는 플러그인, 믹스인 등의 전역 구성이 영구적으로 상태를 변경할 수 있도록 전역 상태(state)를 액세스 가능하게 유지했습니다. 이 때문에 응용 프로그램이 손상될 수 있었습니다.

Vue 버전 2 앱 생성 구문은 다음과 같습니다.

new Vue({
  store,
  render: h => h(App)
}).$mount('#app');


반면, Vue 버전 3에서는 새로운 .createApp 메서드를 사용하여 새 응용 프로그램을 만듭니다. 이 메서드가 모든 Vue 응용 프로그램의 진입점이므로 새 루트 API는 호환성이 손상되는 주요 변경 내용입니다.

import Vue, { createApp } from 'vue';
​
createApp(App)
.use(store)
.mount("#app");


새 컴포넌트 정의

Vue 3에서는 Vue의 컴포넌트 생성 방식도 변경됩니다.

Vue 2 방식은 다음과 같습니다.

Vue.component('component-name',
{  
    // component code here
})  


Vue 3에서는 다음과 같이 Vue.component를 루트 컴포넌트로 바꿉니다.

const app = Vue.createApp({…})
app.component(‘component-name’){
  ///Component code
}


데이터 옵션 사용

Vue 3에서는 필요한 모든 객체를 반환하는 함수로 데이터를 간주합니다. 데이터는 더 이상 객체가 아닙니다.

Vue 2에서는 데이터를 다음과 같이 처리합니다.

const app = new Vue({
  // options object
  el: '#app'
  data:
  {
        object: <some object>
  }
})


Vue 3에서는 데이터를 다음과 같이 사용합니다.

const app = Vue.createApp({
// options object    
data(){
      return {
          object: <some object or string etc>
    }
  }
})


V-if 및 V-for 우선 순위

동일한 요소에 v-if 및 v-for 지시문을 둘 다 사용하는 경우 Vue 2에서는 v-for가 우선 적용됩니다. 이 우선 순위는 Vue 3에서 반대가 되므로 v-if가 우선 적용됩니다.


Vue 라우터 변경 내용

새로운 Vue 라우터 버전에도 호환성이 손상되는 몇 가지 변경 내용이 있습니다. 주요 변경 내용은 새 createRouter 함수입니다. 내역(history) 같은 모드에도 create 함수가 있습니다.

Vue 3에서 라우터를 사용하는 새로운 방법은 다음과 같습니다.

import { createRouter, createWebHistory } from 'vue-router'
createRouter({
    history: createWebHistory(),
    hash: createWebHashHistory(),
    abstract: createMemoryHistory()
    routes: [],
})


라우터를 사용하려면 응용 프로그램을 탑재하기 전에 app.use(router) 옵션을 사용합니다. 여기서 app은 루트 컴포넌트입니다.


Vuex 변경 내용

Vue 3와 호환되는 새로운 Vuex 버전에도 Vue 라우터와 유사하게 응용 프로그램 호환성이 손상되는 변경 내용이 있습니다. 먼저 Vuex에서 createStore를 가져온 다음, createStore 함수를 사용하여 응용 프로그램 저장소를 만들어야 합니다.

Vue 2에서 Vuex를 사용하려면 아래 코드를 실행합니다.

export default new Vuex.Store({
    …
});


이제 Vue 3에서 Vuex createStore를 사용하려면 아래 코드를 실행합니다.

import { createStore } from 'vuex'
export const store = createStore({
    state () {
      return {
        count: 1
      }
    }
})


Vue 3에서는 useStore도 소개합니다. Vuex 4는 useStore 함수를 사용하여 Vue 응용 프로그램의 설치 후크에서 저장소를 가져옵니다. Vue 3 설명서에 따라 useStore를 다음과 같이 작동합니다.

import { useStore } from 'vuex'
export default {
    setup () {
       const store = useStore()
    }
}


새 메서드는 Vue 응용 프로그램에서 해당 컴포넌트를 선언하고 사용하는 방식을 변경합니다. Vue 3의 다른 모든 변경 내용 목록은 개발자 문서를 참조하십시오.


마이그레이션 빌드

Vue 3의 많은 변경 내용 때문에 개발자가 Vue 버전을 2에서 3으로 업그레이드한 후 Vue 2 응용 프로그램을 실행하려고 하면 여러 오류가 발생하고 컴파일에 실패합니다. 프로덕션 응용 프로그램의 크기를 감안할 때 컴파일러 및 런타임 오류를 모두 수정하는 것은 어려울 수 있습니다.

응용 프로그램을 Vue 2에서 Vue3으로 쉽게 마이그레이션할 수 있도록 Vue 팀은 마이그레이션 빌드를 도입했습니다. 문서에 따르면, 마이그레이션 빌드는 개발자가 Vue 3에서 Vue 2 동작을 구성하는 데 도움이 됩니다.

이 빌드는 기본적으로 Vue 2 모드에서 실행되므로 대부분의 공용 API(몇 개 제외)가 정확히 Vue 2처럼 동작합니다. 기능이 변경되었거나 더 이상 사용되지 않는 경우 마이그레이션 빌드에서 런타임 경고를 생성합니다. 개발자가 각 컴포넌트의 호환성을 활성화하거나 비활성화할 수도 있습니다.

마이그레이션 빌드는 전체 응용 프로그램을 재작성하지 않고도 응용 프로그램을 버전 2에서 버전 3으로 전환하는 데 도움이 됩니다. 이 기능을 위해 Vue 3에서 호환성이 손상되는 변경 내용을 포함하여 Vue 2 응용 프로그램을 있는 그대로 실행합니다. 나중에 경고를 throw하여 변경해야 하는 코드를 표시합니다. 이 빌드는 Vue 3 준수를 위해 Vue 2 앱을 변경하는 더 원활하고 쉬운 방법을 제공합니다. 마이그레이션 빌드는 Vue 2 특정 라이브러리와 사용되지 않는 API를 처리하지 않습니다.

마이그레이션 빌드는 이상적인 장기 솔루션이 아니라 업그레이드를 위한 중간 솔루션으로 사용할 수 있습니다. 하지만 필요한 경우 설명서에 따라 프로덕션 응용 프로그램에 사용할 수 있습니다. "마이그레이션 빌드에서 앱이 실행되는 경우 마이그레이션이 완료되기 전에 프로덕션에 마이그레이션 빌드를 제공할 수 있습니다. 약간의 성능/크기 오버헤드는 있지만 프로덕션 UX에 눈에 띄는 영향을 주지는 않습니다."


마이그레이션 빌드에서 Vue 2 응용 프로그램 실행

응용 프로그램을 마이그레이션하는 방법을 이해하기 위해 예제를 살펴보겠습니다. Brad Traversy의 To-do Manager 응용 프로그램과 비슷한 Vue 2 Album Manager를 빌드했습니다. Album Manager는 다음을 수행할 수 있습니다.

  • 앨범 추가

  • 앨범 삭제

  • 앨범을 “heard”로 표시

Vue 2에서는 응용 프로그램이 다음과 같이 표시됩니다.

image1

사용 중인 앱은 타사 라이브러리를 사용하지 않습니다. 그러나 응용 프로그램이 해당 라이브러리를 사용하는 경우 응용 프로그램을 마이그레이션하기 전에 Vue 3 호환 버전을 기다리는 것이 가장 좋습니다.

Vue 설명서에 따르면, 내부 Vue 2 API 또는 문서화되지 않은 동작에 의존하는 종속성은 일반적으로 VNodes의 전용 속성을 사용합니다. SSR(서버 측 렌더링)에 마이그레이션 빌드를 사용할 수는 있지만 사용자 정의 설치 마이그레이션과 더 관련이 있습니다. Vue 3에는 번들 렌더러가 없습니다. Vue 작성자는 Vite에서 Vue 3 SSR을 사용하도록 권장합니다.

Nuxt.js, Vuetify, Quasar 또는 ElementUI를 사용하는 경우 Vue 팀은 다음 버전을 기다리도록 권장합니다. 대부분의 중요한 라이브러리는 Vue 3 호환 버전을 곧 릴리스할 계획이지만 응용 프로그램에서 호환성이 손상되는 보조 라이브러리를 사용할 수도 있습니다.

마이그레이션 빌드를 사용하는 경우에도 크고 복잡한 라이브러리를 마이그레이션하는 것은 어려울 수 있습니다. 그러나 Vue 작성자는 컴퍼지션 API와 기타 Vue 3 기능을 2.7 릴리스로 백포트할 계획이라고 말합니다.


마이그레이션 빌드 준비

마이그레이션 빌드를 시작하기 위해 먼저 현재 Vue 버전을 시스템에 전체적으로 설치합니다. Vue 버전을 확인하기 위해 다음 명령을 트리거합니다.

vue – version


이 명령은 Vue의 현재 버전을 반환합니다.

다음에는 마이그레이션 빌드를 설치하기 위해 다음 명령을 실행합니다.

npm install -global vue@^3.1.0 @vue/compat@^3.1.0
npm install -global --save-dev @vue/compiler-sfc@^3.1.0


이제 호환성 빌드를 설치했으므로 템플릿 컴파일러를 제거할 수 있습니다.

npm uninstall vue-template-compiler


그런 다음, Vue 업그레이드를 실행하여 종속 라이브러리를 업그레이드해야 하는지 확인합니다.

이제 모든 종속성과 Vue 마이그레이션 빌드를 설치했으므로 빌드를 활성화할 수 있습니다. 이렇게 하려면 다음 코드를 실행하여 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
              }
            }
          }
        })
    }
}


코드를 추가하고 파일을 저장한 경우 npm run serve 명령을 실행하여 응용 프로그램을 호환성 모드로 실행할 수 있습니다.

모든 종속성을 올바르게 해결한 경우에는 응용 프로그램이 있는 그대로 실행됩니다. 그러나 콘솔 창을 열 때 여러 경고가 표시될 수도 있습니다.

예를 들어, 마이그레이션 빌드 모드에서 Album Manager를 실행하는 경우 응용 프로그램이 실행되지만 다음 오류가 표시됩니다.

image2

실행 중인 응용 프로그램은 다음과 같이 표시됩니다.

image3

콘솔 오류는 경고일 수도 있지만 호환성이 손상되는 변경 내용입니다. 마이그레이션 빌드는 강도를 경고로 낮추지만, 그와 동시에 응용 프로그램의 모든 변경 내용이 Vue 3과 호환되어야 한다고 지적합니다.

image4

변경 내용 적용

이제 필요한 변경 내용을 알고 있으므로 응용 프로그램을 Vue 3과 호환되도록 만들 수 있습니다.

먼저 Vuex를 다음 버전으로 업그레이드해야 합니다. 이렇게 하려면 아래 명령을 실행합니다.

npm install -global vuex@next


그런 다음, 아래 명령을 사용하여 Vue 버전을 업그레이드합니다.

npm install -g @vue/cli


항상 npm install도 실행하는 것이 좋습니다.

모든 업그레이드를 처리한 후에는 코드를 변경해야 합니다. Album Manager가 Vue 3 응용 프로그램으로 실행되도록 하는 데 필요한 코드 변경 내용을 살펴봅시다.


Create API 변경

앞서 설명했듯이, Vue 3에는 앱을 만드는 새로운 방법이 있습니다. 이 변경 내용을 통합하기 위해 main.js 파일을 변경합니다. 비교를 위해 파일에서 Vue 2 코드를 주석으로 처리합니다. 따라서 main.js를 다음과 같이 변경합니다.

import Vue, { createApp } from 'vue';
import App from './App.vue';
import store from './store/index';
​
Vue.config.productionTip = false;
​
//Vue 3 code
createApp(App)
.use(store)
.mount("#app");


저장소 변경

store 폴더를 간소화하고 index.js의 모든 코드를 작성해 보겠습니다. 응용 프로그램 일관성을 유지하기 위해 함수 이름이 포함된 action-types.js를 만듭니다.

Vue 2 버전에서는 Veux.store 함수로 저장소를 만들어 모듈을 활성화합니다. Vue 3에서는 이 코드가 createStore 함수로 변경됩니다.

Vue 2 버전은 다음과 같습니다.

Vue.use(Vuex)
export default new Vuex.Store({
    state: { … },
    mutations: { … },
    actions: ( … },
    modules: { … }
})


가져오기, 업데이트, 추가, 앨범 삭제 등 응용 프로그램에서 수행하는 모든 활동에 대한 작업과 변경을 만들어야 합니다. 데이터를 가져오기 위해 Typicode 엔드포인트를 사용합니다.

Vue 2 구문과 비슷하게 저장소를 설정합니다. 유일한 차이점은 createStore 함수 내에서 모두 설정한다는 것입니다.

예를 들어, 첫 번째 작업(즉, 앨범 가져오기)을 설정하기 위해 다음 index.js를 만듭니다.

export default Vuex.createStore({
  state: {
    albums: [],
  },
  mutations: {
    [ACTION_TYPES.fetchAlbums]: (state, albums) => (state.albums = albums),
  },
  actions: {
    onFetchAlbums: async ({ commit }) => {
      const response = await Axios.get(
        "https://jsonplaceholder.typicode.com/albums"
      );
      const data = response.data;
      for (var k in data) {
        data[k].completed = false;
        console.log(data[k]);
      }
      //console.log(response.data);
      commit(ACTION_TYPES.fetchAlbums, data);
    },
  },
});



다른 모든 작업도 비슷하게 설정합니다.


Vue 파일

Vue 파일에서 computed, onMounted, setup 함수를 사용합니다. 이 코드를 다음과 같이 작성합니다.

import { useStore } from "vuex";
import { computed, onMounted } from "vue";
export default {
name: "Fetch Albums",
setup() {
  const store = useStore();
  const albums = computed(() => store.state.albums);
​
onMounted(() => {
    store.dispatch("onFetchAlbums");
});
….
}


변경 내용을 좀 더 자세히 살펴보겠습니다.


Computed

computed 함수는 Vue 2의 computed 속성을 대체합니다. getter를 computed 함수에 전달하고 변경할 수 없는 개체를 반환 값으로 얻습니다.


onMounted

onMounted 훅은 콜백 함수를 받는 Vue 2의 mounted 속성을 대체합니다.

예를 들어 Albums.vue에는 다음 코드가 있습니다.

onMounted(() => {
    store.dispatch("onFetchAlbums");
});


Setup 함수

Vue3에서는 컴퍼지션 API를 사용하여 컴포넌트를 처리합니다. setup 함수는 모든 컴포넌트의 시작점입니다.

setup 함수는 속성과 컨텍스트를 받습니다. 응용 프로그램에 표시할 데이터를 setup 함수에서 직접 반환합니다.


ref

AddAlbums.vue 파일은 ref 함수를 사용하여 반응형 변수를 초기화합니다.

import { ref } from "vue";
​
setup() {
  const store = useStore();
  const title = ref("");
  const addAlbum = e => {
    e.preventDefault();
    store.dispatch("onAddAlbum", {
      title: title.value
    });
    title.value = "";
  };


이상으로, 응용 프로그램을 Vue 3과 호환되도록 만드는 데 필요한 주요 변경 내용을 마쳤습니다. 이제 Vue 3에서 응용 프로그램을 실행하면 다음과 같이 표시됩니다.

image5


결론

Vue 3에는 컴포지션 API와 함수, 새 Vuex 버전, 새 Vue 라우터, 반응형 변수 등의 중요한 아키텍처 변경 내용이 있습니다. 이러한 변경 내용으로 인해 Vue 2 응용 프로그램의 호환성이 손상될 수 있습니다. 응용 프로그램 크기에 관계없이 응용 프로그램을 마이그레이션하는 것은 어렵습니다. Vue 팀은 이 문제를 완화하기 위해 마이그레이션 빌드를 도입했습니다. 마이그레이션 빌드는 Vue 2 응용 프로그램을 호환성 모드로 실행하고, 응용 프로그램을 Vue 3과 호환되도록 하는 데 필요한 변경 내용과 호환성이 손상되는 변경 내용에 대해 경고합니다.

마이그레이션 빌드는 유용하지만 가능한 모든 문제를 해결하지는 않습니다. 또한 이 도구는 장기적 솔루션이 아니라 마이그레이션을 시작하기 위한 발판일 뿐입니다. 응용 프로그램을 Vue 2에서 Vue 3으로 마이그레이션하는 작업은 여전히 철저한 계획이 필요한 중요한 작업입니다. 그러나 개발자가 점차 새로운 Vue 버전으로 업그레이드하고 향상된 기능을 활용하고 있으므로 반드시 필요한 작업입니다.

Vue 2로 작업하든, Vue 3으로 전환하든 관계없이 GrapeCity Vue 호환 컴포넌트를 응용 프로그램에 포함하면 개발 시간을 절약할 수 있습니다. SpreadJSWijmo는 차트와 피벗 테이블 같은 스프레드시트 컴포넌트, 맵, 100여 개의 사용자 인터페이스 컴포넌트를 응용 프로그램에 빠르게 추가합니다. 고객이 즐겨 사용할 수 있는 세련되고 편리한 인터페이스를 쉽게 만들려면 SpreadJS와 Wijmo를 확인해 보시기 바랍니다.


wj.png

 

spjs.png

  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

인기글

더보기
  • 인기 게시물이 없습니다.
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.