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

(2주만에 쓰는 2편)

 

Vue3 마이그레이션 과정은 다음과 같이 크게 9가지 단계로 나눠볼 수 있다고 했었다. (1편에서..)

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

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

3. 컴파일 에러 고치기

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

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

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

7. @vue/compat 제거하기

8. QA 진행

9. 배포하기

 

1편에 이어서, Vue 3 마이그레이션 과정에서 제일 오랜 시간과 정성을 들였던 6번의 외부 패키지 버전 맞추는 작업에 대해 좀 더 끄적여보자면....

 

캘린더(또는 datepicker) 라이브러리도 교체했다. :

• 우리 프로젝트에선 기존에 vue2-datepicker(v3.11.0)을 쓰고 있었고, 이 라이브러리 개발자가 Vue3용으로 따로 만들어 둔 게 있어서 (vue-datepicker-next) 처음엔 그걸로 갈아끼웠다.
• 근데 vue-datepicker-next v1.0.3 기준으로 의문의 버그가 발생했는데 ..; 재현 조건은 기록해두지 않아서 기억나지 않지만, 버그 발견 과정을 떠올려보면...
  • 문서에 안내된대로 바뀐 사용법 적용
  • vue2-datepicker에서 사용 가능하던 prop들이랑 vue-datepicker-next랑 아주 살짝 다른 부분이 있어서 표로 만들어서 비교하면서 해당하는 부분들 수정 (참고: vue2 버전, vue3 버전 prop 목록 비교 표)
  • 문서에 안 나와있는 내용은 다른 사람들이 issue 등록해서 해결법 올라온 거 참고해서 해결 (예: 'inline' prop 미지원 이슈 - https://github.com/mengxiong10/vue2-datepicker/issues/527#issuecomment-1002474643)
  • 잘 되는 듯 싶다가, 날짜 클릭할 때 다음과 같은 에러가 발생했음 ㅠ (뭔가 특정 prop 썼을 때 그랬던 것 같은데 정확히는 기억 안 남;)
    • TypeError: onSelect is not a function
  • 라이브러리 내부에서 일어난 에러라 디버깅이 까다로웠으나 어째저째 디버깅해나가다가 또 다른 난관에 봉착해버림..
    • TypeError: Cannot read properties of undefined (reading 'getFullYear') at TableDate ...
  • issue 검색해보니 다행히 누군가 같은 에러를 겪고 올린 글이 있음.
    • https://github.com/mengxiong10/vue-datepicker-next/issues/41 
  • 그러나 안 다행인 것은 몇 달 전에 열린 issue임에도 불구하고 아직도 해결 방법을 발견하지 못한 상태라는 것
  • 크래프톤 정글 정신으로 끝까지 디버깅해서 원인 및 해결 방법을 찾아냈더라면 참 좋았겠지만 마이그레이션을 이제 슬슬 마무리하고 싶은 마음이 커서 포기 ㅋ
    
    

• 대안은 최대한 비슷한 기능을 제공하면서 Vue3도 지원하는 다른 datepicker 라이브러리로 교체하는 것이었고, 그래서 선택한 게 @vuepic/vue-datepicker (v5.4.0)였다. 다행히 기존에 쓰던 라이브러리랑 사용 방법이 크게 다르지 않았다. prop의 경우 두 라이브러리에서 이름만 다르지 기능은 거의 동일한 것들이 많아서 prop 설명서 보면서 하나씩 바꿔나갔다.
  • 참고: 대응되는 prop들 몇 개 정리해 둔 표

migrate from vue2-datepicker to vue-datepicker

 

툴팁 라이브러리도 교체했다. :

• 이거 교체한 이유도 왜인지 따로 기록을 안 해둬서.. 과거의 내가 왜 그런 선택을 했는지 정확히는 모르겠지만 위의  datepicker 사례로 미루어 짐작컨대 아마,
  • 1. 기존 툴팁 라이브러리의 Vue3 지원 여부 확인 -> 2. 지원한다고 해서 버전 업그레이드 시도 -> 3. 했는데 뭔가 잘 안되고(기능이나 스타일 관련 문제) 디버깅 및 해결이 쉽사리 되지 않아서 포기 -> 4. 다른 라이브러리로 교체
  • 이런 흐름으로 진행된 게 아닌가 싶은..?
• 아무튼 기존에는 v-tooltip v2.1.3을 써왔고, 마이그레이션 과정에서 교체한 라이브러리는 vue3-popper v1.5.0 이다.
• 사용법 좀 다르긴 한데 바꿔줄 부분은 많지 않아서 교체하는 데 시간이 오래 걸리진 않았다.

 

그 외에 다음 라이브러리들은 버전만 업그레이드 해줬고, 업그레이드 과정에서 딱히 문제된 부분은 없었던 착한 친구들... :

• vue-multiselect v2.1.7 -> v3.0.0-beta.2
• vuex-persistedstate v3.1.0 -> v4.1.0

 

이렇게 6번 단계를 마무리하고 7번 단계로 넘어가기 전, 자체적으로 QA를 한번 진행했다.

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

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

3. 컴파일 에러 고치기

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

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

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

7. @vue/compat 제거하기

8. QA 진행

9. 배포하기

 

자체 QA는 페이지 단위로 진행했고, 각 페이지에서 발생하는 에러/버그를 [마이그레이션 이후 발생]하는 것과 [마이그레이션 이전부터 발생]하던 것으로 나누어 정리했다. 그리고나서 [마이그레이션 이후 발생]하는 것 위주로 고쳐나갔고 크리티컬한 게 아니라면 [마이그레이션 이전부터 발생]하던 것은 보류해뒀다. 작업하는 김에 같이 수정하는 게 나을까 싶었지만 마이그레이션 작업 중인 브랜치에선 마이그레이션 관련 작업만 하고, 기존에도 존재했던 에러/버그는 각각의 fix 브랜치를 따서 작업하는 게 깔끔할 것 같아서 그렇게 하기로 했다.

 

여기까지 한 뒤에 migration 문서 내용에 따라 @vue/compat을 제거하니 미처 발견하지 못했던 이슈 두세개 정도 더 드러났다. 그거까지 수정하고 마이그레이션 작업을 마무리했다. 굉장히 홀가분했다 ㅎㅎ 😸 (졸리니까 포스팅 급하게 끝내버리기)