과제 체크포인트

과제 요구사항

https://jun17183.github.io/front_6th_chapter4-2/

• 배포 후 url 제출

• API 호출 최적화(Promise.all 이해)

• SearchDialog 불필요한 연산 최적화

• SearchDialog 불필요한 리렌더링 최적화

• 시간표 블록 드래그시 렌더링 최적화

• 시간표 블록 드롭시 렌더링 최적화

과제 셀프회고

기술적 성장

리액트가 낯설었기에 챕터 1에서 배운 useMemo나 useCallback 같은 훅들을 배워서 좋았습니다. 하지만 언제 사용하면 좋을지는 정확히 몰랐었는데요, 이번에 Profiler를 사용하며 리렌더링 구간을 파악하고 이를 메모이제이션 하며 성능을 향상시키는 과정이 되게 뜻깊었습니다. 또한 매번 새로운 객체나 함수를 생성하여 리렌더링 되는 부분, state 관리에 따른 리렌더링 등 원인을 파악하고 해결하는 과정을 거치며 재미도 있었거니와 리액트에 대한 자신감도 생기게 되었습니다.

코드 품질

const DraggableSchedule = memo(({
 id,
 data,
 bg,
 onDeleteButtonClick
}: { id: string; data: Schedule } & ComponentProps<typeof Box> & {
  onDeleteButtonClick: () => void
}) => {
  const { day, range, room, lecture } = data;
  const { attributes, setNodeRef, listeners, transform } = useDraggable({ id });
  const leftIndex = DAY_LABELS.indexOf(day as typeof DAY_LABELS[number]);
  const topIndex = range[0] - 1;
  const size = range.length;

  return (
    <Popover>
      <PopoverTrigger>
        <Box
          position="absolute"
          left={`${120 + (CellSize.WIDTH * leftIndex) + 1}px`}
          top={`${40 + (topIndex * CellSize.HEIGHT + 1)}px`}
          width={(CellSize.WIDTH - 1) + "px"}
          height={(CellSize.HEIGHT * size - 1) + "px"}
          bg={bg}
          p={1}
          boxSizing="border-box"
          cursor="pointer"
          ref={setNodeRef}
          transform={CSS.Translate.toString(transform)}
          {...listeners}
          {...attributes}
        >
          <span style={{ fontSize: '14px', fontWeight: 'bold' }}>{lecture.title}</span>
          <span style={{ fontSize: '12px' }}>{room}</span>
        </Box>
      </PopoverTrigger>
      <PopoverContent onClick={event => event.stopPropagation()}>
        <PopoverArrow/>
        <PopoverCloseButton/>
        <PopoverBody>
          <span>강의를 삭제하시겠습니까?</span>
          <Button colorScheme="red" size="xs" onClick={onDeleteButtonClick}>
            삭제
          </Button>
        </PopoverBody>
      </PopoverContent>
    </Popover>
  );
}, (prevProps, nextProps) => {
  const prevData = prevProps.data;
  const nextData = nextProps.data;

  const prevLeftIndex = DAY_LABELS.indexOf(prevData.day as typeof DAY_LABELS[number]);
  const nextLeftIndex = DAY_LABELS.indexOf(nextData.day as typeof DAY_LABELS[number]);
  const prevTopIndex = prevData.range[0] - 1;
  const nextTopIndex = nextData.range[0] - 1;
  
  return prevData.lecture.title === nextData.lecture.title &&
    prevLeftIndex === nextLeftIndex &&
    prevTopIndex === nextTopIndex;
});

드래그 앤 드롭 시 해당 테이블에서만 리렌더링, 테이블 내에서도 모든 td가 렌더링 되는 것이 아닌 스케줄이 이동하는 영역만 리렌더링 되도록 수정은 했습니다. 다만 자꾸 Popover 부분이 쓸데없이 리렌더링 되는 현상이 있는데, 이 부분도 잡았으면 어떨까 생각합니다.

학습 효과 분석

1. 메모이제이션 함수의 적절한 사용처
2. 리렌더링 발생 지점 파악
3. 리렌더링 문제 해결
4. 실무에서 마구잡이로 만들던 컴포넌트에 적용 가능

리뷰 받고 싶은 내용

마지막 주차이기에 과제에 관한 질문이 아닌 다른 질문을 남기게 되었습니다. 이제 이력서를 수정하고 여러 회사에 지원을 하게 될 텐데, 항해를 하는 동안 프론트엔드에 대해 많은 것을 배웠지만 사실 제 이력은 7개월짜리 React 프로젝트를 경험한 것을 제외하면 대부분 레거시한 코드에서 게시판 찍어내기가 거의 전부입니다. 항해에서 배운 내용을 어필할 방법은 면접 밖에 없을까요? (사이드 프로젝트나 블로그는 시간이 부족한 거 같습니다.) 만약 이력서에 기존 레거시한 환경에서의 이력과 항해에서의 학습을 연결 짓는다면 어떤 식으로 작성할 수 있을까요?