[에러 일지] Component name should always be multi-word.

uxolrv·2023년 4월 14일
0
post-thumbnail

❗️ 문제 : Component name should always be multi-word.

컴포넌트의 이름이 항상 여러 단어로 구성되어 있어야 한다고 한다...
왤까.....? 😦








💡 원인

eslint-plugin-vue 공식문서에서 에러를 발생시킨 vue/multi-word-component-names 룰을 찾아보았다.

단일 단어로 구성된 HTML 엘리먼트와의 충돌을 방지하기 위해 vue에서 제공하는 빌트인 컴포넌트를 제외한 컴포넌트의 이름은 항상 여러 단어로 구성되어야 한다고 한다.








✨ 해결

export default {
  name: 'VueHeader',
  // `vue-header`, 'vue_header', 'vueHeader' 전부 다 가능!
};

단일 단어가 아닌 다중 단어로 이루어진 이름을 사용하면 깔끔하게 해결된다!


해결하는 과정에서 알아낸 너무너무 신기한 점!!

vueheader라고 작성하면 여전히 단일 단어로 인식하고 카멜 케이스든, 파스칼 케이스든, 케밥 케이스든 네이밍 컨벤션에 따라 단어를 구분해줘야만 여러 단어로 인식한다!


React를 사용할 당시에는 HTML 태그는 전부 소문자로만 이루어져 있고, React에서는 컴포넌트 이름의 첫번째 문자를 언제나 대문자로 표기하기 때문에
컴포넌트와 HTML 태그가 충돌할 거라고는 생각도 못해봤는데 Vue에서는 충돌할 수도 있다는 게 넘 신기했다...

Vue 공식 문서나, 다른 여러 예제들을 확인해봤을 때 Vue에서도 보편적으로 사용되는 네이밍 컨벤션은 단어의 첫 글자를 대문자로 표기하는 파스칼 케이스인 것 같다.

그러나 위에서 실험해본 것과 같이 원칙적으로는 모든 네이밍 컨벤션을 허용하기 때문에, HTML 엘리먼트와 충돌 가능성이 있다고 판단하여 여러 단어로 이루어진 이름을 사용하기를 권장하는 것 같다!

이번에는 공부하는 겸 강의를 보고 따라 만드는 거라 eslint 룰을 그대로 따를 예정이지만, 파스칼 케이스에 따라 작명하면 HTML 태그와 충돌할 일이 없을 것 같아 다음 프로젝트부터는 vue/multi-word-component-names 룰을 꺼두어도 괜찮지 않을까? 싶당








참고
eslint-plugin-vue 공식문서 (vue/multi-word-component-names)

profile
안녕하세연🙋 프론트엔드 개발자입니다

0개의 댓글