[Udemy Vue 완벽가이드 Section9] 123. Vue 스타일 가이드

폴더구조와 파일 이름에 대해 알아보자.

지금까지는 강사를 따라 파일이름을 지었다.

하지만 이름을 이렇게 지은 이유는 무엇이고, 과연 이것이 가장 적합한 폴더구조인지에 관해 이야기해보자.

 

공식 Vue 스타일 가이드가 있다.

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

스타일 가이드 | Vue.js

Vue 웹사이트에서 Docs의 Style Guide에서 볼 수 있다.

여기서 우리의 코드가 어떤 모습을 해야할지, 이름을 어떻게 정하는게 좋은지에 대한 내용을 볼 수 있다.

기본적으로 따라야하는 필수 규칙이 있고, 강력하게 권장되는 규칙 등과 같이 다양한 수준의 권장 사항이 있다.

 

 

예를 들어, 컴포넌트는 파일에 저장되어야 한다는것을 알 수 있다.

Whenever a build system is available to concatenate files, each component should be in its own file.

즉, 파일 당 컴포넌트 하나가 저장된다.

 

# 기본 컴포넌트 이름

이때, 여러 장소에서 사용되는 BaseCard.vue와 같은 기본 컴포넌트의 경우, BaseButton, BaseCard 등과 같은 이름 또는 AppButton, AppCard와 같이 이름을 지어야한다.

 

 

# 단일 인스턴스 컴포넌트 이름

TheHeader라고 이름을 붙인 header와 같이 단일 인스턴스 컴포넌트의 경우, 즉 전체 앱에서 한번만 사용되는 컴포넌트의 경우, 이름 앞에 The를 붙이고, 그 다음 컴포넌트를 설명하는 것이 권장된다.

 

 

 

하지만 이건 기술적인 규칙이 아니라, 권장 사항일 뿐이다.

그렇기에 만약 특정 규칙을 따르고싶지 않다고 해도 괜찮다.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.