[7팀 이현지] Chapter 4-2. 코드 관점의 성능 최적화

[Leehyunji0715]

과제 체크포인트

과제 요구사항

• 배포 후 url 제출
  배포링크

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

  • API 직렬호출 -> 병렬호출 (각 await 제거)

• SearchDialog 불필요한 연산 최적화

  • filteredLectures 계산 memoization

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

  • FormControl 필드들 컴포넌트 분리 및 memo처리

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

  • 시간표 Grid Item(Table Cell) memoization
  • 

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

  • 해당하는 Table만 리렌더링되도록 하기 Schedule Dnd Context

과제 셀프회고

기술적 성장

• 최적화는 정말 필요할때, 그리고 프로젝트가 어느정도 완성되었을 때 진행하는게 맞다고 생각했습니다. 어설픈 최적화를 하게되면 버그가 생기던지 아니면 제대로 성능개선이 안될 것 같다고 생각했습니다. 예전에 어떤 분이 말씀하신걸 들었는데, 최적화를해도 dependency를 비교하는 비용이 더 클 수 있다고 이야기 했었던 것 같은데, 다양한 상황을 고려해서 해야하지 않을까? 싶습니다!

코드 품질

학습 효과 분석

• Promise.all 로 API 병렬호출
• React Component memo 로 최적화하기
• React 값 useMemo로 최적화하기 + Dependency 까지 같이 업데이트
• React Profiler로 성능 및 리렌더링 체크 분석

과제 피드백

리뷰 받고 싶은 내용