[TIL] 프리온보딩 21일차 - 220523

오늘은 또 다른 기업의 72시간 팀 과제가 시작되었다.

맡은 역할 : 매체 현황 > 그래프

 

1️⃣ Record type

Record type은 object의 key와 value의 type을 지정해준다.

type TData = Record<string, number>

const data: TData = {facebook: 3}

 

 

2️⃣ Spread Operator 알 수 없는 문제..

데이터 구조를 잡기 위해 dataStructure object를 생성하고 data에 Spread Operator를 통해 deep copy를 하였다.

이는 주소를 복사하는 것이 아닌 값만 복사하는 것을 의미한다.

하지만 아래와 같은 방식으로 구현을 하면 facebook, google, kakao, naver에 모두 동일한 데이터가 들어간다.

const dataStructure = {
  click: 0,
  convValue: 0,
  cost: 0,
  cpa: 0,
  cpc: 0,
  ctr: 0,
  cvr: 0,
  imp: 0,
  roas: 0,
}

const data: TData = {
  facebook: [...dataStructure],
  google: [...dataStructure],
  kakao: [...dataStructure],
  naver: [...dataStructure],
}

 

그래서 lodash에 있는 cloneDeep을 이용하여 dataStructure를 deep copy하였더니 정상적으로 값이 출력되었다.

const filterData: TData = {
  facebook: cloneDeep(dataStructure),
  google: cloneDeep(dataStructure),
  kakao: cloneDeep(dataStructure),
  naver: cloneDeep(dataStructure),
}

 

 

📍 해야할 일

- 그래프 글씨 등 색상 변경

- 그래프 테두리(?) 없애기

- 그래프 오른쪽 하단 라벨 생성

- 그래프 mouse 이벤트 (라벨)

- chartData percentage 계산

- y축 변경 (percentage, 선을 기준으로 하여 하단으로 위치 변경)

- 추후에 dateTime Picker 구현되면 startDate, endDate 변경하기