[Udemy Vue 완벽가이드 Section9] 124. 다른 폴더 구조로 이동하기

파일 이름을 짓는것 외에도 큰 프로젝트에서 작업할 때 기억해야할 점이 하나 있다.

→ 바로, 파일을 정리하는 방법

 

# components 폴더에 컴포넌트를 전부 두면?

지금까지는 src폴더에 components 폴더를 만들어 Vue 컴포넌트 파일을 전부 그 폴더에 저장했다.

이는 일반적인 구조로, 아무런 문제가 없지만 큰 프로젝트에서 이런 구조는 한계가 있다.

수백 개의 컴포넌트가 있는 프로젝트에서 모든 파일을 한 폴더에 넣는다면 관리하기 어렵다.

찾고자 하는 컴포넌트를 찾기 어려울 수 있다.

따라서 하위 폴더를 만드는 것이 더 좋을 수 있다.

 

예를 들어, base 또는 UI라는 이름의 하위 폴더를 만들어 BaseCard.vue, BaseBadge.vue와 같은 기본 컴포넌트를 이 폴더에 옮길 수 있다.

폴더에 옮길 때, 각 파일에서 코드의 import부분을 업데이트하는것을 잊지마라.

 

이렇게 일반적인 기본 컴포넌트를 위한 폴더를 만들었다.

그리고, layout이라는 하위폴더를 만들어 header, footer와 같은 파일을 넣자.

 

기능에 따라 정리해야하는 여러 컴포넌트들이 있을 수 있다. 예를 들어, 온라인 쇼핑 애플리케이션을 구축한다면 card라는 하위 폴더에 장바구니 관련 컴포넌트를 저장할 수 있고, checkout이라는 하위 폴더에는 결제 관련 컴포넌트를 둘 수 있다.

 

 

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