[4팀 박지영] Chapter 4-2. 코드 관점의 성능 최적화

[youngH02]

과제 체크포인트

과제 요구사항

• 배포 후 url 제출
• API 호출 최적화(Promise.all 이해)
• SearchDialog 불필요한 연산 최적화
• SearchDialog 불필요한 리렌더링 최적화
• 시간표 블록 드래그시 렌더링 최적화
• 시간표 블록 드롭시 렌더링 최적화

과제 셀프회고

https://youngh02.github.io/front_7th_chapter4-2/

최적화의 중요성을 체감했지만 실제로 효과를 내려면 코드 흐름 전체를 파악해야만 어디를 건드릴지 보였다는 점이 제일 힘들었습니다. 캐싱, 가상 리스트, DnD 개선 모두 초기 구조 이해가 충분히 되어야 손댈 수 있어 앞으로도 먼저 전체 지도를 그리는 습관을 더 들이려고 합니다.
또 다양한 devTools 를 사용해볼 수 있는 기회여서, 앞으로도 유용하게 사용할 것 같았습니다.

기술적 성장

병렬 API 호출에 캐싱 레이어를 더해 동시 호출이 있더라도 실제 네트워크 비용은 한 번만 발생하도록 만들었습니다.

코드 품질

검색 필터/테이블/리스트를 역할마다 memoized 컴포넌트로 쪼개고, useAutoCallback으로 핸들러 참조가 바뀌지 않게 해 리렌더을 줄였습니다.

과제 피드백

주어진 JSON 데이터 규모가 꽤 커서 최적화 지점이 눈에 띄게 드러난 점이 좋았습니다.

리뷰 받고 싶은 내용

SearchDialog.tsx의 filteredLectures 계산을 현재는 전체 searchOptions를 의존성으로 묶어 useMemo로 감싸 두었는데, 더 세분화하거나 계산 비용을 줄일 수 있는 구조 개선이 있을지 궁금합니다.