우아한 테크캠프 [과제 3]

우아한 테크캠프 3주차 과제까지 끝이 났습니다. 과제 끝난 다음날 쓰는 싱싱한 회고입니다 :)


먼저 3주차의 전체적인 느낌부터 설명을 드리면 현재까지의 과제 중 가장 과정과 결과가 좋았습니다 (개인적으로)

과제

이번 과제는 우아한 가계부를 개발하는 것입니다. history API를 이용한 라우터 처리나 Model과 View를 분리하라며 Canvas, SVG를 이용한 데이터 시각화 요구사항 외엔 새로운 요구사항은 없었습니다.


백엔드는 CICD툴을 사용하지 않으며 배포 자동화를 하는 부분 정도가 있었습니다.

프론트엔드 구조

프론트엔드의 Model과 View를 분리하기 위해서 MVVM 방식을 사용했고 상태를 관리하기 위해선 PubSub 패턴을 사용했습니다

MVVM 패턴

저희가 사용한 MVVM패턴에서 각 요소의 역할은 아래와 같습니다.

Model: 데이터 저장 및 Proxy API를 이용하여 데이터가 변경될때마다 이벤트 Publish
ViewModel: Model로 부터 View에게 바인딩할 데이터 전달, 이벤트 Subscribe, 비즈니스 로직
View: DOM 업데이트, UI 로직

PubSub 패턴

Model과 ViewModel 사이에 데이터의 변경을 알리기 위해 사용했습니다

viewModel.subscribe('ON_DATA_CHANGE', callback); // ViewModel이 특정 action을 구독
modle.data = newData; // 모델에 데이터가 변경된다면 등록된 action 이벤트를 발행 > 구독한 모든 callback 실행

UI 랜더링

UI단위를 크게 3가지로 나누어 작업했습니다.


Page: 여러가지 View를 묶는 단위
View: ViewModel의 데이터를 바인딩, 해당 UI의 목적에 맞도록 View 분리
UIElement: 재사용 가능한 요소로 분리


자세한 내용은 프론트엔드 구조, 백엔드 구조를 참고하세요

어려웠던 점

이번 프로젝트에서 PubSub 패턴으로 상태를 다루며 해당 이벤트를 구독하는 ViewModel이 쉽게 인지할 수 있다는 점이 좋았습니다. 하지만 모든 PubSub을 사용하는 상태가 전역적으로 관리되었으며 ViewModel이 구독을 하고 해당 View를 랜더링하는 점이 작은 UI 요소를 나누는데 힘들었습니다.


또한 View에서 UIElement를 만들어서 사용하다 보니 (UIElement의 예로는 모달, 텍스트 박스 등) ViewModel에서 해당 UIElemnt에 접근하기 힘들었습니다.


이를 해결하기 위해서 ViewModel에서 UIElement를 관리하여 상태가 변하면 UIElemnt를 포함하는 View를 랜더링함이 아니라 UIElement만 랜더링하여 UI 업데이트를 이룰 수 있도록 해야될 것 같습니다.

마무리

이번 프로젝트는 평소보다 더 오래 페어로 개발했고 많은 시간을 들인 프로젝트였던 것 같습니다. 결과에 항상 만족할 수 없지만 조금은 마음에 드는 결과과 나왔고 과정또한 매우 값지다고 생각합니다.

 

프로젝트 Github