vue 2.3->2.6 업그레이드 후기

vue 로 만든 토이프로젝트를 업데이트할 일이 있어서 npm run serve를 했으나,

vue 업데이트 이후 아래 에러메시지가 발생했다..

 

Syntax Error: TypeError: Cannot read property 'vue' of undefined

 

아래글 보고 vue3로 업데이트 하려고 시도하였으나,

너무나도 수정이 많이 필요해서 포기하고 원인을 찾아보려 햇다.

https://www.freecodecamp.org/news/migrate-from-vue2-to-vue3-with-example-project/

 

uninstall vue 했다가 install vue 하고

vue-loader를 다시 설치하라고 해서 이것도 해봤는데 안되고

node_modules 지웠다가 다시 설치도 하고

 

Node Sass version 6.0.1 is incompatible with ^4.0.0

에러발생해서 node-sass@6.0.1로 설치해보라고 해서 이걸로도 설치해봤는데도 여전히 문제있었다.

 

또 아래 에러가 발생해서 webpack도 다시 설치했는데 여전히 에러 발생하고

[webpack-cli] Error: Unknown option '--inline'

 

npm install 할때마다 npm audit fix하라는 문구는 계속 뜨고 참 너무 migration 하기 힘들다.

 

Conflicting 0peer dependency: webpack@5.51.0.1 sass-loader

--> npm install sass-loader하여도 안풀림.

 

완전 총체적 난국이였다.

같은 2.x 버전인데 머이리 달라진게 많은지 너무 화가난다.

 

결국 선택한 방법은 vue create로 새 프로젝트 만들어서 src의 .vue 파일들을 복사하였는데,

이게 훨씬 빠른 방법이더라.

앞에 노력하고 찾아봤던거는 다 통하지도 않고 ..

 

.vue 파일 복사하여도 여전히 문제가 있었는데

lint 검사를 너무 빡빡하게 하더라

탭과 스페이스를 같이 indent 한거 고치라고하고,

전역변수 안먹혀서 전역변수 사용하는 부분은 module화 해서 각 vue파일에 import 하도록 했다.

 

그러고 끝인줄알았으나.. vue-router가 안먹히는겨..

또 버전이 안맞는가 싶어 요리조리 찾아봤는데 root/public/index.html파일에 <router-view></router-view> 를 추가안해서 rendering이 안되었던 것이였다.

 

참 여러가지로 힘들었다.

앞서 ionic 에서도 겪었던 느낌인데 front end 쪽은 발전이 빠른데 반해 migration은 너무 부실한거 같다.

특히, vue는 개인적으로 매우매우 혁신적인 프레임워크이고, 개발하기도 정말 좋아진 프레임워크라고 생각했는데

이번기회에 너무 인식이 안좋아 졌다.

다음에 3.x 로 넘어갈땐 또 어떡할려나..

 

https://devscb.com/post/34

vue 2.3->2.6 upgrade review