#7. Vue 3 스타일 가이드

 

# 스타일 가이드란?

 

스타일 가이드는 코드를 작성하는 방법과 규칙을 정해놓은 문서입니다.

스타일 가이드를 사용하면 다음과 같은 장점을 얻을 수 있습니다.

1. 일관성 유지: 스타일 가이드는 모든 개발자가 동일한 코드 스타일을 따르도록 강제합니다. 이렇게 하면 코드가 일관성 있게 유지되므로 읽기 쉬워집니다.
2. 버그 감소: 일관성 있는 코드 스타일을 따르면 실수를 줄일 수 있습니다. 예를 들어, 잘못된 인덴트, 괄호 누락 등의 문제가 발생할 가능성이 줄어듭니다.
3. 코드 유지보수성 향상: 스타일 가이드는 코드를 더 읽기 쉽고 이해하기 쉽도록 만듭니다. 따라서 코드의 유지보수성이 향상되고 변경이 쉬워집니다.
4. 코드 리뷰 용이: 스타일 가이드는 코드 리뷰를 용이하게 만듭니다. 코드가 일관성 있게 작성되면 리뷰어가 코드를 더 쉽게 이해할 수 있으며, 코드 변경에 대한 의견을 쉽게 제시할 수 있습니다.
5. 개발 시간 절약: 스타일 가이드는 코드 작성에 대한 규칙을 제공하기 때문에 개발자는 이를 준수하기만 하면 됩니다. 이렇게 하면 코드 작성 시간을 줄일 수 있습니다.

따라서, 스타일 가이드를 사용하면 개발자들 간에 일관성 있게 코드를 작성할 수 있고, 코드 유지보수성을 높일 수 있으며, 개발 시간을 절약할 수 있습니다.

 

 

 

# Vue의 스타일 가이드

 

Vue.js 에서 코드 스타일 가이드는 공식적으로 제공되고 있습니다.

이 가이드는 개발자들이 일관된 스타일로 코드를 작성할 수 있도록 돕는 것이 목적입니다.

여기에는 주요한 스타일 가이드 규칙이 포함되어 있습니다.

 

1. 컴포넌트 이름은 항상 여러 단어인 kebab-case를 사용해야합니다.

// Bad
Vue.component('mycomponent', {
  // ...
})

// Good
Vue.component('my-component', {
  // ...
})

 

 

2. 컴포넌트 옵션은 가능한 한 알파벳 순서대로 정렬되어야 합니다.

// Bad
export default {
  name: 'HelloWorld',
  components: {
    ChildComponent,
    AnotherChildComponent,
  },
  data() {
    return {
      message: 'Hello, World!'
    }
  },
  methods: {
    handleClick() {
      console.log('Button clicked!')
    },
    handleInputChange() {
      console.log('Input changed!')
    },
  },
}

// Good
export default {
  name: 'HelloWorld',
  components: {
    AnotherChildComponent,
    ChildComponent,
  },
  data() {
    return {
      message: 'Hello, World!'
    }
  },
  methods: {
    handleClick() {
      console.log('Button clicked!')
    },
    handleInputChange() {
      console.log('Input changed!')
    },
  },
}

 

 

3. Prop 이름은 항상 camelCase로 작성되어야 합니다.

// Bad
props: {
  'first-name': String,
}

// Good
props: {
  firstName: String,
}

 

 

4. 컴포넌트의 인스턴스를 생성하기 위해 new 키워드를 사용하지 마세요.

// Bad
const vm = new Vue({
  el: '#app',
  // ...
})

// Good
const vm = Vue.createApp({
  // ...
}).mount('#app')

 

 

5. 데이터 속성은 가능한 한 초기값을 제공해야합니다.

// Bad
data() {
  return {
    message: undefined
  }
}

// Good
data() {
  return {
    message: '',
  }
}

 

이외에도 많은 규칙이 있지만, 이러한 규칙은 개발자들이 코드를 작성할 때 가독성과 일관성을 유지하는 데 도움을 줄 수 있습니다. 

 

자세한 내용은 아래 의 Vue.js 공식 홈페이지에서 참조할 수 있습니다.

공식 홈페이지 스타일 가이드: https://vuejs.org/style-guide/

 

※ 스타일 가이드는 어디까지나 권장일뿐, 반드시 따라야 할 필요는 없습니다.