1. Slider 를 구현할 때 유저 window 의 정보를 받아와야한다 (Framer Motion)

• window.innerWidth, window.outerWidth 메서드 사용
• 횡 애니메이션의 등장, 퇴장 애니메이션 구현을 위해

2. onExitComplete Prop of AnimatePresence Components

• Exit 애니메이션이 끝난 후에 이벤트 함수를 실행합니다.
• State 를 하나 선언하여 AnimatePresence 컴포넌트의 Exit 이 종료된 후에 애니메이션이 실행되게 설정해서, 애니메이션이 중첩될 수 있는 오류를 해결합니다.
• 코드 조각

<Slider>
  <AnimatePresence onExitComplete={toggleLeaving}>
    <Row
      variants={rowVariants}
      initial="hidden"
      animate="visible"
      exit="exit"
      transition={{ type: "tween", duration: 1 }}
      key={index}
    >
      {[1, 2, 3, 4, 5, 6].map((i) => (
        <Box key={i}>{i}</Box>
      ))}
    </Row>
  </AnimatePresence>
</Slider>

3. PageNation 구현

• 예시 코드조각

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18];

const offset = 6;
let page = 0;

arr.slice(offset * page, offset * page + offset);

page = 1;

arr.slice(offset * page, offset * page + offset);

page = 2;

arr.slice(offset * page, offset * page + offset);

• 근래에 알고리즘, 개발공부를 하면서 위와 같이 논리 와 수식 으로 코드를 더 간결하고 재사용 쉽게 작성된 코드들을 접할 기회가 많이 있었습니다.

• 우선 선배 개발자분들께서 논리 와 수식 을 코딩에 어떻게 사용하셨는지 많이 배우고 익힌 후에, 저도 새로운 좋은 코드를 작성할 수 있는 사람이 되도록 노력하겠습니다.