TIL | 22.05.17

Today I learned

1. 왓챠피디아 클론코딩 slick 오류 해결
   - 자동으로 생성되는 style 에서 오류가 난 것으로 판명

   import ReactSlider, { Settings } from "react-slick";
   
   const StyledSlide = styled(ReactSlider)`
     .slick-track {
       display: flex;
     }
   `;
   
   const Slider: React.FC<Props> = ({ settings = DEFAULT_SETTINGS, children }) => (
     <StyledSlide {...settings}>{children}</StyledSlide>
   );

   이처럼 react-slick 에서 ReactSlider 를 불러오고 그 스타일을 상속해준 스타일 컴포넌트를 만들어 준 후, slick에 의하여 자동으로 생성된 'slick-tract' class 를 갖은 노드에 display : flex 를 주니 해결되었다!!!

2. react 라이브러리

   • 날씨 라이브러리 (moment.js, day.js, date-fns)
   • 스타일 라이브러리 (styled-component, emotion, scss)

3. 메모이제이션 (feat. 별코딩)

   • useMemo
   • useCallback

End of the day...

• 좋았던 점
  • 안풀려서 내내 심란했던 slick 문제를 해결!
    (처음엔 슬릭 문제인지, 컴포넌트 구성의 문제인지, 버전이 바뀌면서 태그가 바뀐건지... 갈피가 잡히지 않아서 공식문서와 블로그를 뒤지면서 이것 저것 시도해보다가 'slick-tract' 에 flex를 주니 잘 랜더링 되어서 스타일 상속의 방식으로 해결하였다!)
  • 막연했던 메모이제이션에 대해 정리하는 시간을 갖을 수 있어서 좋았다.
    아무튼간 별코딩 만세 만만세다....!!
• 보완할 점
  • 왓챠피디아 slick 버튼 문제 해결하기
  • 벨로그 작성 방식 방향성 다시 잡아보기