error 기록하기는 개발을 하면서 마주한 error들에 대해 마구잡이로 써볼생각으로 만든 시리즈입니다.
배경
고객 웹앱과 운영 웹을 관리, 개발하는 있는 저는 Vue2의 class component 버전으로 만들고 있습니다. 하지만 어느날 갑자기 제목에 적힌 에러가 떴었습니다.
원인 파악
vsCode의 default formmatter의 setting이 잘못 되었나, 아님 tsconfig.json를 이용하여 error 표시를 막아줘야하는지에 대한 고민이 있었습니다.
goggling하던 도중 진호님의 블로그에서 Nuxt를 쓰던 도중 Vue2문법과 Vue3문법이 달라 지원하는 Extension도 다르게 만들어지는데 여기에서 생긴 문제라고 보게 되었습니다.
제 케이스에서는 Vue2를 쓰고있는데 Volar라는 Vue3 전용 Extension을 쓰고 있었기 때문에 ts의 버전문제가 아닌 지원이 안되는 Extension을 사용하고 있었기 때문입니다.
(그 전에는 왜 에러가 안났는지는 모르겠습니다😅)
해결
해결하는 것은 쉬웠습니다. 그냥 Extension에서 Volar를 uninstall을 해준뒤 다시 reload를 하면 되었습니다. 그리고 Volar대신 Vetur라는 Extension을 사용해줍니다. (물론 vue-tsc에서 생긴 문제에도 똑같은 error가 뜬다는데 이 gitHub을 참고 해주세요)
Volar와 Veture을 두개 같이 사용하고 있는데 Volar가 update하면서 오는 충돌이라고 짐작해봅니다🤣
반성
처음 직장에 출근하였을 때 다운로드해야할 Extension list를 잘 파악하지 않고 무작정 깔았던 주니어 개발자의 실수라고 생각합니다. 다음에 extension을 추천 또는 설치할 때는 지금 현 상황을 잘 파악한 뒤 제 입맛에 맞춰 install해야겠습니다.
