[TIL] 0222

WaffleCard Refactoring

Typescript 전환

HTMLDivElement의 타입에는 onClick이 정해져 있기 때문에
커스텀한 타입을 쓰려면 omit으로 제거해준 후에 지정해야한다

interface TabProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
  currentActive?: string;
  onClick?: (tabValue: string) => void;
}

CardList Animation

• useEffect와 setInterval을 사용해 n초마다 스크롤을 이동해주는 방법을 시도했으나
  스크롤 이동 시마다 렌더링이 되기 때문에 성능면에서 너무 안좋았다
• keyframe animation을 설정했을 때 카드가 이동하기 위해 transform: translate를 사용했는데 transform은 reflow,repaint가 실행되지 않는다는 걸 알았다. 화면에 늦게 그려지는 이유라는 생각이 들었다. 다른 속성을 적용해봐야겠다

학습 자료
브라우저 렌더링 성능 최적화 - Repaint가 일어나지 않는 CSS 속성