Search

vue 구조/네이밍 규칙

대분류
프레임워크
소분류
Vue.js
설명
디렉토리 트리 구조, 컴포넌트 네이밍 규칙
유형
Vue
부유형
구조
주요 레퍼런스
https://velog.io/@cindy-choi/VUE-%EC%9A%B0%EC%95%84%ED%95%9C-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EA%B5%AC%EC%A1%B0-%EC%A7%9C%EA%B8%B0
속성
vue
최종 편집 일시
2024/10/29 07:44
생성 일시
2024/02/01 05:49
11 more properties

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

•
단일 단어(Card, Modal, Button)로 이름지으면 이름이 중복될 가능성이 있으며 명료하지 않다.
// Bad Case - Card.vue - Button.vue - Modal.vue // Good Case - UserCard.vue - UserButton.vue - UserUserModal.vue
JavaScript
복사

부모 컴포넌트와 강하게 엮여있는 컴포넌트는 부모 컴포넌트의 이름을 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
JavaScript
복사

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

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