231107

Swiper

• 캐러셀을 만들 일이 있어서 Swiper를 사용하려고 했다.
  • 기존에 react/swiper가 존재했으나, 사라질 수 있으니, Web-Component로 만들어서 사용을 권장했다.
  • 해당 내용을 참고하다가, 동료분이 구현한 Swiper가 있어서 인용했다.

// SwiperContainer.tsx
import { Children, useEffect, useRef } from 'react';
import { SwiperRef } from 'swiper';
import { register } from 'swiper/element';

interface SwiperContainerProps {
  on: any;
  children: React.ReactNode;
}

export const SwiperContainer: React.FC<SwiperContainerProps> = ({
  children,
  ...swiperOptions
}) => {
  console.log('swiperOptions', swiperOptions);
  const swiperRef = useRef<SwiperRef>(null);

  useEffect(() => {
    register();
    if (!swiperRef.current) return;
    const swiperEl = swiperRef.current;

    const swiperParams = {
      ...swiperOptions,
    };

    // now we need to assign all parameters to Swiper element
    Object.assign(swiperEl, swiperParams);

    // and now initialize it
    swiperEl.initialize();
  }, [swiperOptions]);

  return (
    <swiper-container ref={swiperRef} init={false}>
      {Children.map(children, (child) => {
        return <swiper-slide>{child}</swiper-slide>;
      })}
    </swiper-container>
  );
};

• 위와 같이 작성한 후, 캐러셀 할 요소를 SwiperWrapper로 감싸주었다.

  <SwiperContainer
    on={{
      init: onSwiperInit,
      slideChange: onSlideChange,
    }}
  >
    {children}
  </SwiperContainer>

React Children

• 동료분의 코드를 보다가 재밌는 부분을 발견했다.
• 마침 트위터에 ko.react 번역이 끝났다고 하여, ko.react를 읽어보았다.

Don't use Object as a type. The Object type actually means "any non-nullish value", so it is marginally better than unknown.

다음과 같은 에러가 났다.

Do's and Don'ts

• typescript에선, Object 대신 object를 사용하라고 권한다.

main을 제외한 branch 일괄 삭제하기

• git branch | grep -v "main" | xargs git branch -D

• git branch: 현재 로컬의 모든 브랜치 목록을 가져옵니다.

• grep -v "main": 'main'을 제외한 모든 라인을 선택합니다.

• xargs git branch -D: 선택된 각 브랜치에 대해 git branch -D 명령을 실행하여 강제 삭제합니다.