05_애플리케이션 구조

기능 기반 구조

코드 중복 가능성 증가

.
└── src/
    ├── feature/
    │   ├── Home/
    │   │   ├── components/
    │   │   │   ├── Banner.tsx
    │   │   │   ├── ProductList.tsx
    │   │   │   └── ...
    │   │   ├── containers/
    │   │   │   ├── FeatureProductsContainer.tsx
    │   │   │   └── ...
    │   │   ├── pages/
    │   │   │   └── Homepage.tsx
    │   │   ├── services/
    │   │   │   └── productService.ts
    │   │   ├── types/
    │   │   │   └── productTypes.ts
    │   │   ├── utils/
    │   │   │   └── helpers.ts
    │   │   ├── Home.tsx
    │   │   └── index.tsx
    │   ├── Cart/
    │   ├── ProductDetails/
    │   ├── Checkout/
    │   ├── Profile/
    │   └── ...
    ├── shared/
    │   ├── components
    │   ├── containers
    │   ├── services
    │   ├── types
    │   ├── utils
    │   └── ...
    ├── api/
    ├── store/
    ├── router/
    └── App.tsx

컴포넌트 기반 구조

프로젝트 커질수록 복잡성 증가

.
└── src/
    ├── components/
    │   ├── ProductList/
    │   │   ├── ProductList.tsx
    │   │   └── ProductCard/
    │   │       ├── ProductCard.tsx
    │   │       └── AddToCartButton/
    │   │           └── AddToCartButton.tsx
    │   ├── ShoppingCart/
    │   │   ├── ShoppingCart.tsx
    │   │   └── CartItem/
    │   │       ├── CartItem.tsx
    │   │       └── QuantitySelector/
    │   │           └── QuantitySelector.tsx
    │   ├── UserAuth/
    │   │   ├── Login/
    │   │   │   └── LoginForm.tsx
    │   │   └── SignUp/
    │   │       └── SignupForm.tsx
    │   └── Payment/
    │       └── PaymentForm.tsx
    ├── routes/
    │   ├── AppRouter.tsx
    │   └── Routes.tsx
    ├── api/
    │   ├── product.ts
    │   ├── cart.ts
    │   ├── auth.ts
    │   └── payment.ts
    └── index.tsx

아토믹 디자인 구조

애플레케이션이 커질수록 관계가 복잡해져서 관리가 어려움 과도한 추상화로 구조가 복잡해지기 때문에 컴포넌트 재사용성과 오버 엔지니어링 사이에 균형을 맞추는것이 중요함

.
└── src/
    ├── api/
    │   └── products.ts
    ├── components/
    │   ├── atoms/
    │   │   ├── Button
    │   │   ├── Input
    │   │   ├── Icon
    │   │   └── ...
    │   ├── molecules/
    │   │   ├── ProductCard
    │   │   ├── ShoppingCart
    │   │   ├── ProductFilter
    │   │   └── ...
    │   ├── organisms/
    │   │   ├── Header
    │   │   ├── Footer
    │   │   ├── CheckoutForm
    │   │   └── ...
    │   ├── templates/
    │   │   ├── HomePage
    │   │   ├── ProductDetailPage
    │   │   └── CheckoutPage
    │   └── pages/
    │       ├── Home
    │       ├── ProductDetail
    │       ├── Checkout
    │       └── ...
    ├── views/
    │   ├── HomeView.tsx
    │   ├── ProductDetailView.tsx
    │   ├── CheckoutView.tsx
    │   └── ...
    ├── routes/
    │   ├── index.tsx
    │   └── routes.tsx
    └── App.tsx

MVVM 구조

.
└── src/
    ├── view/
    │   ├── CartView.tsx
    │   ├── ProductListView.tsx
    │   ├── ...
    │   └── components/
    │       ├── cart/
    │       │   ├── CartItem.tsx
    │       │   ├── CartTotal.tsx
    │       │   └── ...
    │       ├── product/
    │       │   ├── ProductCard.tsx
    │       │   ├── ProductList.tsx
    │       │   └── ...
    │       └── shared/
    │           ├── Button.tsx
    │           ├── Input.tsx
    │           └── ...
    ├── models/
    │   ├── CartItemModel.ts
    │   ├── ProductModel.ts
    │   └── ...
    ├── viewmodels/
    │   ├── useCartViewModel.ts
    │   ├── useProductListViewModel.ts
    │   └── ...
    ├── services/
    │   ├── ApiService.ts
    │   └── ...
    ├── routes/
    │   ├── AppRouter.tsx
    │   └── ...
    └── App.tsx