계발하는 개발자

참고 https://github.com/babel/babel/issues/11975 에러 Vue2 -> Vue3로 마이그레이션을 진행하는 도중에 아래같은 에러가 발생했다. 원인 프로젝트의 ESLint 설정 파일을 인식 못해서 발생한 에러였다. 찾다보니 공통적으로 Vue3 버전 환경에서 이런 오류가 많이들 발생하는 걸로 보였다. Vue CLI 버전에 따라 Babel 설정이 다르게 적용될 수 있는데, Vue 3부터는 이전 Vue 2와는 다른 Babel 구성을 갖기 때문에 이에 따른 설정을 추가로 해주지 않아 그런듯했다. 해결 프로젝트 root에 eslintrc.js 파일을 아래와 같이 설정했다. babel.config.js 에서 발생했던 오류가 사라졌다.

참고 https://eslint.vuejs.org/rules/no-use-v-if-with-v-for.html 에러 원인 한 엘리먼트에 v-if와 v-for를 함께 사용해서 발생한 에러다. This 'v-if' should be moved to the wrapper element v-if를 해당 요소를 감싸는 상위 요소로 이동시켜 적용하라는 메시지가 함께 표시되고 있다. 결과 ☝방법1 ) v-if와 v-for 부분을 분리 v-if와 v-for 부분을 분리하니까 에러가 깨끗하게 해결됐다. 어찌보면 가장 간단하고 근본적인 해결책같지만, 계획에 없던 불필요한 코드가 추가된다는 단점이 있다.😇 ✌️방법2 ) eslintrc.js에 vue/no-use-v-if-with-v-for 추가 나처럼 eslintrc.js..