[Vue] 함수 관리를 위한 프로젝트 구조

Vue로 대략적인 로직은 이해하겠는데, 기능별 / 공통 함수를 어떻게 관리하고 사용해야하는지에 대해 고민이 많았다.

프로젝트 초기 구조가 중요할텐데, 무조건적으로 vue파일에 기능을 때려박는다던가 vuex store에 action, state, getters, mutations를 활용한 예제를 활용해 함수를 구현하는것도 가독성이나 기능성에서 문제가 있을거라 판단했다. (물론 내가 구조를 공부해도, 위에서 안한다고 하면 방법은 없지만...미리 학습하고 좋은 프로젝트를 구성하도록 상사 유도...해보자)

 

오픈 카톡방에 질문한 답변에 따르면 프로젝트 함수관리는 아래와 같이 한다.

 

프로젝트 함수 관리

- 공통 함수 -> 모듈로 관리한다.

- store state에 의존적인 로직 -

 

공통 함수	모듈로 관리 -> 비슷한 기능끼리 묶어서 따로 모듈 export하는 js파일을 만들어서 관리
store state에 의존적인 로직	액션으로 관리
기능별 함수	state에 의존적인 로직을 mixin이나 새로 나온 composition으로 분리 (Composition을 vue 2에서도 사용할 수 있나?) -> vue 3.0에서는 믹스인이 composable에 밀려서 쓸일이 별로 없어졌다.