[Chart 추천 서비스] Voyager 기술 스택과 신규 서비스 SRS

Voyager 기술 스택을 살펴보고, 새로 디자인 하려는 기술스택을 정리해 보자. 

  - Voyager 기술 스택 알기

  - 새로운 기술 스택 준비하기 

Voyager 기술 스택

기술 스택 이해를 위해 voyager의 의존성 패키지를 살펴보자. 

  - Typescript

  - React

  - React third part components: datetime, dnd, file-download, modal, spinners, split-pane, tabs, tether

  - Redux: redux-action-log, redux-thunk, redux-undo, reselect

  - common packages: moment, font-awesome

  - vega: vega-datasets, vega-expression, vega-lite, vega-tooltip, vega-typings, vega-util

  - compassql

  - webpack 빌드

React 개발시 사용하는 환경에서 개발되었음으로 알 수 있다. Voyager 설명과 사용방법은 Gitbook을 사용하고 있다. 

  - 로컬 데이터 로딩, URL입력으로 불러오기: JSON, CSV, TSV 파일형식 지원

  - 데이터 Field 자동 분류: quantitative(숫자), temporal(날짜), categorical(문자)

  - quantitative에 대해 min, max, mean등의 함수 적용

  - temporal에 대해 year, month, date, hours등의 함수 적용

Lime 기술 스택

라임은 Voyager의 기능을 흡수하고 내가 사용하고 싶은 UX 를 가미한 서비스이다. 라임은 다음의 기술 스택으로 만들어 보려한다. 

  - React + Redux

  - Meteor

  - MongoDB

  - vega-lite, compassQL

라임 서비스의 SRS(Software Requirements Specification, 소프트웨어 요구사항 명세)는 다음과 같다.

  - 데이터는 Voyager에서 지원하는 형태와 동일하다. 이후 데이터에 대한 수집, 클렌징 작업은 또 하나의 프로젝트가 될 정도의 규모이므로 여기서는 배제한다. 

  - 차트를 디자인한 후, 직접 Vega-lite의 JSON 환경설정을 에디팅 할 수 있도록 한다. 에디터는 Vega-editor를 사용한다. 

  - 원하는 차트 형태가 나왔다면 데이터와 차트 설정을 저장할 수 있다. 

  - 저장한 차트 목록에서 원하는 것을 대시보드화 할 수 있다. 즉, 차트 -> 대시보드 기능을 가진다. 

  - 각 차트와 대시보드는 다른 애플리케이션에 embedding하여 표현할 수 있다. 

  - 대시보드는 생성한 Vega차트를 표현하거나, Text, Image등의 Widget을 제공하여 사용자 정의 정적 표현을 할 수 있다. 

차트 생성

대시보드 생성

어짜피 혼자 개발하는 것이니 한장 짜리 SRS로 시작해 본다.

<참고>

- Voyager Github

- Voyager GitBook