오픈빌더

개요

• 프로젝트명 : 범블비
• 사용기술 : Angular4, Typescript
• 서버 개발자로 구성된 조직에서 오픈빌더 프런트를 담당했으나, 규모가 큰만큼 명확한 정돈이 필요하여 프런트 개발자 두명을 투입함.

기존 1.0 구조의 문제점

• [협업장벽] 컴포넌트별 각각 스타일 파일을 사용하여, 통합 css를 전달해주는 협력업체와 협업이 장벽이 있다.
• [비구조화] 앵귤러 구조인 컴포넌트/서비스/모듈이 일관성 없이 배치되어 구조화가 필요하다.
• [중복코드] 각 컴포넌트별 중복되는 코드가 많다.

문제점 해결 방법

협업장벽

컴포넌트별 각각 스타일 파일을 삭제하고, 전달된 파일은 통합 CSS를 바로 사용하도록 처리.

비구조화

• URL Path를 기준으로 Feature Module로 정의하고 Lazy Loading 적용
• 공통 모듈인 Core/Shared Module를 정의
  • Core : 앱 전역에서 싱글톤으로 정의되는 요소
  • Shared : Feature Module에서 반복적으로 사용되는 요소

중복코드

• 컴포넌트화
• 수동 루프 => map/filter/reduce/find 사용