앞서 적은 요구사항을 토대로 어떤 책임과 역할이 생길지 분류해봅시다.
도메인
Copy
유저가 브라우저 내에서 복사한 데이터를 Copy라고 부르겠습니다. Copy는 핵심 자료구조입니다. Copy는 저장하고 불러와지며 유저에게 보여지고, clipboard의 상태를 변경하는데 사용됩니다. 여러 개의 Copy가 있을 수 있고 각 Copy를 구분할 수 있어야하므로 Copy는 엔티티(Entity)가 됩니다.
Copy는 브라우저에서 ctrl + c를 통해 생성하고 저장할 수 있다.
Copy는 context menu에서 "copy stack에 저장하기"를 통해 생성하고 저장할 수 있다.
Copy는 브라우저가 꺼져도 유지된다.
Copy는 삭제할 수 있다.
Copy를 클립보드에 추가하거나 덮어씌울 수 있다.
Copy는 popup 창을 통해 볼 수 있다.
Copy는 미리보기를 통해 요약된 정보를 볼 수 있다.
Copy의 자세한 정보를 볼 수 있다.
ClipboardSystem
복사한 내용을 담을 수 있는 클립보드, 클립보드를 조작할 수 있는 시스템을 ClipboardSystem이라고 하겠습니다.
책임
Repo
Copy에 대한 CRUD를 실행하는 역할을 한다.
Model = Repo = DB 가 될 것 같습니다. 요청을 받으면 DB를 갱신하고 조회할 수 있는 기능을 제공합니다.
View
popup은 Copy 엔티티를 화면에 반영하고 조작할 수 있는 유저 인터페이스를 제공하는 역할을 한다.
브라우저는 Copy 엔티티를 생성을 위한 유저 인터페이스를 제공하는 역할을 한다.
View 영역은 유저에게 필요한 UI를 제공하는 시각화 영역입니다. View는 Copy를 보여주는 로직을 담당합니다. 익스텐션에서 View 영역은 브라우저(content)와 popup, 2가지가 존재합니다.
View에서 Copy에 대한 시각화 정보를 직접 가져오는 것은 View의 책임을 벗어나는 영역인 듯하니, View가 사용할 시각화 정보를 제공해 줄 또 다른 책임자 ViewModel을 두는 것이 좋을 것 같습니다.
View의 입장에선
- ViewModel에서 Copy 정보를 읽어 화면을 그린다.
- ViewModel이 갱신되어 알림(notify)가 오면 Copy 정보를 읽어 화면을 갱신한다.
두 가지 일을 수행할 겁니다.
ViewModel
ViewModel은 Copy에 대한 시각화모델을 들고있는 저장소이다.
action이 들어오면 CopyModel을 갱신한다.
Copy 정보가 변경되면 popup 갱신을 요청한다.
아마 pub/sub 패턴으로 publisher가 되어 subscriber(view)를 갱신하는 구조가 될 듯 합니다. 또한 특정 action에 대해 model(Repo)을 갱신합니다. 1개 model에 대해 1개의 ViewModel이 존재하게 됩니다.
dispatcher
chrome extension의 구조상 popup과 store(viewmodel)이 직접 통신할 수 있는 구조가 아니라 chrome.runtime.onmessage 나 BroadcastChannel, MessageChannel 을 통해 통신을 주고 받아야합니다. 자연스럽게 Flux 패턴을 채택해 dispatcher를 도입합시다. 익스텐션의 message 시스템을 따르면서 자연스럽게 flux 패턴의 장점 (단방향 메세지 흐름으로 구조 단순화)을 취득합니다.
View에서 발생한 Action을 취합해 Store에게 전달합니다.
정리
MVVM과 Flux 패턴을 따르도록 구현할 예정
popup(view) 입장
copyStore를 구독하고 store가 발생시키는 notify에 반응해 화면을 갱신합니다.
유저가 action을 발생시키면 dispatcher를 통해 action을 전달합니다.
dispatcher 입장
view로부터 action을 받아 적당한 처리를 수행합니다.
copyStore에 action을 전달하는 역할을 합니다.
copyStore(viewModel)
copy에 대한 viewModel
action이 들어오면 model을 갱신 혹은 쿼리(조회) 한다.
model의 갱신 결과를 view에 전달(notify)한다.
copyModel(Repo)
copy에 대한 CRUD 수행
Copy 엔티티가 사리지지 않게 저장한다.
마치며
다음글에선 어떤 스택을 이용해 구현할지 고민할 듯 합니다.
