Vue 스타일 가이드 2

#vue

Vue 스타일 가이드 2편입니다.

1편 : http://gameb.co.kr/vue-스타일-가이드-1/

★ : 필수
☆ : 매우 추천
○ : 추천
X : 주의 요함

11.강한 연관성을 가진 컴포넌트 이름 ☆

부모와 밀접하게 연결된 자식 구성 요소는 부모 구성 요소 이름을 접두사로 포함해야 합니다.

나쁨
components/
    TodoList.vue
    TodoItem.vue
    TodoButton.vue

components/
    SearchSidebar.vue
    NavigationForSearchSidebar.vue
좋음
components/
    TodoList.vue
    TodoListItem.vue
    TodoListItemButton.vue

components/
    SearchSidebar.vue
    SearchSidebarNavigation.vue

12.컴포넌트 이름의 단어 순서 정렬 ☆

나쁨
components/
    ClearSearchButton.vue
    LaunchOnStartupCheckbox.vue
    RunSearchButton.vue
    SearchInput.vue
좋음
components/
    SearchButtonClear.vue
    SearchButtonRun.vue
    SearchInputQuery.vue
    SearchInputExcludeGlob.vue

13.셀프 클로징 컴포넌트 ☆

HTML은 사용자 정의 태그에 셀프 클로징을 제공하지 않습니다.
그러므로 Vue의 컴파일러가 DOM 보다 먼저 템플릿에 접근해야 사용가능합니다.
불필요한 닫기 태그를 생략함으로 코드가 더 깨끗합니다.

나쁨
<!-- In single-filecomponents, string templates, and JSX -->
<MyComponent></MyComponent>

<!-- In DOM templates -->
<my-component/>
좋음
<!-- In single-filecomponents, string templates, and JSX -->
<MyComponent/>

<!-- In DOM templates -->
<my-component></my-component>

14.템플릿에서의 컴포넌트 이름 규칙 ☆

싱글 파일 구성요소와 문자열 템플릿에서는 항상 파스칼 케이스(PascalCase)를 사용하고
DOM 템플릿에서는 케밥 케이스(kebab-case)를 사용합니다.
파스칼 케이스는 JS도 사용하며 구성 요소 이름을 자동 완성이 가능합니다.
또한 싱글 파일 구성요소와 시각적으로 구분이 쉬워집니다.

나쁨
<!-- In single-file components and string templates -->
<mycomponent/>

<!-- In single-file components and string templates -->
<myComponent/>

<!-- In DOM templates -->
<MyComponent></MyComponent>
좋음
<!-- In single-file components and string templates -->
<MyComponent/>

<!-- In DOM templates -->
<my-component></my-component>

<!-- Everywhere -->
<my-component></my-component>

15.JS/JSX에서 컴포넌트 이름 규칙 ☆

JS/JSX의 컴포넌트 이름은 항상 파스칼 케이스(PascalCase) 여야하지만 전역 컴포넌트 등록만 사용하는 간단한 애플리케이션의 경우 케밥 케이스를 사용해도 됩니다.

나쁨
Vue.component('myComponent', {
    //...
})

import myComponent from './MyComponent.vue'

export default {
    name : 'myComponent',
    //...
}

export default {
    name : 'my-component',
    //...
}
좋음
Vue.component('MyComponent', {
    //...
})
Vue.Component('my-component', {
    //...
})

import MyComponent from './MyComponent.vue'

export default {
    name : 'MyComponent',
    //...
}

16.전체 이름 컴포넌트 이름 ☆

구성 요소 이름은 약어보다 완전한 단어를 사용합니다.

나쁨
components/
    SdSettings.vue
    UProfOpts.vue
좋음
    StudentDashboardSettings.vue
    UserProfileOptions.vue

17.Prop 이름 규칙 ☆

Prop 이름은 카멜 케이스를 사용해야 하지만 템플릿과 JSX에서는 케밥 케이스를 사용합니다.

나쁨
props : {
    'greeting-text' : String
}

<WelcomeMessage greetingText="Hi"/>
좋음
props : {
    greetingText : String
}

<WelcomeMessage greeting-text="Hi"/>

18.다중 속성 엘리먼트 ☆

속성이 여러 개인 요소는 한 줄에 하나씩 선언합니다.

나쁨
<img src="https://vuejs.org/images/logo.png" alt="Vue Logo">

<MyComponent foo="a" bar="b" baz="c" />
좋음
<img
    src="https://vuejs.org/images/logo.png"
    alt="Vue Logo"
>

<MyComponent
    foo="a"
    bar="b"
    baz="c"
/>

19.템플릿에서 단순한 표현식 ☆

복한 자바스크립트 구문은 덜 선언적이고 설명이 필요할 수 있으므로,
템플릿에는 간단한 식만을 사용합니다.

나쁨
{{
    fullName.split(' ').map(function (word) {
        return work[0].toUpperCase() + word.slice(1)
    })
}}
좋음
{{ normalizedFullName }}

computed : {
    normalizedFullName : function () {
        return this.fullName.split(' ').map(function (word) {
            return word[0].toUpperCase() + word.slice(1)
        }).join(' ')
    }
}

20.단순한 계산된 속성 ☆

computed 속성도 단순하게 표현하면 좋습니다.
테스트하기 쉽고, 읽기 쉽고, 유지보수에 쉽습니다.

나쁨
computed : {
    price : function () {
        var basePrice = this.manufactureCost / (1 - this.profitMargin)
        return (
            basePrice - 
            basePrice * (this.discountPercent || 0)
        )
    }
}
좋음
computed : {
    besePrice : function () {
        return this.manufactureCost / (1 - this.profitMargin);
    },
    discount : function () {
        return this.basePrice * (this.discountPercent || 0)
    },
    finalPrice : function () {
        return this.basePrice - this.discount
    }
}