프론트엔드 구조

폴더 구조

📦 
├─ api
│  └─ middlewares                          # HTTP 요청에 대한 미들웨어
├─ constant
│  └─ action.ts                            # 이벤트 이름 명세
├─ core
│  ├─ common-element.ts                    # 최상위 CommonElement
│  ├─ page.ts                              # CommonElement를 상속받는 Page
│  ├─ view.ts                              # CommonElement를 상속받는 View
│  ├─ ui-element.ts                        # CommonElement를 상속받는 UIElement
│  ├─ view-model.ts                        # ViewModel
│  └─ proxy-model.ts                       # ProxyModel
├─ enums
├─ models                                  # ProxyModel을 사용한 실제 Model
├─ pages
├─ ui-elements
├─ views
├─ veiw-models
├─ types                                   # 각 타입 정의
└─ utils

설명

MVVM + PubSub

데이터를 저장하는 model과 UI요소를 표시하는 view를 분리하기 위해 MVVM 패턴 을 사용했습니다.
저희가 사용한 Model, ViewModel, View의 역할은 다음과 같습니다.

• Model

  • 데이터 저장
  • ProxyModel(with Proxy API)를 상속받아 해당 데이터가 바뀔때 마다 이벤트 발급

• ViewModel

  • Model로부터 View에게 바인딩할 데이터를 전달
  • 각 이벤트를 구독하여 이벤트 발생 시 있다면 특정 동작
  • 모델 데이터 업데이트
  • API 통신
  • 비즈니스 로직

• View

  • DOM 업데이트
  • UI 렌더링
  • UI 로직

PubSub 패턴은 Model과 ViewModel 사이에 사용했습니다.

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

렌더링

UI단위를 Page, View, UIElement 로 나누어 작업했습니다. 각각의 역할은 다음과 같습니다

• Page

  • 여러가지 View를 묶어주는 단위

• View

  • 각 View는 ViewModel을 통해 데이터를 바인딩
  • 해당 UI의 목적에 따라 View를 분리

• UIElement

  • 재사용 가능한 요소
  • 목적에 맞는 UI 로직을 가지며 그 외의 로직은 외부로부터 주입 받음