⛔️ 현재 페이지는 삭제 예정입니다.

개발 이야기에 더 많은 개발 기록들이 담겨있습니다. 👉🏻 yoon-ho.com/portfolio/projects/wafflecard/story

<aside> 💡 개발위키는 아래 링크를 확인해주세요! 👉🏻 yoon-ho.com/portfolio/projects/wafflecard/develop

</aside>

목차

🚀 리팩토링 및 성능 개선

<aside> 🎯 리팩토링에서 가장 큰 목표는 전역 상태를 분리하고 코드의 복잡성을 개선하며 효율적인 네트워크 요청을 하도록 하여 성능, 사용성, 효율적인 구조, 코드를 개선하는 것입니다.

</aside>

😱 와플카드 리스트의 비효율성

기존의 구조는 홈페이지 컴포넌트에서 와플카드 리스트 상태를 가지고 탭이 바뀔때마다 네트워크 요청을 한 뒤 와플카드 리스트 상태를 업데이트하고 자식에게 Prop으로 전달하는 방식이었습니다.

해당 구조의 문제점은

1. 복잡한 prop 드릴링으로 컴포넌트간에 구조가 복잡합니다.
2. 관심사 분리가 되어있지 않습니다. 즉, 컴포넌트에서 상태 관리와 네트워크 요청을 모두 관리하며 코드가 지전분합니다.
3. 탭이 바뀔 때마다 혹은 페이지를 벗어나서 돌아올 때마다 매번 비효율적인 네트워크 요청합니다.