10 뷰 리서치

source: categories/study/vue-research/vue-research_10.md

10. vue.js modular architecture

folder by type

  • separating files by their type (vue cli)
    • components
    • router
    • store
    • utils
    • views

  • vue cli로 생성한 프로젝트의 폴더 구성은 프로젝트 규모가 작을 땐 상관없으나, 프로젝트 규모가 커지면 커질수록 코드 분석이 어렵다는 단점이있다.

  • 현재 프로젝트에 아래와 같은 기능이 있다면, 그리고 현재 product를 작업하고 있다면, 아래와 같이 product에 관련된 내용들을 각 타입별로 나눠놔야된다.
  • 이는 프로젝트 규모가 커지면 커질수록 코드 복잡도를 증가시킨다.

  • cart
  • product
    • components
    • views
    • store
    • utils
    • router
  • user

이를 극복할 better architecture?

  • folder by feature Modular architecture
  • 특징별로 폴더를 다 모아놓는 구조이다.

  • modules
    • cart
      • components
      • store
      • utils
      • views
      • index.js
      • router.js
    • products
      • components
      • store
      • utils
      • views
      • index.js
      • router.js
    • users
      • components
      • store
      • utils
      • views
      • index.js
      • router.js

module interface