vue style guide

참고: https://v2.vuejs.org/v2/style-guide/?redirect=true#Rule-Categories 

1. 우선순위 높음(에러 예방)
   1. 컴포넌트 이름은 두단어 이상으로 정의한다.
      예시: todo → todo-item, Todo → TodoItem
   2. props를 정의할 때는 최대한 디테일하게 적어준다.
   3. v-for과 key는 세트로 써주어야한다.
   4. v-if와 v-for을 같이 사용할 수는 없다.
   5. 컴포넌트의 style태그에 scoped를 넣어주어야 한다.
   6. 외부에서 접근하지 않는 내장 함수일 경우 $를 접두사로 붙여야한다.
2. 우선순위 중간(개선된 코드)
   1. 컴포넌트의 파일이름은 ParscalCase를 가장 잘 사용하기는 하지만 대소문자를 구분하지 않는 파일 시스템에서 문제를 일이킬 수 있어 kebab-case를 사용하기도 합니다.
      예시: mycomponent.vue(X) →  MyComponent.vue, my-component.vue(O)
   2. 기본 컴포넌트(자주 사용되는)는 파일명에 접두사로 Base, App 또는 V를 붙이도록 합니다.
      예시: MyButton.vue(X) → BaseButton.vue, AppButton.vue, VButton(O)
   3. 한 페이지당 한 번만 사용해야하는 컴포넌트일 경우는 The와 같은 접두사를 붙이도록 한다.
      예시: MyFooter.vue(X) → TheFooter.vue(O), MyHeader.vue(X) → TheHeader(O)
   4. 밀접하게 결합된 구성요소의 경우 상위 구성 요소 이름을 접두사로 포함해야한다.
      예시: (상위 컴포넌트) SearchSidebar.vue →  (하위 컴포넌트) SearchSidebarNavigation.vue
   5. 컴포넌트의 이름 순서는 가장 일반적인 단어로 시작해 설명관련 단어가 뒤로 가야합니다.
      예시: ClearSearchButton.vue(X) →  SearchButtonClear(O), LaunchOnStartupCheckbox.vue(X) → SettingsCheckboxLaunchOnStartup.vue(O)
   6. 컨텐츠가 없는 컴포넌트의 경우 싱글파일 컴포넌트(확장자가 .vue로 끝나는 파일)에서는 닫아주어야하지만 DOM 템플릿(확장자가 .html으로 끝나는 파일)에서는 닫아주어서는 안된다.
      예시: (SFC)<MyComponent></MyComponent>(O) → <MyComponent />
                (dom template)<my-component />(X) → <my-component></my-component>(O)
   7. SFC에서는 PascalCase를 사용하고 DOM 템플릿에서는 kebab-case를 사용해야 한다.
   8. 컴포넌트의 이름은 약어보다는 전체 단어를 선호한다.
      예시: sdSettings.vue(O) → StudentDashboardSettings.vue(O)
   9. prop을 보낼 때는 kebab-case를 사용하고 받을 때는 camelCase를 사용해야한다.
      예시: (보낼때) <WelcomMessage greeting-text="hi" />
               (받을때) pros: { greetingText: String }