🔥 Trouble Shooting - UUNO 프로젝트 트러블슈팅 기록 무한 렌더링 문제

uuno 개발 중 마주했던 주요 이슈들과 해결 과정을 정리했습니다.

---

🔄 무한 렌더링 문제

📋 문제 상황

• last_activity 업데이트로 인한 무한 렌더링 발생
• 페이지 새로고침 시마다 새로운 세션이 생성됨

🔍 원인 분석

// 문제가 되던 코드
const updateActivity = () => {
  setLastActivity(Date.now());
  // 이 업데이트가 다시 렌더링을 트리거
};

✅ 해결 방법

• last_activity 관련 로직 완전 제거
• 세션 관리 로직 단순화
• 불필요한 상태 업데이트 제거

---

🗂️ 세션 관리 문제

📋 문제 상황

• 새로고침할 때마다 새로운 세션이 생성됨
• 세션 ID가 제대로 유지되지 않음

🔍 원인 분석

// 문제가 되던 코드
const initSession = async () => {
  // 매번 새로운 세션 생성
  const newSession = await createNewSession();
};

✅ 해결 방법

• 기존 세션 ID 확인 로직 추가
• 세션 유효성 검증 추가
• 세션 스토리지 대신 로컬 스토리지 사용

---

📸 이미지 다운로드 문제

📋 문제 상황

• Stage가 준비되기 전에 이미지 내보내기 시도
• 이미지 다운로드 실패

🔍 원인 분석

// 문제가 되던 코드
exportAsImage: async () => {
  // Stage 준비 상태 확인 없이 바로 실행
  return stageRef.current.toDataURL();
};

✅ 해결 방법

• Stage 준비 상태 확인 로직 추가
• 대기 시간 증가 (1초 → 2초)
• 에러 처리 개선

---

🏷️ 타입 에러 문제

📋 문제 상황

• CARD_INTERACTIONS 관련 타입 에러 발생
• 데이터베이스 상수와 타입 불일치

🔍 원인 분석

// 문제가 되던 코드
interface TABLES {
  // CARD_INTERACTIONS 타입 정의 누락
}

✅ 해결 방법

• 데이터베이스 상수 파일에 타입 정의 추가
• 인터페이스 확장
• 타입 일관성 유지

---

🎯 이벤트 리스너 문제

📋 문제 상황

• 불필요한 이벤트 리스너 등록
• 메모리 누수 가능성

🔍 원인 분석

// 문제가 되던 코드
useEffect(() => {
  window.addEventListener('mousemove', updateActivity);
  window.addEventListener('keydown', updateActivity);
  // 클린업 함수 없음
});

✅ 해결 방법

• 이벤트 리스너 최적화
• 클린업 함수 추가
• passive: true 옵션 사용

---

🎉 개선된 결과

• ✨ 세션 관리 안정화
• 🔄 무한 렌더링 문제 해결
• 📸 이미지 다운로드 기능 정상화
• 🏷️ 타입 시스템 안정화
• ⚡ 성능 최적화

이러한 트러블슈팅 과정을 통해 애플리케이션의 안정성과 사용자 경험이 크게 개선되었습니다.