Vue 프로젝트를 처음 만들어 이것저것 실행을 시켜보니 정말 많은 에러를 만날 수 있었다. 처음에 리액트를 사용했을 때도 그랬던 것 같은데 Vue도 처음이니 이럴 수 밖에 없는 것 같다..? 처음에는 App.vue 파일에서 count 함수를 실행시키고 조건문과 반복문을 사용하는 정도로 실행을 시켜봤는데, 두번째 단계인 컴포넌트 생성에서 에러를 만났다.
컴포넌트 폴더 안에 Fruit.vue 라는 파일을 생성했는데... 화면이 안보인다... ESLint가 화면을 막아버렸다. 뭐가 문제인걸까
에러 로그를 쭉 읽어보니 error Component name "Fruit" should always be multi-word 라는 문구가 눈에 띄었다. 컴포넌트의 이름은 항상 multi-word여야한다? 뭔소리지?
Use multi-word component names
Vue 공식문서에서 검색을 해보니 답은 금방 찾을 수 있었다. App.vue를 제외한 컴포넌트 명을 지을 때는 Pascal Case를 사용하는 것에 더불어 여러 단어로 조합된 컴포넌트명을 사용해야하는 것이 좋다는 것이다. 이러한 규칙이 생성된 것에는 이유가 있었다. 평소 HTML의 표준에서 모든 태그, 엘리먼트 요소를 단일 단어로 정의하기 때문에 HTML에서 작성하는 엘리먼트와의 충돌을 방지하기 위해 이러한 규칙이 생겼다는 것.
<나쁜 예시>
<!-- in pre-compiled templates -->
<Item />
<!-- in in-DOM templates -->
<item></item>
<좋은 예시>
<!-- in pre-compiled templates -->
<TodoItem />
<!-- in in-DOM templates -->
<todo-item></todo-item>
그래서 컴포넌트의 이름을 FruitList로 변경해주었더니 에러는 바로 사라졌다. 공식문서에서 이렇게 사용하는 것이 좋다고 하니 이렇게 사용하는게 좋을 것 같지만 컴포넌트 이름에 이러한 규칙을 없애고 싶다면 vue.config.js 파일 안에서 해당 코드를 추가해주면 된다.
이렇게 되면 컴포넌트 이름을 한 단어로 사용해도 에러가 발생하지 않는다.
lintOnSave: false
에러가 발생하거나 했을 때 공식문서를 빠르게 찾아보면 그만큼 빠르게 문제를 해결할 수 있는 것 같다. 그래서 이번에 공식문서를 좀 더 꼼꼼하게 봐야겠다는 생각이 들었고, 앞으로 vue를 더 공부하면서 계속해서 찾아보게 될 것 같다.
