오늘의 오류

오랜만에 vue 프로젝트에서 겪은 트러블 슈팅 기록..
너무 간단하면서도 이런곳에서 오류가 발생할지 몰랐던
나를 위해 기록한다..

상황

웹 컴포넌트를 만들었고, 이 컴포넌트를 vue에서 사용하기 위한 시도를 했다.
<SuitabilityModule> 태그로 작성한 부분이 로컬에서는 정상 작동 했으나,
amplify로 배포 후 화면이 아예 안 뜨는 오류가 발생했다.

그러나 콘솔에 에러는 뜨지 않았고,
해당 부분뿐만이 아닌 페이지 전체가 화면에 나타나지 않았다.

로컬에서는 잘 되면서 배포하고 안 될때가
참..^^ 가장 어이없어지는 것 같다.

약간 내 프로젝트가 문제 없었던 척 내숭떨었던 고런 느낌.. ㅋㅋㅋㅋ ㅠㅠ

원인

🚨 PascalCase가 아닌 kebab-case로 작성해야한다!
💡 배포 시에는 브라우저가 직접 HTML을 파싱하는데,
이때는 <suitabilitymodule>로 인식되고,
vue가 이를 컴포넌트로 매핑하지 못하면 작동하지 않는다.

명명규칙 케이스

• camelCase: 첫 문자는 소문자로 표기하고, 띄어쓰기 대신 대문자로 구분한다.
• PascalCase: 첫 문자는 대문자로 표기하고, 띄어쓰기 대신 대문자로 구분한다.
• kebab-case: 모든 단어는 소문자로 표기하고, 단어 사이에는 - 로 표기한다.
• snakecase: 모든 단어는 소문자로 표기하고, 단어 사이에는 로 표기한다.

왜 그럼 로컬에서는 되고 배포에서는 안 될까?

💡 HTML 파서는 태그명을 소문자로 인식함

<MyComponent> → <mycomponent>
결국은 my-component를 못찾는것!

💡 웹 컴포넌트는 자동 매핑이 없다.

웹 컴포넌트는 customElements.define(tagName, class) 로 DOM 에 직접 등록되므로,
정확히 그 태그명과 일치해야 한다.

💡 로컬 개발 환경에서는 dev-only 버전이어서 vue 컴포넌트를 자동 매핑하거나 경고를 출력하며 최대한 호환시켜준다.

💡 일부 브라우저 extension이나 vue devtools도 자동 인식해서 매핑해준다.

마치며

사실 웹 컴포넌트를 만들 때 suitability-module로 만들었기 때문에 당연한거였지만,
습관으로 나도 모르게 PascalCase로 작성했던 것 같다..

근데 로컬에서 문제가 없었기에 또 알아차리지 못했던..

그런데 로컬환경에서와 배포했을 때 명명규칙 차이로 큰 오류가 발생할 줄 몰랐고
실수로 인해 해당부분에 대해 알게되어 오히려 좋았다..!