코드잇 8주차 과제 회고

과제 설명

• 데이터를 Codeit Bootcamp API에서 가져와서 폴더 목록 별로 분류한다.

트러블 슈팅

• 문제: 데이터를 API에서 가져오는 것은 할 수 있는데, 각 폴더 목록 별로 해당 데이터를 분류하는 것에서 막혔다.
• 원인: 데이터 불러오는 hook과 받아온 데이터를 useEffect에 넣을 때 중복으로 try~catch를 사용했다. / FilterBar 하위에 넣어줄 Card 컴포넌트를 재사용 불가능하게 구현했다.
• 해결: 우선 데이터를 불러오는 hook에서 try~catch를 제거했다. / Card 컴포넌트를 재사용할 수 있게 변경하고, data를 prop으로 넘겨줬다.

const Card: React.FC<CardProps> = ({ data }) => {
  const [cardData, setCardData] = useState<Link[]>([]);
  const [popoverMenuOpen, setPopoverMenuOpen] = useState(false);

  useEffect(() => {
    setCardData(data);
  }, [data]);

  const handleClick = () => {
    setPopoverMenuOpen(true);
  };

  const handleClose = () => {
    setPopoverMenuOpen(false);
  };

배운 내용

• 확실히 협업을 하면서 prop을 넘겨주고, 컴포넌트를 재사용하는 방법을 알게 됐다. 그래서 이번 8주차 미션을 리팩토링하며 Header, Profile, Section, Card 컴포넌트 등을 재사용할 수 있게 바꿨다.
• 비동기로 데이터 통신을 할 땐 옵셔널 체이닝(?.) 등 처음에 null 값인 것을 고려해 코드를 짜야한다. 타입을 선언할 때도 마찬가지다.

KPT 회고

KEEP

• 리팩토링하면서 axiosInstance로 수정했다.
• 리액트 컴포넌트 구성 시 재사용성을 고려했다.

PROBLEM

• 기능 구현에 급급해 일단 문제를 해결하면 바로 다음 기능을 구현하는 식으로 코딩했다. 문제를 해결하고, 기능을 구현했더라도 왜 이렇게 동작하는지를 생각해야 한다.

TRY

• 데이터 초깃값을 상수로 설정해두면 헷갈리지 않는다.

const mapFormatDate: (data: Link[]) => { name: string | number; id: string | number }[] = data => {
  const formattedFolder = data.map(({ name, id }) => ({ name, id }));
  return [DEFAULT_FOLDER, ...formattedFolder];
};

소감

솔직히 협업 후 2주 만에 미션을 리팩토링하려고 하니 내 코드가 보기 힘들었다. 그래도 이를 견디고 못했던 기능을 구현하고, 막혔던 문제를 풀어낸 내 자신이 뿌듯하다.
특히, 리액트 핵심이라고 할 수 있는 컴포넌트 재사용을 할 수 있게 돼 다행이다.
진짜 협업을 하면서 개인미션보다 더 좋은 코드를 쓰기 위해 고민하면서 많이 성장했다. 중급 협업도 기대된다.