1. Props 명명 규칙

Props를 정의할 때는 JavaScript의 표준 관례에 맞춰 camelCase를 사용해야 합니다. 반면, HTML 템플릿이나 JSX에서는 kebab-case를 사용하는 것이 권장됩니다. 이는 각 언어의 고유한 특성과 관례를 따르기 위함입니다.

// JavaScript (camelCase)
props: {
  userData: Object,
  isActive: Boolean
}

<!-- HTML Template (kebab-case) -->
<UserCard user-data="profile" is-active="true" />

2. 다중 속성을 가진 요소의 포맷팅

속성(Attribute)이 여러 개 있는 요소는 가독성을 위해 각 속성을 새로운 줄에 배치하여 작성하는 것이 좋습니다. 이는 JavaScript에서 객체의 프로퍼티를 줄바꿈하여 작성하는 일반적인 모범 사례와 맥락을 같이 합니다.

권장하지 않는 방식:

<video src="media/intro.mp4" autoplay muted loop></video>

<DataGrid :columns="cols" :rows="data" @row-click="handleClick" />

권장하는 방식:

<video
  src="media/intro.mp4"
  autoplay
  muted
  loop
></video>

<DataGrid
  :columns="cols"
  :rows="data"
  @row-click="handleClick"
/>

3. 디렉티브 약어의 일관된 사용

v-bind는 :로, v-on은 @로, v-slot은 #로 축약하여 사용할 수 있습니다. 프로젝트 내에서는 이러한 약어를 모두 사용하거나, 모두 사용하지 않는 식으로 일관성을 유지해야 합니다.

<!-- 약어 사용 -->
<select
  :value="selectedOption"
  :disabled="isProcessing"
  @change="updateSelection"
>
  <option v-for="opt in options" :key="opt.id">{{ opt.label }}</option>
</select>

<!-- 약어 미사용 -->
<select
  v-bind:value="selectedOption"
  v-bind:disabled="isProcessing"
  v-on:change="updateSelection"
>
  <option v-for="opt in options" v-bind:key="opt.id">{{ opt.label }}</option>
</select>

<!-- 슬롯 약어 사용 -->
<template #navigation>
  <nav>Menu</nav>
</template>

<template #content>
  <main>Body</main>
</template>

4. 요소 속성(Attribute)의 정렬 순서

컴포넌트를 포함한 모든 HTML 요소의 속성은 가독성과 유지보수성을 위해 통일된 순서로 작성해야 합니다. 아래는 권장되는 기본 정렬 순서입니다.

1. 정의: is (컴포넌트 옵션 제공)
2. 리스트 렌더링: v-for (반복 요소 생성)
3. 조건부 렌더링: v-if, v-else-if, v-else, v-show, v-cloak
4. 렌더링 제어: v-pre, v-once
5. 전역 식별자: id
6. 고유 식별자: ref, key
7. 양방향 바인딩: v-model
8. 기타 속성: 일반 바인딩 및 정적 속성
9. 이벤트: v-on (또는 @)
10. 내용 조작: v-html, v-text

5. 템플릿 내 컴포넌트 이름의 대소문자

단일 파일 컴포넌트(SFC)와 문자열 템플릿에서는 컴포넌트 이름을 PascalCase로 작성하는 것이 표준입니다. 단, DOM을 직접 템플릿으로 사용하는 경우에는 HTML의 대소문자 구분 제한으로 인해 kebab-case를 사용해야 합니다.

PascalCase를 권장하는 이유는 다음과 같습니다:

• IDE 및 코드 에디터에서 JavaScript 객체와 동일한 방식으로 자동 완성 기능을 지원합니다.
• <MyWidget>는 <my-widget>보다 내장 HTML 태그와 시각적으로 더 명확하게 구분됩니다.
• Web Components 등 외부 커스텀 요소를 혼용할 때 Vue 컴포넌트를 쉽게 식별할 수 있습니다.

6. 단일 파일 컴포넌트(SFC) 파일명 규칙

.vue 파일의 이름은 PascalCase 또는 kebab-case 중 하나로 프로젝트 전체에 걸쳐 일관되게 유지되어야 합니다.

PascalCase는 JS 및 템플릿에서의 컴포넌트 참조 방식과 일치하여 자동 완성 친화적입니다. 반면, 대소문자를 구분하지 않는 파일 시스템(OS)에서의 충돌을 방지하기 위해 kebab-case를 선택하는 것도 훌륭한 대안입니다. 단, 두 가지 방식을 혼용해서는 안 됩니다.

권장하지 않는 방식:

components/
├── userprofile.vue
└── UserSettings.vue

권장하는 방식:

components/
├── UserProfile.vue
└── UserSettings.vue

또는

components/
├── user-profile.vue
└── user-settings.vue