과제 체크포인트

과제 요구사항

• 배포 후 url 제출 https://yuhyeon99.github.io/front_6th_chapter4-2

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

• SearchDialog 불필요한 연산 최적화

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

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

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

과제 셀프회고

브라우저 성능 최적화는 특정 상황에서 중요한 개선 작업이라 알고있습니다. 실무에서도 종종 겪는 성능 문제를 해결하기 위해서는 실제로 어느 부분에서 성능 문제가 발생하는 지 파악하는게 중요하다고 생각합니다. 이번 주차 과제에서는 그런 관점에서 많은 것을 얻어갈 수 있는 챕터였습니다.

기술적 성장

• 리액트 프로파일링 활용: React Profiler를 사용하여 애플리케이션의 렌더링 병목 현상을 직접 찾아내고, 이를 기반으로 최적화 작업을 진행했습니다. 특히 SearchDialog와 시간표 블록의 드래그 앤 드롭 기능에서 불필요한 리렌더링이 발생하는 것을 확인하고 개선할 수 있었습니다.
• 성능 최적화 기법 적용:
  • useMemo와 useCallback을 사용하여 복잡한 연산 결과와 함수를 메모이제이션함으로써, visibleLectures와 allMajors 같은 데이터의 불필요한 재생성을 방지했습니다.
  • 필터링 로직을 메모이제이션하여 페이지 스크롤 시 불필요한 재검색이 발생하는 문제를 해결했습니다.
• API 호출 최적화: fetchAllLectures 함수에 캐싱 로직을 추가하여, 중복되는 API 호출을 최소화하고 데이터 로딩 속도를 개선했습니다.

코드 품질

• 렌더링 성능 최적화:
  • SearchDialog 컴포넌트의 렌더링 성능을 최적화하여 많은 양의 데이터를 다룰 때에도 부드러운 사용자 경험을 제공할 수 있도록 개선했습니다.
  • 시간표 블록을 드래그할 때 발생하는 렌더링을 최적화하여 드래그하는 동안의 성능 저하를 최소화했습니다.
• 관심사 분리 및 리팩토링:
  • API 호출부에 캐싱 로직을 추가하여 데이터 fetching 전략을 개선했습니다.

학습 효과 분석

• 성능 병목 현상 파악의 중요성: 이번 과제를 통해 가장 크게 배운 점은 막연한 추측이 아닌 프로파일링 도구를 통해 정확한 성능 병목 지점을 파악하는 것의 중요성입니다. 이 덕분에 효율적인 최적화 방향을 설정할 수 있었습니다.
• 리액트 훅의 깊은 이해: useMemo, useCallback, useRef와 같은 리액트 훅을 성능 최적화 관점에서 깊이 있게 사용해보면서 각 훅의 정확한 사용법과 주의점에 대해 다시 한번 학습할 수 있었습니다.
• 실무 적용 가능성: 이번에 학습하고 적용한 성능 최적화 기법들은 실무에서 복잡한 애플리케이션을 개발할 때 발생할 수 있는 다양한 성능 문제를 해결하는 데 직접적으로 도움이 될 것이라고 생각합니다. 특히 데이터가 많은 리스트나 인터랙티브한 UI를 구현할 때 유용하게 사용할 수 있을 것입니다.

과제 피드백

• 좋았던 부분: 성능 문제를 직접 발견하고 다양한 방법을 시도하며 해결해나가는 과정이 재밌었습니다. 이론으로만 알고 있던 개념들을 실제 코드에 적용하고 성능이 개선되는 것을 눈으로 확인하는 경험이 좋았습니다.

리뷰 받고 싶은 내용

• SearchDialog 메모이제이션: SearchDialog 컴포넌트에서 useMemo를 사용하여 필터링된 강의 목록(visibleLectures)을 메모이제이션했습니다. 이와 같은 메모이제이션 전략의 장단점에 대해서 궁금합니다.