[TIL] 0222

yoon Y·2022년 2월 23일
0

2022 - TIL

목록 보기
44/109

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 속성

profile
#프론트엔드

0개의 댓글