JHeeJinDev 님의 상세페이지[6팀 장희진] Chapter 4-2 코드 관점의 성능 최적화

과제 체크포인트

과제 요구사항

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

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

  • SearchDialog 불필요한 연산 최적화

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

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

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

과제 셀프회고

기술적 성장

코드 품질

학습 효과 분석

과제 피드백

리뷰 받고 싶은 내용

과제 피드백

수고했어요 희진! 마지막 과제는 React 애플리케이션에서 실제 성능 병목 지점을 찾고 최적화하는 것이 목표였습니다. 성능 최적화라는 주제 자체가 쉽지 않았을 텐데 정말 고생하셨어요.

이번 과제를 하기 위해서는 API 호출에서 중복 요청을 방지하거나 캐싱을 구현하는 방식, useMemo와 useCallback으로 불필요한 재계산을 방지하는 방법, React.memo로 컴포넌트 리렌더링을 최적화하는 기법들이 필요하다는 것을 배웠을 거예요. 그리고 이런 것들이 우리가 그전에 사용했던 바로 TanStack Query나 Zustand 같은 라이브러리들이 내부적으로 어떻게 최적화를 제공하는지에 대한 원리이기도 합니다.

드래그나 스크롤 같은 연속적인 이벤트, 실시간 애니메이션이나 짧은 시간 내 많은 이벤트가 발생하는 상황에서 어떻게 성능 문제가 생기는지를 이해하는 것도 중요한 관점이었어요. 이런 경우에 디바운싱이나 쓰로틀링, 메모이제이션이 어떻게 도움이 되는지 이해하는 것이 핵심이죠.

이번 과제를 통해 가장 중요하게 느꼈으면 하는 건 특정한 성능 최적화 방법보다는 어디서 병목이 생기는지를 이해하고 찾는 것이 중요하구나 하는 것입니다. 성능최적화의 경험을 중요시 여기는건 그 해결방법이 어렵기 때문이 아니라 성능최적화가 필요한 순간까지 도달해본 그 자체와 그 과정에서 어디서 병목이 생겼는지를 분석하는 것이 큰 가치가 있기 때문이에요

그렇기에 성능 최적화는 어떻게 하는지 방법보다도 어디서 병목이 생기는지를 이해하고 찾는 게 더 큰 실력이라고 생각해요. 심심할 때마다 어디가 병목이 될까 등을 한 번씩 고민해보다 보면 이러한 경험이 쌓여 나중에 복잡한 성능 문제를 만났을 때 어디서부터 접근할지 감이 생기는 거라 생각해요.

지난 10주간 너무 너무 수고 많았어요! 이번 경험들이 앞으로 개발하는 데 있어서 나 스스로 충분히 잘하려고 노력할 수 있구나, 해냈구나 하는 마음으로 새로운 것에 도전하고 성장하는 데 있어 더 쉽게 도전할 수 있게 되는 계기가 되기를 바랍니다. 화이팅입니다!