프론트엔드 아키텍처

main

date

Jul 20, 2025

slug

clean-architecture-or-fsd-architecture

author

status

Public

category

💻 Frontend

updatedAt

Aug 5, 2025 01:17 AM

entities와 features의 가장 큰 차이점은 비즈니스 로직, 상태 유무

최소한의 UI 단위로 쪼갤 경우 entities로 분류 가능하다.

근데 UI 내에 비즈니스 로직을 담고 있거나 상태를 가지고 있다면 해당 기능 명으로 features layer로 분류한다. (또한 정렬, 필터와 같은 이벤트도 포함된다.)

entities에서 model이란 데이터가 어떤 모습이고, 어떻게 다루는지를 보여주는 layer (ex type, formate.ts와 같은 유틸 함수 모음)

type, interface 등 타입 정의가 필요할 때

서버에서 온 데이터를 클라이언트에서 변환할 때

도메인 단위의 유틸함수가 있을 때

도메인 스토어 구성 (zustand)

→ 그렇다면 엔티티 폴더 내에 lib, utils, types 폴더도 존재하는데 이건???? 이 폴더 트리는 shared에서만 사용되는 폴더 트리 (전역적으로 사용될 것)

model은 도메인 단위 (entites, features 에서만 사용되는 폴더)

lib → 외부 라이브러리나 기술 레벨 로직 추상화

utils → 전역 유틸 함수

types → 전역 타입

posts entity 기준으로 하위 슬라이드가 api, constatns, types, model, ui

이 슬라이스를 다시 나눈다면 api ui model

3 개의 slice만 존재하고 model segment로 2개의 segment만 남게된다. - contants - types

model


entities/
  └── posts/
        ├── ui/
        └── model/
             ├── types.ts         # 타입
             ├── constants.ts     # 상수
             ├── format.ts        # 포맷팅 함수
             ├── selectors.ts     # 선택자 함수
             ├── validators.ts    # 유효성 검사
             
             
entities/
  └── posts/
        └── model/
             ├── types/
             │    └── index.ts
             ├── constants/
             │    └── index.ts
             ├── utils/
             │    ├── format.ts
             │    └── validators.ts