모아데이터 프로젝트 후기

김부건·2022년 6월 5일
0

담당 개발 내용

: 모아 데이터 프로젝트의 StepChart 파트

개발 진행 상황

: Step 차트를 왜 1분 단위로 그려야하는 지 솔직히 이해할 수가 없었다. 그래서 하루치 데이터에 대해서는 10분 단위로 자르고(솔직히 10분 단위도 적어보인다.) 24시간 동안 10분 간격으로 걸음 수를 차트에 기록하였다. 아마 대부분의 다른 조에서는 주어진 json을 그대로 사용했을 거 같지만, 나는 아이폰의 건강 데이터처럼 하루치의 걸음 수에 대해서는 특정 시간별로 몇 걸음을 걸었는지 보여주고 싶어서 추가적으로 데이터를 가공했다.

export const useStepsdata = (data: IUserInfo[]): IDailyStepsData => {
  const [stepsData, setStepsData] = useState<IDailyStepsData>({})

  useEffect(() => {
    const sortedData = data.sort((a, b) => dayjs(a.crt_ymdt).diff(b.crt_ymdt, 's'))

    const stepsRecords = sortedData.reduce((acc: IDailyStepsData, cur: IUserInfo) => {
      acc[dayjs(cur.crt_ymdt).format('YYYY-MM-DD')] = {
        totalDistances: Math.max(cur.distance, acc[dayjs(cur.crt_ymdt).format('YYYY-MM-DD')]?.totalDistances ?? 0),
        totalSteps: Math.max(cur.steps, acc[dayjs(cur.crt_ymdt).format('YYYY-MM-DD')]?.totalSteps ?? 0),
        records: [...(acc[dayjs(cur.crt_ymdt).format('YYYY-MM-DD')]?.records ?? []), cur],
      }

      return acc
    }, {})

    setStepsData(stepsRecords)
  }, [data])

  return stepsData
}

하루치 데이터에 대해서는 24시간을 10분 단위로 잘라서 144개의 칼럼에 해당 시간에 걸을 수만을 저장했다. 걸음을 누적데이터로 보여주는 것보다 그 구간에 걸은 수만큼을 보여주는게 좀더 좋을 것 같아서 이렇게 했는데, 막상 그래프가 이쁘지 않아서, 괜히 한거 같기도 하고, 이렇게 작업하자고 먼저 제안을 했었는데, 괜히 나때문에 팀원들한테까지 피해를 끼친것 같아 마음이 씁쓸하다. 솔직히 차트를 그리는데 쓰일 데이터 자료구조를 어느정도까지 추상화해야할지 많은 고민을 했었는데, 프로젝트 당시 내 실력으로는 저게 제일 타당하다고 생각해서 아래와 같이 짰는데, 난해하다.

 const targetDateData = Array.from({ length: 144 }, (_, i) => ({ x: i, y: 0 }))

	stepsData[dayjs(startDate).format('YYYY-MM-DD')]?.records.forEach((record, i) => {
		const hourIndex = Math.floor((dayjs(record.crt_ymdt).hour() * 60 + dayjs(record.crt_ymdt).minute()) / 10)
		const currenStep = record.steps - (stepsData[dayjs(startDate).format('YYYY-MM-DD')]?.records[i - 1]?.steps || 0)
		targetDateData[hourIndex].y = currenStep
})

개발 완료 후 회고

: 차트의 기간을 하루, 1주일, 특정 시간 구간, 크게 이렇게 3가지로 나누고 작업을 했는데, 데이터 가공을 할때 자료구조를 잘못 생각했는지, 막상 데이터를 뿌려줄때 추가적인 작업이 많이 필요해서 깔끔하게 차트의 데이터를 뿌릴 수 없어서 많은 아쉬움이 있었다. 현재 이 글을 쓰는 시점이, 모아데이터 프로젝트를 완료하고 시간이 어느 정도 흐른 뒤에 쓰는 중인데, 지금은 자신있게 차트를 그릴 수 있는데 반해서 모아 데이터 프로젝트를 진행할때에는 차트를 짜맞추기식으로 하다보니 원하는 수준의 깔끔함을 추구할 수 없어서 많은 아쉬움이 남는다.

0개의 댓글