프론트엔드 개발, 모듈유닛으로 효율 UP!
by DD
6개월 전
조회수 58
모듈유닛(Module Unit)은 신세계백화점 PC 메인 React 전환 과정에서 도입된, 페이지를 구성하는 최소 UI 구성 요소를 의미함
유닛 타입(Unit Type)과 데이터를 API로 받아와 UI를 구성하며, 유지보수성(Maintainability) 향상을 목표로 함
공통 컴포넌트(Common Component) 사용으로 변경 사항을 일괄 적용하여 개발 생산성(Development Productivity) 증대를 기대함
모듈유닛 아키텍처(Architecture)의 기본 원리
모듈유닛은 페이지를 구성하는 독립적인 UI 블록(Independent UI Block)으로, 재사용성(Reusability)과 유지보수성(Maintainability)을 높이는 데 기여한다. 각 모듈유닛은 고유한 unitType을 가지며, API 응답 데이터를 기반으로 렌더링된다.
단일 책임 원칙(Single Responsibility Principle): 각 모듈유닛은 하나의 기능에 집중하여 코드의 가독성(Readability) 및 유지보수성(Maintainability) 향상
컴포넌트 기반 개발(Component-Based Development): UI를 작은 단위로 쪼개어 관리함으로써, 변경 사항의 영향 범위를 최소화하고 개발 효율을 높임
데이터 중심 설계(Data-Driven Design): UI는 API에서 제공하는 데이터에 의존하므로, 데이터 구조 변경 시 UI 업데이트 용이
모듈유닛의 장점: 유지보수성(Maintainability) 향상
모듈유닛 아키텍처(Architecture)는 유지보수(Maintenance) 편의성을 극대화한다. 상품 가격 표시 방식 변경과 같은 요구사항 발생 시, 해당 기능을 담당하는 가격 컴포넌트(Price Component)만 수정하면 된다.
일괄 적용(Batch Application): 가격 컴포넌트를 사용하는 모든 상품유닛에 변경 사항이 자동으로 반영되어 수정 시간 단축
영향 최소화(Impact Minimization): 특정 페이지가 아닌, 공통 컴포넌트 수정으로 인해 변경 범위를 명확하게 관리
SSG7CLUB 멤버십 적립금 표기 기능 추가 사례: 상품유닛의 가격 영역에 적립금 표기 기능을 추가하여 개발 생산성(Development Productivity) 향상
결과적으로, 모듈유닛은 코드 변경의 파급 효과를 줄여 개발 효율성(Development Efficiency)을 높이는 데 기여한다.
모듈유닛 도입 시 고려사항
모듈유닛은 여러 페이지와 매장에서 공통으로 사용되므로, 변경 사항이 광범위한 영향(Wide Impact)을 미칠 수 있다. 따라서, 기획 단계에서부터 충분한 검토(Thorough Review)가 필요하다.
기획 리뷰(Planning Review): 변경 사항이 기존 모듈유닛 정책을 위반하지 않는지, 구조적 변경으로 인한 공수 증가는 없는지 확인
공통 정책(Common Policy): 공통으로 사용되는 모듈유닛의 경우, 변경 사항이 다른 매장이나 화면에도 동일하게 반영됨을 인지
책임 분담(Responsibility Sharing): 모듈유닛 기반 구조는 변경을 쉽게 만들지만, 변경의 영향 범위에 대한 책임(Responsibility)을 명확히 해야 함
결론적으로, 모듈유닛은 개발 효율성을 높이지만, 변경의 영향 범위를 고려하여 신중한 설계(Careful Design)가 필요하다.
