Issue#30/restrict svg dom element

[rkdwoals159]

개요

• 기존 data fetch될때마다 캔들차트 dom element개수가 늘어나던 이슈가 있습니다.
• svg 성능개선을 위해 캔들차트 dom element개수를 고정값(600개)으로 수정했습니다.

작업사항

• 과거로 갈때마다 추가로 data를 fetch해주던 array로직은 가만히 유지한채, 실제로 렌더링되는 범위를 변경하도록 수정했습니다. 해당 로직은 다음과 같습니다.
  1. 확대 최대치 고정 -> 200개까지만 보이도록 wheel이벤트에서 제한 추가
  2. 최대 data 엘리먼트 개수를 600(200*3)개로 제한함
  3. 기존 array는 fetch되는대로 무한대로 쌓이고, 실제로 변경되는건 해당 Array중 특정 범위이기 때문에 시작하는 index를 알아야 합니다. 이를 위해 domElement에 추가되는 데이터 인덱스 변수를 사용했습니다. -> ex) 1600개의 data Array중에 400~1000번째 index면 fetchStartDataIndex= 400

4. optionSetter
   • fetchStartDataIndex를 조절
   • 과거로갈경우 -> index +200
   • 미래로갈경우 -> index -200
   • renderStartDataIndex를 조절
   • 과거로갈경우 -> 미래데이터를 삭제하므로, index - 200
   • 미래로갈경우 -> 인덱스가 0으로 가기 전에 200개 추가해주면 index +200
   • renderCandleCount를 조절 (휠이벤트의 경우)
   • 어차피 최대 축소시 개수를 200개로 제한했기때문에 조절할 필요없음
   • translateX를 조절
   • 과거로갈경우 candleWidth * 200개 만큼 미래꺼를 날렸기때문에 왼쪽으로 이동
   • 미래로갈경우 candleWidth * 200개 만큼 과거꺼를 날렸기때문에 오른쪽으로 이동

생각해볼점

• 버그 이슈
  • 과거로 굉장히 빠르게 드래그를 할때 가끔 3시간분량의 데이터가 짤려서 fetch됩니다. 딱 그 세시간 분량만 캔들이 없어요.
  • 그 양이 정확히 캔들데이터 200개 정도라서 한번에 200개씩 fetch해오는 저희 로직상 fetch문제인것 같습니다.
  • 아마 너무 빨리 드래그 해서 그시간동안 비동기 처리 로직에 문제가 있는것 같습니다.
  • 정확한 원인은 아직 못찾았지만 즉각처리되는 optionSetter와 비동기 로직인 candleDateSetter의 순서 보장이 안되서 라고 짐작을 하고있습니다. (301~348줄 로직)

이번 로직 제가 짰지만 부끄럽게도 좀 이해하기어렵습니다... 천천히 봐주세요

이미지

600개 이상 데이터를 볼수있도록 왼쪽으로 쭉 밀었다가 다시 현재로 돌아오는 gif 화면입니다.

[baldwinIV]

해당 svg를 불러올지말지만 결정할 수 있는 이유가, api를 통한 fetching은 이미 저희가 이전에 작성한 pre-fetch 로직에서 하고 있기 떄문인가요? == 불러올 svg가 메모리상에 존재한다고 보장이 되는지?