내배캠 9주차 회고

1) 프로젝트

• 프로젝트 명: Come it(커밋)

프로젝트 상세내용은 깃헙 리드미 참고
https://github.com/setItUpLater/comeit

2) 느낀점

• 프로젝트를 시작할 때 사용할 공통 컴포넌트를 정해서 각자만들고 진행해서 효율적으로 코드를 작성할 수 있어 좋은 경험이였다.

• 다시한번 기획에 중요성을 느끼고 마감시간을 정해서 지켜야 한다.

---

KPT 회고

KEEP

• 충분한 회의를 통한 프로젝트 계획과 설계
• 꼼꼼한 기록과 점검 (진행 상황, 에러 내용)
• 공통 컴포넌트 먼저 만들고 기능 작업 들어간 점

PROBLEM(troubleshooting)

• 설계를 꼼꼼하게 하지 못해서 코드를 깔끔하게 작성하지 못한 부분이 아쉬움
• 공용 컴포넌트를 범용성이 좋고 사용하기 편하게 만드는 것이 어려웠음
• 코드 작성에 있어서 재사용성, 모듈화 등 너무 많은걸 고려해 제작 일정이 늦춰짐

• 멀티플 슬라이드의 자동 이동 기능을 라이브러리 도움 없이 구현하려 했었다.
  그러나 들어오는 데이터가 매번 달라지는 이번 프로젝트 특성을 고려하며, 슬라이드를 이동시키는 방법을 찾기 힘들었다.

• 해결 방안 : 구글링을 통해 싱글 슬라이드의 구현 방법을 알았으니 예시 코드를 찾지 않고 직접 활용해서 처음부터 코드를 작성했다.

1. 싱글 슬라이드에서 복사하는 방법을 차용해서 보여지는 컨텐츠 수 만큼 복사해서 뒤에 붙여 넣어 주었다.

const cloneContents = [...contents];
  if (auto && overContents) {
    for (let i = 0; i < showContentNum; i += 1) {
      cloneContents.push(contents[i]);
    }
  }

2. 복사했던 컨텐츠의 마지막 부분이 오게 되었을 때는 첫 화면과 같은 상태이므로 인터벌을 종료 시키고 제일 처음 위치로 애니메이션 없이 이동 시킨 후 다시 처음부터 인터벌로 컨텐츠가 이동하게 만들었다.

const autoplay = ({ duration }) => {
    interval = setInterval(autoplayIterator, duration);
  };

const autoplayIterator = () => {
    setCurrentSlide(prev => {
      const newSlide = prev + 1;
      slideRef.current.style.transition = "all 0.5s ease-in-out";
      slideRef.current.style.transform = `translateX(-${newSlide * (contentWidth + space)}px)`;
      if (newSlide > lastSlide) {
        clearInterval(interval);
        slideRef.current.style.transition = "";
        slideRef.current.style.transform = `translateX(-0px)`;
        setCurrentSlide(0);
        autoplay({ duration: 2000 });
      }
      return newSlide;
    });
  };
  useMount(() => {
    if (type === "intro" && overContents) {
      autoplay({ duration: 2000 });
    }
  });

TRY

• 설계 단계에 신경을 더 써서 코드의 가독성과 심미성을 챙겨야겠다.
• 모든코드를 재사용성을 고려할 필요는 없으니 일정, 상황을 고려해 코드를 작성해야겠다.