Vue 스타일 가이드 배워보기

개요 

 

현재 프로젝트에서는 팀원 3명 모두 새롭게 Vue를 사용해서 개발하고있다.

 

프로젝트 코드가 일관되게 유지하고자 여러 컨벤션들이랑 룰들을 미리 정했다.

 

1. 상세한 코드리뷰

2. 변수, 함수, 파일, 폴더 명명 규칙 수립

3. prettier, esLint와 같은 코드 포매팅 tool을 통한 코드 구조 통일화

 

 

하지만 우리끼리 규칙을 정하고, 좋은 코드를 찾고 하는건 귀찮고 더군다나 새로운 언어를 접한 우리 팀의 입장으로서는 반갑지 못한 일이었다.

 

위에서 언급한 방법들을 지키며, Vue에서 권장하는 방식으로 개발을 할 수 있는 방식이 있으니 그건 바로 Vue 스타일 가이드이다.

 

https://ko.vuejs.org/style-guide/

Vue.js

 

 

 

Vue 스타일 가이드

프로젝트에서 Vue를 사용한다면, 오류, 불필요한 논쟁, 안티패턴을 피하기 위한 훌륭한 참조 자료입니다

 

하지만 추가로 설명하길 모든 팀, 프로젝트에 이상적인 스타일 가이드는 없으므로 과거 경험, 다른 기술 스택, 팀, 개인 가치에 따라 의식적인 변형을 권장한다고 한다.

 

 

그렇다면 어디까지 필수로 따라야하고, 어디부턴 선택지인지 본인같은 Vue 초보자에겐 기준이 모호할텐데 Vue에선 규칙을 4가지 범주로 쪼개서 보여준다.

 

 

우선순위 A : 필수 (오류 방지)

이 규칙들은 오류를 방지하는 데 도움이 되므로, 반드시 숙지하고 따라야 합니다. 예외는 있을 수 있지만, 매우 드물어야 함

 

 

우선순위 B : 강력히 권장

가독성, 개발자 경험을 향상시키는 규칙들, 코드 실행과는 무관하나 지키는 것을 권장

 

 

우선순위 C : 권장

동등하게 좋은 옵션 중 일관성 유지를 위해 기본적인 선택을 제안(Vue에서 선호하는 코드방식을 제안)

 

 

우선순위 D : 주의해서 사용하기

Vue의 기능 중 일부 잠재적으로 위험한 기능들을 알려주고 왜 피해야하는지 알려줌

 

 

해당 글에선 본인이 프로젝트에 도입한 일부 규칙들만을 설명하니 전체 규칙과 Vue에서 권장하고, 경고하는 코드 스타일, 규칙엔 어떤 것이 있는지 직접 방문해서 보면 좋을 것 같다.

우선순위 A : 필수(오류를 방지하는데 도움 반드시 숙지 및 따라하기)

 

1. 멀티워드 컴포넌트 이름 사용

모든 HTML요소가 단어 하나로 되어있기에 미래의 발생할 수 있는 충돌을 방지

 <Item />

 // 다음과 같이 사용
 <TodoItem />

 

 

2. 상세한 prop 정의 사용

가능한 상세하게 정의하며, 최소 타입을 명시해야함

const props = defineProps(['status'])

// 다음과 같이 사용
const props = defineProps({
	status: String
})

 

 

3. v-for에 key 사용하기

고유한 키(not Index)를 지정해 객체의 일관성과 같은 예측가능한 동작을 유지하도록 함

<ul>
  <li
    v-for="todo in todos"
		 // 고유한 키 값 사용
    :key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>

 

 

4. 컴포넌트 범위 스타일 사용하기

• App컴포넌트와 레이아웃 컴포넌트 스타일을 제외한 경우 범위가 지정되어야 함
• scoped, css모듈, BEM 또는 다른 라이브러리를 통해 이루어짐

<template>
  <button class="btn btn-close">×</button>
</template>

<style> -> <style scoped> //scoped 속성 사용
.btn-close {
  background-color: red;
}
</style>

 

---

 

우선순위 B : 강력히 권장 (가독성, 개발자 경험의 개선)

 

1. 싱글 파일 컴포넌트 파일명 대/소문자

• 싱글 파일 컴포넌트의 파일명은 항상 파스칼 케이스이거나 항상 케밥 케이스여야 함.
• Ex) MyComponent.vue

 

 

2. 기본 컴포넌트 이름

• 앱별 스타일, 규칙을 적용하는 기본(순수) 컴포넌트의 경우 Base, App, V같은 특정 접두사로 시작해야함.
• Ex) BaseButton.vue, BaseIcon, VTable …

 

 

2. 기본 컴포넌트 이름

• 앱별 스타일, 규칙을 적용하는 기본(순수) 컴포넌트의 경우 Base, App, V같은 특정 접두사로 시작해야함.
• Ex) BaseButton.vue, BaseIcon, VTable …

 

 

3. 긴밀하게 결합된 컴포넌트 이름

부모 컴포넌트와 긴밀하게 결합된 자식 컴포넌트는 부모 컴포넌트 이름을 접두사로 함

components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue

 

 

4. 컴포넌트 이름 내 단어 순서

컴포넌트 이름은 가장 높은 수준의 단어(일반적)로 시작하고 설명적인 수정단어로 끝나야 함

ClearSearchButton.vue -> SearchButtonClear.vue
RunSearchButton.vue ->  SearchButtonRun.vue

 

 

5. 셀프 클로징 컴포넌트

• 콘텐츠가 없는 싱글 파일 컴포넌트, 문자열 템플릿, JSX를 제외한 in-DOM 템플릿에서는 금지
• 자체 닫히는 컴포넌트는 콘텐츠가 없는 것으로 의미됨
• HTML사용자 정의 엘리먼트가 자체적으로 닫히는 것을 허용안함

// 싱글 컴포넌트
<MyComponent></MyComponent> -> <MyComponent/>

// in-DOM templeate
<my-component/> -> <my-component></my-component>

 

 

6. 템플릿 내 컴포넌트 이름 대/소문자 구분

• 싱글 파일 컴포넌트, 문자열 템플릿 : 파스칼 케이스
• in-DOM 템플릿 : 케밥 케이스
  • HTML의 대소문자를 구분하지 않아 in-DOM의 경우 케밥케이스를 사용

 

 

7. 전체 단어 컴포넌트 이름

• 컴포넌트 이름은 약어보다 완전한 단어를 사용하는 것이 좋음
  • 흔하지 않은 약어는 더더욱 피하기
• SdSettings.vue
• StudentDashboardSettings.vue

 

 

8. 다중 속성 앨리먼트

여러 속성을 가진 앨리먼트의 경우 여러 줄에 걸쳐있으며 한 줄당 하나의 속성을 사용해야함

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

//속성 별로 줄을 구분
<MyComponent
  foo="a"
  bar="b"
  baz="c"
/>

 

 

9. 지시어 단축

지시어 단축( :, @, # )의 경우 항상 사용하거나 절대 사용하지 않아야 함.