연주음악 시장에서 플랫폼을 개발하는 스타트업
피아노 학원 관리 솔루션 개발 중단으로 권고사직
피아노 학원 관리 솔루션 (ERP) 개발(Web)
- Angular, TypeScript, RxJS, NgRx, Bootstrap, HTML, scss, git
- 프론트앤드, 백앤드, 디자이너, 기획자 총 4인으로 진행
- 학생, 레슨, 강사 및 직원, 관리자 크게 4가지 모듈로 나눠서 기획/개발 진행
- 과거 ERP 관련 개발 경험을 살려 백앤드 DB/아키텍쳐 설계에도 일부 관여
- 각 모듈간 공통으로 사용할 state management 수단으로 ngrx + effects 사용
- api 통신은 하나의 글로벌 서비스를 만들어 선언하고 rxjs를 사용하여 각 라우터 페이지에서 데이터를 조회
- 디자인 시스템으로 코드화 및 사내 타플랫폼에서도 사용할 수 있게 문서화
# 모듈로 각각 분리하여 관리
- SPA 프레임워크 특성상 초기 로딩이 무거울 수 있으므로 모듈 단위로 lazy loading을 도입해서 초기 로딩 속도 경량화
- 공유되는 부분은 shared module로 따로 관리하여 각 모듈마다 중복 입력을 방지 (common ngrx, 디자인 시스템 component 등)
# State management 라이브러리 변경 / Rx 특성을 활용하여 새로운 개발 방법 제시
- 사내 프로젝트에서 전체적으로 사용 중이던 angular-redux/store 라이브러리가 오픈소스계에서 1년 이상 제대로 관리되지 않아 좀 더 활발한 ngrx/store로 state management 기법을 변경
- Angular가 기본 제공하는 async pipe를 활용하는 방법으로 typescript에 작성하는 Observable.subscribe 수를 최소화. (300줄짜리 코드가 30줄 내외로 줄어드는 효과가 있었음)
- rxjs에서 switchMap, mergeMap, BehaviorSubject/Subject 등을 적극 활용하는 코드 패턴으로 유저의 행동에 따라 api 호출하는 코드가 간결해짐
# 컴포넌트 재사용성을 극대화하기 위한 디자인 시스템을 디자이너와 구상 + 개발
- Angular의 특성에 맞게 reactive form을 이용한 페이지 구성 과정에서 반복되는 Input 등 component 재사용성 극대화
- Typography, Input, Select, Button 등 디자인 시스템에 대한 코드화 진행
- 각종 입력 component 및 validator 개발
- 사내의 다른 플랫폼에서도 쉽게 가져다 사용할 수 있도록 컴포넌트를 일반화시키고 그에 대한 문서화
# 사내 라이브러리 오픈소스화
- bootstrap modal을 대체할 modal dialog 컴포넌트 커스텀을 위해 컴포넌트 혹은 템플릿을 받아 modal로 띄우는 컴포넌트 개발 (https://github.com/mapiacompany/armory/tree/master/projects/dialog)
- 솔루션 프로그램 외의 다른 플랫폼에서도 사용하기 위해 라이브러리화
더보기