Vue 스타일가이드 정도는 읽어봐야겠죠?

Vue.js Style Guide의 내용을 정리한 글이다. Vue.js를 메인 프레임워크로 사용하고 있었지만, 해당 문서를 살펴보지 않았다. 최근에서야 스타일가이드를 읽고 '이걸 왜 이제야 읽었을까?'하는 생각이 들었다. 안티패턴을 굉장히 많이 사용하고 있었다. 물론 스타일 가이드에 나온 내용을 무조건 따라야하는 것은 아니지만, 적어도 그 안에 들어 있는 철학을 배우는게 중요하다. 그리고 다른 패턴을 사용할 때는 그만한 합리적인 이유가 있어야한다.

이 가이드에서는 우선순위에 따라 다음과 같은 네가지 카테고리로 내용을 분류하였다.

1. Essential: 반드시 따라야한다.
2. Strongly Recommended: 가능하면 따라야한다.
3. Recommended: 따르면 좋다.
4. Use with Caution: 조심히 따라야한다.

하나씩 살펴보도록 하자. 참고로, 아래 내용은 직접 요약, 번역한 내용이고 상세한 설명은 생략하였다. 훑어보는 용도로만 사용하고 이해가 가지 않는 부분은 공식문서를 참고하기를 권한다.

Essential: 반드시 따라야한다.

1. 컴포넌트명은 최소한 두 단어 이상의 조합으로 짓는다.
2. 데이터는 반드시 함수여야한다.
3. Props는 최대한 자세하게, 최소한 타입이라도 명시해야 한다.
4. v-for는 반드시 key와 함께 사용한다.이 때, key로는 object의 id를 사용하는 것이 좋다.
5. v-for와 v-if는 함께 사용하지 않는다. 새로운 computed 프로퍼티로 대체하여 사용한다.
6. App/Layout 스타일을 제외한 컴포넌트는의 스타일은 스코핑한다. Vue의 scoped나 BEM을 활용한 스코핑
7. 함수를 private하게 유지하기 위해서는 모듈 스코핑을 사용하라. 그것이 불가능하다면 $_yourPlugin_<함수명>을 사용하라.

Strongly Recommended: 가능하면 따라야한다.

1. 컴포넌트를 분리된 파일에 배치한다. 수정하거나 리뷰할 때 빨리 찾을 수 있다.
2. 베이스 컴포넌트들은 Base, App, 또는 V와 같은 prefix를 사용해 명명한다.
3. 페이지당 단 한번만 쓰는 컴포넌트라면 The prefix를 사용해 명명한다.
4. 부모 자식 컴포넌트가 강하게 묶여있는 컴포넌트의 경우, 자식 컴포넌트의 이름은 부모 컴포넌트의 이름을 포함하여야한다.
5. 컴포넌트 명은 공통된 부분이 앞에 구체적인 부분이 뒤로 가게 짓는다. (e.g. ClearSearchButton(x) -> SearchButtonClear(o)) 그래야 에디터에서 찾기가 쉽다. 컴포넌트의 개수가 100개가 넘어가기 전에는 폴더로 구분하길 지양한다. (폴더의 깊이를 얕게할 수록 좋다는 말로도 해석가능)
6. 컨텍스트(e.g. slot)이 없는 컴포넌트는 self-closing하게 사용하는 편이 좋다. (e.g. <MyComponent/>) 단, self-closing을 지원하지 않는 DOM 템플릿에서는 그렇게 사용하지 않아도 된다.
7. PascalCase가 kebab-case보다 선호된다. 단, DOM 템플릿에서는 그렇게 사용하지 않아도 된다. 만약 kebab-case를 사용하거든, 모든 곳에서 통일하라.
8. 컴포넌트명으로 축약형을 쓰지 않는다. 길어도 분명하게 쓴다. (e.g. SdSettings.vue -> StudentDashboardSettings.vue)
9. Props를 선언할 때는 camelCase, 템플릿 안에서는 kebab-case를 사용한다. js에서는 camelCase가, Html에서는 kebab-case가 자연스럽다.
10. 여러 개의 Attribute는 각각 다른 라인에 작성하는 것이 가독성에 좋다.
11. 템플릿 내에서 복잡한 JS 표현식을 쓰지 않는다.
12. 복잡한 computed 프로퍼티는 가능하면 단순하게 쪼갠다.
13. v-bind, v-on, v-slot의 shorcut(:, @, #)을 쓰려면 모든 곳에서 다 쓰고, 아니면 아예 쓰지 않는다.

Recommended: 따르면 좋다.

1. 컴포넌트/인스턴트 옵션은 항상 똑같은 순서로 배열되어야 한다. [Vue에서 권장하는 순서 바로가기]]
2. 컴포넌트의 Attribute도 항상 똑같은 순서로 배열되어야 한다. [Vue에서 권장하는 순서 바로가기]
3. 옵션이 복잡한 경우, 각 옵션 사이에 공백 라인을 주면 가독성을 높일 수 있다.
4. <style>은 반드시 마지막에, 그리고 순서는 항상 일치 시킨다.

Use with Caution: 조심히 따라야한다.

1. 같은 종류의 엘리먼트는 v-if + v-else는 key를 사용하는 것이 최적화에 좋다. 다만, 같은 요소가 아닌데 사용하면 의도치 않은 결과가 생긴다.
2. scoped 스타일에서 element selector보다는 class selector를 써야한다. scoped에서 element selector는 성능이 떨어진다.
3. Props와 event를 사용하는 것이 this.$parent를 사용하거나 props를 직접 변경하는 것보다 선호된다. 단, 이미 쌍을 이룬 컴포넌트의 경우 해당요소를 사용해야 하는 상황도 존재한다. 단순히 편의때문에 사용해서는 안된다.
4. this.$root나 global event bus보다 `Vuex가 선호된다. 간단한 어플리케이션에서는 편리할 수 있지만, 대부분의 어플리케이션에서 Vuex를 사용하는 편이 낫다.

위 내용이 도움이 되셨다면 아래의 광고를 눌러주시면 블로그 운영에 도움이 됩니다 : )