Template 내 Business Logic 제거를 통한 Rendering Performance 및 Maintainability 최적화

Context

엔터프라이즈 Angular 프로젝트에서 요구사항 증가에 따라 Template 내에 필터링, 정렬, 데이터 변환 등 Business Logic이 누적되는 현상 발생. 이는 Template이 단순 View 역할을 넘어 Application Layer로 비대해지며 Change Detection 주기마다 불필요한 연산이 반복되는 구조적 한계 초래.

Technical Solution

• Template의 역할을 State Calculation이 아닌 단순 State Rendering으로 제한하는 UI Contract 정의
• Angular Signals 도입을 통한 세밀한 State 관리 및 의존성 추적 기반의 Reactive 업데이트 구현
• computed() 함수를 활용하여 Derived State에 대한 Memoization을 적용함으로써 중복 연산 제거
• UI-ready data preparation을 위한 View-model 패턴 도입으로 Template 내 복잡한 데이터 변환 로직 분리
• Business Logic을 TypeScript 레이어로 완전히 이전하여 Unit Test 가능성 및 디버깅 효율성 확보