0523 TIL

💡새로 배운 내용

useCalculateDate

dayjs를 이용해서 현재날짜와 기간 , 그리고 그 기간만큼의 저번 주의 날짜를 구하는 hook을 짜봤다

사실 이걸 훅으로 짜도될까.. util로 빼야할까 많이 고민했는데 hook이 맞을것 같아서 훅으로 둬본다.

import dayjs from 'dayjs'
import { useMemo } from 'react'

interface IProp {
  start: string
  end: string
}

export const useCalculateDate = (date: IProp) => {
  const [curStart, curEnd] = useMemo(() => {
    return [dayjs(date.start, 'YYYY-MM-DD'), dayjs(date.end, 'YYYY-MM-DD')]
  }, [date])

  const term = useMemo(() => {
    return curStart.diff(curEnd, 'd') - 1
  }, [curStart, curEnd])

  const [prevStart, prevEnd] = useMemo(() => {
    return [curStart.add(term, 'd'), curEnd.add(term, 'd')]
  }, [curStart, curEnd, term])

  const [curDate, prevDate] = useMemo(() => {
    return [
      { start: curStart.format('YYYY-MM-DD'), end: curEnd.format('YYYY-MM-DD') },
      { start: prevStart.format('YYYY-MM-DD'), end: prevEnd.format('YYYY-MM-DD') },
    ]
  }, [curStart, curEnd, prevStart, prevEnd])

  return { curDate, prevDate, term }
}

cardList utils

interface IProps {
  category: string
  value: number[]
  prevValue: number[]
}

const dataStructure: IProps[] = [
  { category: 'ROAS', value: [], prevValue: [] },
  { category: '광고비', value: [], prevValue: [] },
  { category: '노출수', value: [], prevValue: [] },
  { category: '클릭수', value: [], prevValue: [] },
  { category: '전환수', value: [], prevValue: [] },
  { category: '매출', value: [], prevValue: [] },
]

export const translateData = (DATA: ITrendData[], PAST_DATA: ITrendData[]) => {
  const data = dataStructure
  DATA.forEach((d) => {
    data.find((item) => item.category === 'ROAS')!.value.push(d.roas)
    data.find((item) => item.category === '광고비')!.value.push(d.cost)
    data.find((item) => item.category === '노출수')!.value.push(d.imp)
    data.find((item) => item.category === '클릭수')!.value.push(d.click)
    data.find((item) => item.category === '전환수')!.value.push(d.conv)
    data.find((item) => item.category === '매출')!.value.push(d.convValue)
  })

  PAST_DATA.forEach((d) => {
    data.find((item) => item.category === 'ROAS')!.prevValue.push(d.roas)
    data.find((item) => item.category === '광고비')!.prevValue.push(d.cost)
    data.find((item) => item.category === '노출수')!.prevValue.push(d.imp)
    data.find((item) => item.category === '클릭수')!.prevValue.push(d.click)
    data.find((item) => item.category === '전환수')!.prevValue.push(d.conv)
    data.find((item) => item.category === '매출')!.prevValue.push(d.convValue)
  })

  return data
}

export const transformNum = (NUM: number, TYPE: string) => {
  if (TYPE === 'ROAS') return { unitCnt: Math.floor(NUM), unitWord: '' }
  const unitCnt = Math.ceil(NUM / 1000)
  const unit = ['', '천', '만', '억', '조']
  const unitWord = unit[unitCnt.toString().length]
  return { unitCnt, unitWord }
}

코드에 보이는 반복되는 부분을 줄여야할 노력이 필요할것 같다.. 줄일수 있을것 같은데 마땅한 방법이 떠오르지 않는다 내일 머리 잘 돌아갈때 고쳐야지..

useQuery card data

const { data: curData, isLoading } = useQuery(
    ['#trendData', curDate.start, curDate.end],
    () => getFilterTrendData(curDate.start, curDate.end),
    {
      refetchOnWindowFocus: false,
      staleTime: 60000,
      cacheTime: Infinity,
    }
  )

  const { data: prevData, isLoading: prevIsLoading } = useQuery(
    ['#trendData', prevDate.start, prevDate.end],
    () => getFilterTrendData(prevDate.start, prevDate.end),
    {
      refetchOnWindowFocus: false,
      staleTime: 60000,
      cacheTime: Infinity,
    }
  )

useQuery를 사용하여 카드 데이터를 받아오는 부분이다.

매개변수로 들어오는 date의 useEffect시 다시 끌어와야해서 그부분이 내일 최우선적으로 해결 되어야 할 것 같다.

📝내일 할 일

• cardList의 index.ts의 27~45 line 로직 수정 (useEffect())
• cardList utils의 로직 변경 가능성 확인

🌙 회고

오늘도 역시나 새벽 5시에 잠드는 날이다. 피곤하고 힘들지만 뭔가 내가 살아있다. 뿌듯하다를 느낄수 있어서 너무 좋다

아직 훌륭한 개발자는 아니지만, 개발자가 되기 위한 기질은 갖춘것 같아서 기분이 좋다

내일도 오늘보다 한단계 나은 사람이 되고자 노력해보자