[Vue] Vue 3 마이그레이션 일지 (1)

6월 30일부터 7월 31일까지 Vue 3 마이그레이션 작업을 진행했다. 평일에만 작업했고 다른 태스크도 병행했지만 그래도 매일 근무 시간의 60-70% 정도 썼던 것 같다. 혼자서 작업했다. 프로젝트 규모가 작진 않지만 엄청 큰 편도 아니어서 그런지, 어느 정도 고비(?)를 넘기고 나서는 수월하게 작업할 수 있었다.

마이그레이션을 진행한 이유는 올해 말에 Vue 2 지원이 끝난다길래.. 구식 기술에 안분지족하면서 살 것이 아니라면 아니면 언젠가는 바꿔야 할텐데 나중에 바꾸려고 하면 더 어지러울 거 같기도 하고, 비교적 여유있는 시기이기도 해서 진행하게 되었다.

 

이 글 쓰는 이유는 개인적으로 기록해두기 위한 게 크지만.. 그 외에도, 혹시 Vue 3로 마이그레이션 하실 분들 계시면.. 이 글 보고 조금이라도 덜 막막해하시길 바라는 마음으로.. 😅

 

Vue 3 마이그레이션 flow 안내 문서에서도 그렇고, 마이그레이션 과정을 소개한 다른 블로그 글들을 봐도 그렇고, Vue 3 마이그레이션 과정은 보통 다음과 같이 8-9단계 정도로 나눠볼 수 있는 것 같다. :

1. vue-cli와 Vue 버전 업그레이드하기

2. @vue/compat 설치하고 compat 모드 켜놓기

3. 컴파일 에러 고치기

4. Vue 3 주요 변경사항에 따라 코드 수정하기

5. 주요 패키지(vuex, vue-router 등) 버전 업그레이드 하기

6. 그 외 라이브러리들 버전 맞추거나 교체하기

7. @vue/compat 제거하기

8. QA 진행

9. 배포하기

 

원래 시작이 제일 어려운 법이니까 1번을 첫 번째 고비라고 치면.. 두 번째 고비는 6번이 될 확률이 높다. (우리 프로젝트에선 그랬다ㅠ) 그래서 포기할까;하고 포기를 합리화해줄 자료(Vue3 마이그레이션 실패 케이스 정도?ㅋ)를 찾기 위해서 이것저것 구글링하다가 글 하나를 발견하고.. 반성하고 마음을 고쳐먹었다. 일본 LINE 뮤직의 웹앱을 Vue 3로 마이그레이션한 과정에 대한 글인데, 이 글 덕분에 6번 작업이 어렵고 시간이 오래 걸리는 게 자연스러운 일이라는 걸 알고 다시 용기를 내서 도전할 수 있었다. 그 외 나머지 작업에선 난해한 부분은 없었다.

각 단계를 어떤 방법으로 진행해야 하는지는 앞서 언급한 두 문서에 자세히 나와있으며, 이하에서는 6번 작업과 관련해 어떤 이슈가 있었고, 어떻게 해결했는지에 대해 정리해보려고 한다.

 

6번 작업 전까지는 디버깅도 잘 안되고 난해한 error/warning들이 많은 상태였는데, 이틀 정도를 붙잡고 있어도 진전이 없어서 일단 6번으로 넘어가야 했으나 이대로 6번을 진행해도 괜찮을지 걱정이 됐다. 음 여기서 더 나빠질 것도 없지..하고 과감하게 에러 잡기를 멈추고 6번을 진행했는데, 재미?있는 사실은 각 패키지를 Vue3 지원 버전으로 업그레이드(하거나 Vue3를 지원하지 않을 경우 다른 패키지로 교체) 하자마자 이러한 에러들이 깔끔하게 사라졌다는 점이다. 모든 패키지를 다 업그레이드할 필요는 없었으며, Vue2에 의존하고 있던 패키지들만 업그레이드하면 되었다. (각 패키지 소스코드의 package.json에서 vue가 있는지, vue가 있다면 버전이 2.x.x인지 확인)

각 패키지들의 NPM 페이지나 별도의 홈페이지에 가보면 마이그레이션 가이드가 있어서 그 가이드대로 각 패키지의 버전 변경 작업을 진행했다. 안내한대로 했는데도 error/warning이 발생하는 경우에는 디버깅 및 구글링을 통해 해결해나갔다. 정 안 되는 경우에는 좀 귀찮긴 해도 그냥 비슷한 기능을 제공하는 패키지로 교체하는 방법을 택했다.

• 프로젝트에서 국제화를 위해 쓰고 있던 vue-i18n로 인해, 6번까지 가기도 전에 2번에서부터 서버를 실행하자마자 에러가 발생해서 다른 패키지보다 이것 먼저 업그레이드 했다. 마이그레이션 문서 보면 사용 방법이 달라진 부분들을 안내하고 있어서 그에 맞춰 코드를 수정하면 되었다. 그 외에 문서에서 찾기 어려웠던 부분은, 일반 js 파일에서의 사용법이 기존과 달라졌다는 내용인데 다행히 스택오버플로우에서 해결방법을 찾아서 그에 따라 수정했다. (i18n 인스턴스를 그대로 가져와서 사용할 수 없었고, i18n.global를 참조해야 했다.)
  • 참고: https://stackoverflow.com/questions/74183241/vue-i18n-v9-using-it-as-a-javascript-object-not-inside-the-template
• vue-gtag, @gtm-support/vue-gtm 얘네는 버전 업그레이드하고 문서에 나와있는대로 변경된 사용법에 따라 조금만 수정해주면 됐다.
• vue-toast-notification는 기존에 쓰던 v0.5.4 ;;;에서 v3.1.1로 상당히 많이 점프했는데 그래서 그런지 토스트 스타일이 좀 많이 달라져서 수정하는 게 귀찮았다. 그래도 다행인 건 기존에도 커스텀을 많이 하지 않고 사용을 했어서 스타일 수정을 빡세게 하지는 않아도 됐다.
• 다음으로 차트 관련 라이브러리들을 업그레이드 했다. chart.js는 v3.8.2 -> v4.3.0, chartjs-plugin-zoom은 v1.2.1 -> v2.0.1, vue-chartjs는 v4.1.1 -> v5.2.0로 버전을 변경했다.
  • 근데 이 과정에서 기괴한 버그를 하나 발견했다..! 차트가 일단 렌더링이 되면 세로로 끝도 없이 길어지는 것이었다..;;; (거의 잭과 콩나무) 재현 조건이 뭔지 명확하게 파악하는 게 까다로워서 구글링 열심히 하다가 다음 글을 발견했는데, 확실한 원인은 모르겠지만 일단 chart 컴포넌트를 감싸는 컨테이너 컴포넌트 내부에 chart 컴포넌트 외에 다른 자식 요소가 존재할 때 이 이슈가 발생한다는 것이었다.
    • https://github.com/chartjs/Chart.js/issues/5805#issuecomment-893961074
  • 그래서 이 코멘트 참고해서 컨테이너 컴포넌트에는 chart 컴포넌트만 두도록 수정했더니 버그가 감쪽같이 사라졌다.

 

그 외에 vue datepicker랑 tooltip 등 더 있는데.. 졸린 관계로 2편에서 이어서 써야겠다..