과제 체크포인트

배포링크

https://dev4n4.github.io/front_6th_chapter4-2

과제 요구사항

• 배포 후 url 제출

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

• SearchDialog 불필요한 연산 최적화

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

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

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

과제 셀프회고

나는 최적화에 뭔가 로망이 있던 사람이었다.. 학부생 때는 그래픽 파트였지만 모델링 최적화를 하려면 뭐 어떠어떤 기법을 써야한다 이런거에 특히 흥미를 가졌었는데 뭔가 내가 만든게 가볍게 돌아가는 걸 예전부터 좋아했던 거 같다. 근데 그걸 이번에 본업의 영역에서 글고 코드단에서 본격적으로 해보니까 너무 신기하고 재미있었다!!! 그리고 완전 유익했다 헤헤

위 사진은 이력서인데 전 회사에서 dnd-kit로 ui를 만들었던게 생각이 나서... 그때는 랜더링 최적화를 할 생각을 못했었어서 아마 지금 코드의 before 버전같지 않을까.. 싶다. 아 이력서... 뭔가 부끄럽다.. 그리고 남겨두고 온 내 코드도 부끄럽다 다시 가서 고쳐주고싶다 ㅜㅜ

기술적 성장

1~3주차 동안에 공부했던 hook들에 대해 복습하는 시간을 좀 가졌고 컴포넌트를 적절히 쪼개는 것 만으로도 최적화가 될 수 있다는 것이 놀라웠다. 그리고 생각보다 props가 최적화에 핵심적인 영향을 끼치는구나.. 라는 깨달음을 얻었고 (뭔가 "props가 변경되면 리랜더링이 트리거됨!!!!" 하고 이론으로는 달달 알았는데... 실전에서 와닿지가 않았었다. 이제는 완전 와닿음..) 그래서 zustand를 썼는데 이렇게도 랜더링 최적화를 해볼 수 있다는 것이 너무 신기했다.

코드 품질

뭔가 이게 좋은건지는 모르겠는데 전체적으로 zustand를 사용해서 통일감 있게 최적화를 진행한 것이 사실 좀 마음에 들고 컴포넌트를 적절히 쪼개서 메모이제이션 해준 것 같아서 마음에 든다.

약간 아쉬운 부분은 전반적으로 잘 최적화 되어 보이지만 가끔 자잘하게 한두번씩 리랜더링이 발생하는데... 왜 그러는지 잘 모르겠다 ㅠㅠ

학습 효과 분석

일단 실무에서 이제 profiler랑 react devtools를 적극 활용하면서 최적화를 신경쓰게 될 것 같다. 새로운 시야가 열린 느낌이라 좋다!! 추가적으로 필요한 학습은 음... react를 좀 더 잘 활용할 수 있게 된다면 좋을 것 같다.. 근데 사실 공식문서 읽기는 종종 시도하는데 매번 이론만 달달 외운 상태로 적용은 못하는 내 모습을 발견한다... 어떻게 학습하는게 체화가 빠를지 고민이 된다...

과제 피드백

이번주 과제 완전 유익하고 재밌었어요!!! 개인적으로 제가 최적화 하는 것에 관심이 있었는데 어떻게 해야할지는 잘 몰랐는데요. 랜더링 최적화 하는 방법을 아주 친절하게 떠먹여준 느낌이에요! 너무 좋았습니당!

리뷰 받고 싶은 내용

• 학습법에 대한 질문입니다.. React의 Hook에 대해서 공부를 할 때 저는 "일단 공식문서를 읽어서 숙지하고 내가 우연히 나중에 그 hook을 보게 된다면 도움이 되겠거니..." 식으로 막연히 문서를 읽기만 하는 공부를 했었거든요. 근데 항해를 하면서 이 공부 방법이 별로 도움이 되지 않는다는 것을 깨달았어요 ㅠ... 이론만 다다다 알고 적용은 못하는 사람이 되더라고요.. 그렇다고 해도 적용을 해보면서 hook을 공부해보려 하니 그 hook만을 위한 사이드프로젝트를 만들어서 써보기라도 해야하나 싶고 근데 이것도 새로운 hook이면 그 hook에 대해 이해도가 낮은 사람이 어떻게 그걸 잘 사용하는 프로젝트를 설계해서 써볼 수 있게 하나 싶기도 하고 그래요. React 문서에 대해 어떤식으로 실전형 공부를 해볼 수 있을까요? 어떻게 공부하는 것이 빠른 체화를 노릴 수 있고 효과적일까요?