[2팀 이정민] Chapter 4-2. 코드 관점의 성능 최적화

[LEE-jm96]

과제 체크포인트

과제 요구사항

배포링크

https://lee-jm96.github.io/front_7th_chapter4-2/

• 배포 후 url 제출

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

• SearchDialog 불필요한 연산 최적화

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

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

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

과제 셀프회고

기술적 성장

React.memo와 useMemo/useCallback을 사용하여 컴포넌트 메모이제이션과 함수/값 메모이제이션을 적절히 조합해 불필요한 리렌더링을 방지하는 방법을 학습했습니다. 또 Context 최적화를 진행하였습니다. schedulesMap 전체를 Context에 포함시키지 않고, 선택적 업데이트 함수(updateTableSchedules)를 제공하여 특정 테이블만 업데이트하도록 최적화했습니다.

코드 품질

React.memo의 props 비교와 실제 렌더링 최적화 효과를 프로파일링으로 검증하는 과정이 중요하다는 것을 배웠습니다.

학습 효과 분석

Context API를 사용할 때 큰 객체를 포함하면 모든 구독자가 리렌더링되는 문제와 해결 방법을 공부할 수 있었습니다.

과제 피드백

실제 성능 문제를 직접 경험하고 해결하는 과정이 학습에 도움이 되었습니다. 또 React DevTools Profiler를 사용하여 최적화 효과를 시각적으로 확인할 수 있어 이해가 쉬웠습니다.

리뷰 받고 싶은 내용

10주동안 정말 고생 많으셨습니다. 테스트코드 과제를 하던게 엊그제 같은데 어느덧 모든 과제가 끝이 났네요!! 사실 초반주차 과제를 잠도 안자고 가장 열심히 했던 것 같습니다 ㅎㅠㅠ 테스트 코드 담당 코치님이 오프 코치님이셨는데 제 마지막 과제 피드백도 오프 코치님이신게 뭉클하네요 ㅋㅋ.. 저희 과정은 끝이 나지만 또 좋은 기회에 뵐 수 있을 것이라 생각합니다. 그 동안 정말 고생 많으셨습니다!