vue 폴더 구조 정리

[Yejin0O0]

새로 vue 프로젝트 파일을 만들면서 새로운 오류 파티의 연속.

무한 error에 지쳐, 일단 폴더 구조는 대충하고 개발 조금이라도 해보자...! 라고 생각함

board 레이아웃정리를 어느정도 끝내니 보이는 엉망인 폴더 구조 :)

자자, 이제는 진짜 폴더 구조 정리해봅시다

[Yejin0O0]

참고 url: 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

1. 파일 이름은 multi-word를 사용
   단일 단어 사용 시 중복 가능성이 있으므로, 다중 단어를 사용하자

2. 부모 컴포넌트와 강하게 엮여있는 컴포넌트는 부모 컴포넌트의 이름을 prefix로 사용한다.
   강하게 엮인 부모-자식 컴포넌트는 nested 형태를 취하지 않음.
   UserCard
   |- Image.vue
   |- Icons.vue
   |- Button.vue (nested 형태)

   이 방식은 Vue 공식 사이트에서 권장 x. 코드 편집기의 성능(또는 기능)에 영향을 미치기 때문
   * 비슷한 이름을 가진 파일이 너무 많으면 단축키로 파일간의 이동이 어려워진다.
   * 하위 경로로 엮인 구조가 늘어나면 IDE의 사이드바에서 컴포넌트들을 브라우징하는데 더 많은 시간이 걸릴 수 있다.

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

[Yejin0O0]

참고 url: 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

프로젝트 규모 별 소스 구조 추천 중

모듈 별로 경로를 쪼갠 다음, 하나의 모듈이 작은 프로젝트 단위라고 생각하고 하위 경로를 구성

을 선택하여 사용할 것

[Yejin0O0]

원래는 https://joshua1988.github.io/web-development/vuejs/vue-structure/ 에서 말한 방법을 사용하려고 하였으나,

중첩 router를 사용 할 예정이므로, 작은 프로젝트 단위로 파일 구조를 설정하는 것이 더 적절하다는 생각이 들었음

작은 프로젝트 단위로 파일 구조 설정하고, 그 하위에 위의 url에서 말한 구조를 참고할 듯 함.

[Yejin0O0]

결과물!