2026.01.15 (목)
과제 - ToDo App (with Firebase & MVVM)
Troubleshooting
[트러블슈팅] ToDo 삭제 기능의 UI-데이터베이스 불일치 해결
1️⃣. 문제 상황 (Problem)
새로운 ToDo 항목을 추가한 직후, 삭제 버튼을 눌렀을 때 다음과 같은 문제가 발생했다.
▪️ 현상 1
UI상에서는 해당 항목이 즉시 사라지지만, Firebase Firestore 실제 데이터는 삭제되지 않음.
▪️ 현상 2
앱을 새로고침하면 삭제했던 항목이 다시 나타남 (데이터가 살아있음).
▪️ 현상 3
터미널에 Invalid argument(s): A document path must be a non-empty string 에러 발생.
▪️ 특이사항
앱을 재시작한 후 방금 추가한 항목은 삭제가 되지만, 기존 데이터는 삭제가 안 되는 상황
2️⃣. 원인 분석 (Analysis)
문제의 핵심은 ID 값의 부재 및 불일치였다..!
▪️ 2.1 초기 코드의 흐름
UI/ViewModel
새로운 ToDo를 만들 때 id : '' (빈 문자열)로 설정하여 Repository로 전달.
Repository
Firebase에 저장할 때 문서 ID를 자동으로 생성하도록 처리.
결과
Firebase에는 고유 ID(예: tJjtv...)가 생성되어 저장되지만, 앱 내의 현재 상태(State)에 들어있는 데이터의 ID는 여전히 빈 문자열('')임.
▪️ 2.2 왜 삭제가 실패했을까?
삭제 함수(deleteToDo)를 호출할 때 리스트에 있는 ToDo의 id를 넘겨주는데, 방금 추가된 데이터는 ID가 빈 값이었다 Firebase는 "어떤 문서를 삭제할지 경로(ID)를 알려줘야 하는데 왜 빈 값을 주느냐" 하고 기존의 내용은 삭제 불가, 새로 추가한 항목만 삭제를 할 수 있게 되어버렸었다..
새로고침하면 기존 삭제했던 항목도 다시 뜸..
에러 로그 확인:
삭제 요청 아이디: 뒤에 아무것도 없거나 빈 값이 전달되어 Invalid argument 에러가 발생하는 것
3️⃣. 해결 방법 (Solution)
데이터가 생성되는 시점에 Firebase가 사용할 ID를 미리 생성하여 UI 상태와 DB를 일치시키는 방식으로 해결했다.
▪️ 해결 순서 1.
ViewModel에서 ID 미리 생성하기1!
추가할 데이터를 만들기 전, Firestore에서 제공하는 .doc().id를 사용하여 고유 ID를 미리 발급받는다
코드
// HomeViewModel.dart 수정
final docId = FirebaseFirestore.instance.collection('todos').doc().id; // ID 선제적 생성
final ToDoEntity newtodo = ToDoEntity(
id: docId, // 위에서 만든 ID를 주입
title: title,
description: description,
isFavorite: isFavorite,
isDone: false,
);▪️ 해결 순서 2.
Repository 저장 로직 동기화
Repository의 insert 함수에서 전달받은 엔티티의 ID를 그대로 Firebase의 문서 ID로 사용하도록 아이디값 바꿔치기
코드
// TodoRepository.dart 수정
Future<void> insert({required ToDoEntity todo}) async {
final collectionRef = firestore.collection('todos');
// todo.id(이미 발급된 ID)를 문서 경로로 지정하여 저장
await collectionRef.doc(todo.id).set(todo.toJson());
}▪️ 해결 순서 3 [결과 확인]
이렇게 수정하면 state = [newtodo, ...state]를 통해 UI에 반영되는 데이터도 이미 정확한 ID를 가지고 있게 되었다.
새로고침 후에 삭제를 눌러도 정확한 ID 경로를 찾아가 삭제가 될 수 있었다..! 😯
4️⃣. 학습 포인트 및 회고 (Retrospective)
▪️ ID 동기화의 중요성
App의 상태 데이터와 서버(Firebase)의 데이터는 언제나 같은 식별자(ID)를 공유해야 한다! ⚡️
▪️ 업데이트(Optimistic Update)의 주의점
UI에 먼저 반영할 때는 해당 데이터가 서버에 저장될 때와 완전히 동일한 형태를 갖추고 있어야 오류를 방지할 수 있다 ⚡️
▪️ 해결
서버에서 ID가 생성되기를 기다렸다가 UI를 갱신하는 방법도 있지만, 이번처럼 앱에서 ID를 미리 생성 하여 주입하는 방식으로 새로운 방법을 알았다..! ⚡️
