Vue.js Component와 View 분리하기

기존에는 명명 규칙도 정해지지 않고 급한대로 작업한 결과로 Component와 View가 혼합하여 코딩되고 있었다.

개선 전의 파일 구조

src/
├── components/
│   ├── auth/
│   │   ├── LoginView.vue
│   │   └── SignupView.vue
│   ├── errorPages/
│   │   └── NotFoundView.vue
│   ├── layout/
│   │   └── HeaderView.vue
│   ├── profile/
│   │   ├── ProfileEditView.vue
│   │   ├── ProfileView.vue
│   │   ├── VideoEditDetailView.vue
│   │   └── VideoEditView.vue
│   └── video/
│       ├── UploadView.vue
│       ├── VideoCardList.vue
│       ├── WatchView.vue
│       └── HomeView.vue

명명 규칙 보고가기

1. 공통 규칙

파일 이름은 항상 PascalCase를 사용한다.

• 파스칼케이스가 뭐임?
  단어의 첫 글자를 모두 대문자로 쓰는 표기법이다.

ex)

• MyHomeView

2. Component 규칙

재사용 가능한 UI 요소
Component는 생략한다.

ex)

• Header.vue
• VideoCard.vue

3. View 규칙

라우터 페이지용 컴포넌트
이름에 View 접미어 붙이는 관례

ex)

• HomeView.vue
• LoginView.vue

개선

명명규칙대로라면 개선할 부분들이 많이 보인다. 컴포넌트와 view를 분리할 views 디렉토리를 생성한다.

src/
├── components/
│   ├── layout/
│   │   └── AppHeader.vue
│   ├── profile/
│   │   ├── VideoEditDetail.vue
│   │   └── VideoEdit.vue
│   └── video/
│       ├── VideoCardList.vue
│       └── Upload.vue
├── views/
│   ├── auth/
│   │   ├── LoginView.vue
│   │   └── SignupView.vue
│   ├── error/
│   │   └── NotFoundView.vue
│   ├── profile/
│   │   ├── ProfileView.vue
│   │   └── ProfileEditView.vue
│   └── video/
│       ├── WatchView.vue
│       └── HomeView.vue