2024/11/26 2

트러블 슈팅: 페이지 새로고침/이동 시 데이터 유지하기🌟

1.  문제 발생❓유저가 입력을 진행하던 중 실수로 새로고침을 하거나 뒤로가기를 했을 때 모든 입력 데이터가 초기화되어 supabase에 데이터 값이 null값으로 들어가는 문제가 발생했습니다.  const OneTimeContent = () => { const [formData, setFormData] = useState({ main_category_id: 0, sub_category_id: 0, user_id: userId, egg_pop_name: "", // ... 기타 초기값 });}      2.  원인 추론 🔎React의 state는 페이지 새로고침 시 모든 상태가 초기화 됨      3.  해결 과정 📋1) localStorage를 활용한 데이터 임시 저장 로직 구현/..

팀프로젝트 2024.11.26

트러블 슈팅: API 중복 호출 방지🌟

1.  문제 발생❓에그팝, 에그클럽, 에그데이 생성 버튼을 여러번 누르면 생성된 상세페이지로 가기전에 여러개의 모임생성 완료 알랏창이 뜨면서 모임이 여러개 생기는 문제점이 있었습니다( 모임 생성 버튼 연속 클릭 시 중복 API 호출 발생 ).  모임 여러개 생기는 오류 영상      2.  원인 추론 🔎API 호출 제한 로직의 부재버튼 클릭 이벤트에 쓰로틀링(Throttling) 미적용     3.  해결 과정 📋1. useTrottle 커스텀 훅 구현  2. 모임 생성 API 호출 간격 300ms, 모임생성 다음단계 버튼은 20초으로 useTrottle 커스텀 훅 적용 Q. 모임생성과 모임생성 다음 버튼 시간을 다르게 준 이유는?데이터베이스 작업(모임 생성): 20초 쓰로틀링 - Supabase i..

팀프로젝트 2024.11.26