[ Vue ] 버전 업그레이드 (3.0 → 3.3)

 

업그레이드 이유

현재 개발 환경은 Vue 프레임워크와 TypeScript 언어를 사용하고 있다.

개발을 하던 중 defineProps의 인터페이스를 지정해줄 때, 3.0.0 버전의 경우 동일한 SFC 파일 내부에 정의된 인터페이스만 읽을 수 있었다.

즉, 외부 파일에 선언된 인터페이스를 Import 해오는 것이 불가능했다. (이는 declare로 선언된 인터페이스도 동일)

 

3.3 버전 이전의 Vue는 해당 props 인터페이스의 속성을 분석하여 해당하는 런타임 옵션을 생성할 수 있어야 하기 때문에 타입 정의를 로컬 환경으로 제한하고, 리터럴과 인터페이스만을 지원했었다.

 

https://blog.vuejs.org/posts/vue-3-3#imported-and-complex-types-support-in-macros

Announcing Vue 3.3 | The Vue Point

 

Vue 버전 릴리즈 문서를 찾아보니 이러한 문제는 3.3 버전부터 개선이 되었다고 한다.

그렇기 때문에 버전 업그레이드를 통해 Type과 로직 코드를 분리하고 코드 가독성과 통일성을 높이고자 했다.

 

현재 가장 최신 버전은 3.4이지만 3.3 버전으로도 충분히 우리가 필요한 기능을 개발할 수 있을 것 같아 업그레이드 버전을 3.3.0으로 결정했다.

 

 

---

 

방법

1. 새로운 버전 설치

npm install -g @vue/cli@3.3.0

근데 난 이렇게 했을 때, vue --version을 통해 확인한 버전은 3.3.0 이었지만, package.json 파일은 변경되지 않았다.

 

 

 

2. package.json 파일 수정

 

위 방법이 제대로 먹힌 건지 알 수가 없었기 때문에 package.json 파일의 vue 버전을 수동으로 변경한 후 새롭게 npm install을 했다.

그 결과 package-lock.json 파일이 변경됨을 확인할 수 있었다.

 

 

그러나 이때 vue 버전이 올바르게 변경이 되었다면 defineProps의 인터페이스와 관련된 에러가 사라져야 하는데 그대로 있었기 때문에 기존의 3.0.0 버전을 확실하게 지워주기 위해 node-modules 폴더를 삭제한 후 npm install을 실행해 바뀐 package.json 내용을 설치할 수 있도록 했다. 

 

 

그 결과 무사히 버전 업데이트를 완료했다.

 

<script setup lang="ts">
import type { ExpansionProps } from "@/types/Expansion";

defineProps<ExpansionProps>();
</script>

이제 이런 식으로 외부의 인터페이스를 import해서 defineProps의 타입으로 지정해줄 수 있다~!!

 

 

---

한 가지 문제...?

기존 프로젝트에서는 일부 컴포넌트에 Ant-design 라이브러리를 사용하고 있었는데, vue 3.3 버전과 호환이 되지 않는다는 문제가 있었다.

최대한 맞는 버전을 찾아 호환해보려 했지만 잘 되지 않았고 Ant-design이 쓰인 곳이 많지 않았기 때문에 Quasar로 전부 변경하고 Ant-design 라이브러리를 삭제하는 것으로 결론지었다.