Vue가 Default 버전이 2022년 2월 7일자로 Vue3로 바뀌었다. 그래서 지금 공식문서 읽으러 들어가면 아래와 같이 주의 모달이 뜬다.
2020년 12월에 출시하고 어언 2년 만이다. 느린감이 없지 않아 있다.
마찬가지로 Vue devtool. v6버전도 beta Channel에 있었지만 지금은 Stable Channel에 옮겨졌다. 나처럼 갑자기 바뀐 Vuex툴에 당황한 사람들은 이 이유 때문이다.
물론 기존 devtool은 legacy channel에서 볼 수 있다.
New Vue
새로운 Vue에서는 달라지는 점들이 좀 있는데, 무시하고 그냥 넘어갈 수준은 아니다.
특히 VScode를 쓴다면 마켓플레이스에서 보조 확장 프로그램들을 변경해주는게 정신건강에 이롭다.
- Vue2에서는 기본 Vetur →
Volar - 공식 권장 State Management: Vuex →
Pinia - Command Line 타입체킹 툴 : vue-type-check →
vue-tsc(Volar)
Vetur를 대신할 Volar
개발 도구 툴이 Vetur에서 완전히 Volar로 바뀐 점이 눈에 띈다.
타입스크립트를 사용할 경우 Vetur의 경우는 역시 문제가 계속 있었다. 특히 interpolation 해석이 지금도 experimental 단계인데, 실험단계인만큼 성능 및 정확도도 굉장히 떨어졌다. (특히 성능이)
Volar는 Typescript를 잘 지원하고, 심지어 Monorepo를 사용할 경우에도 잘 동작한다고 한다.
https://github.com/johnsoncodehk/volar/issues/348
Github에서 위 이슈를 해결한 것을 참고하면 Volar로 tsconfig 세팅을 할때, 지옥같은 Vetur 모노레포 세팅을 벗어날 수 있을 것으로 기대한다.
하지만 Vue2로 만들어진 기존 프로젝트들은 여전히 Vetur를 쓰는게 좋기 때문에 유지보수할때 .vscode/settings.json이라는 파일을 따로 만들어서 관리하거나 해야 할듯 하다.
상태관리 툴이 Pinia로
전통의 Vuex에서 요 귀여운 파인애플 Pinia로 공식 권장 상태관리 라이브러리가 바뀌었다.
- Typescript를 정확하게 지원
- mutations가 사라짐
- Devtools에서도 지원
여기에 대해서도 단독으로 포스팅을 하면 좋을 것 같다. 이전 포스팅에서도 다룬적이 있지만, Vuex에서 Typescript를 지원하기 위해 actions를 세팅하느라 어마어마한 인고의 시간을 들였던 것을 Pinia를 사용하면 간단히 해결할 수 있다.
주의해야 할 점
CDN을 사용할 경우 버전을 명시해주자.
당연히 지금 이미 배포된 것을 고칠 필요는 없다. 하지만 앞으로 CDN으로 Vue를 사용한다면 버전을 정확하게 명시해주는게 좋다.
- <script src="https://unpkg.com/vue"></script>
+ <script src="https://unpkg.com/vue@2"></script>
- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>Vue3를 사용한다고 하더라도 혹시 모를 위험을 대비해서 vue3를 명시해주자.
NPM latest tag
npm으로 package.json을 관리할때 버저닝 역시도 명확하게 해주는게 좋다. Vue, vue-router, vuex가 호환되는 버전이 다르기 때문이다.
{
"dependencies": {
- "vue": "latest",
+ "vue": "^2.6.14",
- "vue-router": "latest",
+ "vue-router": "^3.5.3",
- "vuex": "latest"
+ "vuex": "^3.6.2"
},
"devDependencies": {
- "vue-loader": "latest",
+ "vue-loader": "^15.9.8",
- "@vue/test-utils": "latest"
+ "@vue/test-utils": "^1.3.0"
}
}마무리
Vue3가 안정화되었다는 공식 선언을 한 셈이다. 그리고 그동안 2년이라는 시간동안 Reference들도 생기게 되면서 점차 Vue3를 사용하는 기업들이 이미 많이 있다. 그리고 Typescript를 꼭 써야하는 프로젝트라면 더 이상 Vue2는 고려하지 않는 것이 좋다.
프론트엔드 생태계 양강 구도를 구축하고 있는 React, Vue는 서로의 장점들을 하나씩 흡수해가면서 발전해나가고 있는 것 같은 느낌이 든다. 다음 포스팅으로는 Vue3 주요 변경점에 대해 알아보려고 한다.