Vue 구조/네이밍 규칙

컴포넌트의 이름은 Multi-word를 사용

• 단일 단어(Card, Modal, Button)로 이름지으면 이름이 중복될 가능성이 있으며 명료하지 않다.

// Bad Case
- Card.vue
- Button.vue
- Modal.vue
// Good Case
- UserCard.vue
- UserButton.vue
- UserUserModal.vue

부모 컴포넌트와 강하게 엮여있는 컴포넌트는 부모 컴포넌트의 이름을 prefix로 사용

• nest방식의 단점
  • 비슷한 이름을 가진 파일이 너무 많으면 단축키로 파일간의 이동이 어려워진다.
  • 하위 경로로 엮인 구조가 늘어나면 IDE의 사이드바에서 컴포넌트들을 브라우징하는데 더 많은 시간이 걸릴 수 있다.

// Bad Case
- User.vue
- Card.vue
- Button.vue
- Modal.vue
// Good Case
- UserCard.vue
- UserButton.vue
- UserUserModal.vue
// 만약 컴포넌트 양이 많을 경우
- UserCard.vue
- UserCard
	|- Card.vue
	|- Button.vue
	|- Modal.vue

전체 페이지에서 유일하게 사용하는 컴포넌트에는 The 사용

• Header, Footer 의 경우는 보통 모든 페이지를 통틀어 단 하나의 인스턴스만 생성된다. 이 때에는 The Prefix를 붙여 명시해주는 것이 좋다.
• 이렇게 사용되는 컴포넌트는 보통 props를 사용하지 않는 것이 좋다.