피드로 돌아가기
Migrando um YMS de 5 anos: Do Angular 16 ao 21 (Parte 7) - Clean Architecture: A nova estrutura de pastas por domínios
Dev.toDev.to
Frontend

YMS 레거시 구조 탈피를 위한 Domain-Driven Folder Architecture 도입

Migrando um YMS de 5 anos: Do Angular 16 ao 21 (Parte 7) - Clean Architecture: A nova estrutura de pastas por domínios

Erick Gabriel dos Santos Alves2026년 6월 4일3intermediate

Context

5년 된 YMS 프로젝트의 Angular 14/16 기반 레거시 구조로 인한 유지보수 효율 저하 발생. 기술적 역할 중심(Technical Type)의 폴더 구조로 인해 관련 코드 간 물리적 거리가 멀어 인지 부하가 증가한 상황.

Technical Solution

  • 역할 중심에서 비즈니스 도메인 중심(Feature-based)으로 폴더 구조를 전면 재설계
  • '함께 변경되는 코드는 함께 위치한다'는 원칙에 따라 Feature 내부에 Model, Service, Component를 응집시킨 구조 설계
  • Core 폴더를 통한 Interceptor, Auth, Guard 등 전역 Singleton 기술 모듈의 격리
  • Shared 폴더를 통해 비즈니스 로직이 없는 UI-only 'Dumb Component'와 Pipe의 재사용성 확보
  • Standalone Component 도입으로 도메인 간 의존성을 제거하고 각 Feature의 독립적 작동 보장
  • 향후 Micro-frontend 전환이나 Nx 라이브러리 추출이 용이하도록 도메인 간 결합도를 최소화한 디커플링 전략 적용

- 신규 기능 구현 시 기술적 타입(Service/Component)이 아닌 비즈니스 도메인 단위로 폴더를 생성하는지 확인 - 특정 기능을 수정할 때 서로 다른 상위 폴더를 여러 번 이동해야 하는 '인지적 도약' 발생 여부 점검 - Core(전역 기술)와 Shared(공통 UI)의 경계를 명확히 하여 도메인 간 불필요한 의존성 전이 방지 - 향후 Micro-frontend 확장을 고려하여 Feature 폴더 단위의 독립적 추출 가능성 검토

원문 읽기