과제 체크포인트

과제 요구사항

• 배포 후 url 제출

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

• SearchDialog 불필요한 연산 최적화

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

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

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

리액트 프로젝트 성능 개선

url: https://front-4th-chapter4-2-advanced-xi.vercel.app/

과제 셀프회고

와...... 드디어 길고 길었던 시간이 지나 마지막 항해 과제를 진행하게 되었습니다. 이번 과제는 특히나 지난 과제에서 배웠던 내용들을 복기해보고 적용해볼 수 있었던 과제였던 것 같습니다. 이번에도 마찬가지로.. 시간 부족과 실력 부족으로 100% 마음에 드는 결과는 아니었지만, 그래도 성능 최적화에 대해 제대로 배워볼 수 있는 기회여서 좋았던 것 같습니다. 성능 최적화는 사실 예방하는 게 더 중요한게 아닐까? 하는 생각이 들었습니다. 성능 최적화가 하나의 큰 주제였지만, 처음부터 이 부분에 대해 충분히 고민하고 작업을 진행 하는 것이 훨씬 더 효율적이라는 걸 느꼈습니다. 또한, 이번 과제를 하며 리액트와 조금은 친해졌다는 걸 느꼈습니다. 익숙한 Vue에 비하면 아직은 어렵고 헤매긴 하지만, 그래도 처음 항해 과제를 진행했을 때에 비하면 많이 성장한 것 같아서 좋습니다. 여기에서 멈추지 않고 조금 더 친해지기 위해 노력해볼 생각입니다!

기술적 성장

• 코드 레벨의 성능 최적화에 대해 배우고, 최적화 기법을 적용해 보는 방법을 배웠습니다.
• 성능 개선을 하기 위해서 성능 측정 도구를 사용하는 방법과 지표(리렌더링 여부, API 응답 시간 등)를 분석하는 방법을 배웠습니다. 이런 도구들을 통해 문제를 발견하고 해결할 수 있는 자신감을 조금은.. 얻었습니다..!
• 리액트에서 불필요한 리렌더링을 방지하는 것이 얼마나 중요한지 깨닫게 되었습니다. 이를 통해 React.memo, useMemo, useCallback 등의 훅을 적극 활용하여 불필요한 렌더링을 방지했습니다.
• API 호출 최적화는 정말 중요한 부분으로, Promise.all을 활용해 여러 개의 API를 동시에 호출하여 응답 시간을 단축시킬 수 있었습니다. 이런 부분은 프로젝트 후반부에서 개선을 진행하는 것이 아니라 사실 코드를 작성하며 미리 예방하는 것이 효율적이라는 것을 배웠습니다.
• 이번 과제에서 웹 워커를 활용하여 백그라운드 스레드에서 무거운 연산 작업을 처리할 수 있다는 것을 배웠습니다. UI 스레드와 분리된 스레드에서 작업을 처리함으로써, 사용자 경험을 개선하고 UI의 응답성을 높이는 데 큰 도움이 되는 기술임을 배웠습니다. 추후 추가로 학습하여 잘 사용해보고 싶습니다.

코드 품질

• 마지막 과제이다보니 욕심에 이거 저거 적용해보고 시도해보다보니 컴포넌트와 코드가 조금 복잡해진 것 같아 아쉽습니다. 시간 부족으로 인하여 완벽하게 마무리하지 못한 것 같아 시간이 될 때 완성을 시켜봐야할 것 같습니다.
• 무한 스크롤 페이지네이션을 구현하고 싶었지만 (시간 부족으로 인하여 작업이 부족해) 매끄럽게 동작하지 않고 있는 것 같습니다. 이 부분은 보라 코치님께서 말씀하셨던 가상 스크롤링 기법을 적용하여, 화면에 보이는 항목만 렌더링하도록 최적화하는 작업을 추가로 진행해볼 계획입니다.

학습 효과 분석

• 성능 최적화는 실무에서 정말 중요한 부분이라고 느꼈습니다. 실무에서 성능 저하가 발생하면 사용자 경험이 급격히 나빠지기 때문에, 초기 설계에서부터 성능을 고려해야 한다는 것을 확실히 배웠습니다. 특히 리렌더링이나 불필요한 API 호출은 성능에 직결되므로 이를 예방하는 습관이 중요하다는 걸 알게 되었습니다
• 보고서 작성의 중요성을 깨달았습니다! 기술적 결과물뿐만 아니라, 그 과정을 명확하게 보고서로 작성하는 것의 중요성도 깨달았습니다. 기술적인 성과를 제대로 전달하고, 문제를 해결하기 위한 과정과 지표를 공유하는 능력을 키우고 싶다는 생각이 들었습니다.

과제 피드백

• 성능 최적화를 필요한 부분을 확실하게 명시해주어서 해당 부분에만 몰입해서 할 수 있는 부분이 좋았습니다.
• 10주간 항해에서 해왔던 과제에서 배웠던 내용들을 적용해볼 수 있었던 과제라고 느껴졌습니다. 다만 과제를 두가지를 진행하느라 조금 힘들었습니다.

리뷰 받고 싶은 내용

• 이번에 처음으로 Web worker를 적용해보게 되었습니다. 검색 결과 필터링 부분에 적용해봤는데, 이런식으로 사용해도 되는지 알고 싶습니다. ▶코드 보러가기
• 성능 최적화 과제를 진행하다 보니 끝도 없는 것처럼 느껴졌습니다.(공을 들인만큼 나아지는 것 같아서?) 보통 멘토님께서는 어떤 지표와 목표를 설정하고 성능 최적화를 진행하시는 지 궁금합니다..!

그 동안 멘토링과 과제 리뷰해주셔서 정말 감사했습니다 :) ! 덕분에 정말 정말 많이 배웠습니다.