[파이어베이스] 징챠 너 그러케 할거닁?! / 리액트네이티브로 firebase 연결하면서 onSnapshot으로 todoList 불러오는데 계속 빈배열 뜰때

 

 

오늘의 에러이유 : 빠가사리

 

- 문제 : 처음에 useEffect 안에 파베 제공 문법으로 onSnapshot 통해 todos를 불러오려고 하는데, 자꾸 빈배열이 찍히는 현상이 발생했다. firestore에도 데이터들은 문제없이 들어가는데 자꾸 'todos'를 찍어보면 빈배열( [ ] ) 이 뜨는 현상 발생

쿼리문도, onSnapshot 안의 내용도 문제없는걸 (심지어 튜터님꺼 다시 복붙도 하길 수차례, 파베 프로젝트까지 다시팜) 확인했는데

useEffect(() => {
    const q = query(
      collection(dbService, "todos"),
      orderBy("createdAt", "desc")
    );

    onSnapshot(q, (snapshot) => {
      const newTodos = snapshot.docs.map((doc) => {
        const newTodo = {
          id: doc.id,
          ...doc.data(), // doc.data() : { text, createdAt, ...  }
        };
        return newTodo;
      });
      setTodos(newTodos);
    });

    const getCategory = async () => {
      // Read (단일 데이터 읽기)
      const snapshot = await getDoc(
        doc(dbService, "category", "currentCategory")
      );
      console.log("스냅샷.id:", snapshot.id); //결과값 : currentCategory
      console.log("스냅샷.data:", snapshot.data()); //결과값 : {"category": "js"}
      setCate(snapshot.data().category);
      console.log("cate:", cate);
    };
    getCategory();
    // return unSubscribe;
  }, []);

 

아무튼 계속 안찍혀!!!!!!!!!

 

 

홀리몰리 과카몰리

암 고럼 오늘도 너가 나에게 호락호락할리가 없지 코딩아

 

튜터님과 연구를 하면서 이것저것 건드려봐도, 잘 해결이 안되서 

같은팀에 엄청 잘하시는 분께 여쭈어보니 팀원분도 어제 비슷한 에러로 애를 먹었는데, orderBy를 지워보니 갑자기 문제가 해결되었다는

결정적인 단서를 얻게 되었다

 

order...By .....?!?!?!

 

반신반의하는 마음으로 orderBy를 지워보니 리스트가 바로 뙇!!!!!!! 너무 잘 불러와진것이 아닌가

기쁜 콧바람을 자제하면서 원인을 파악하니,

 

에러의 원인

내 빡대가리 = add하는 부분에 createAt에 'd' 빠트림

 

const addTodo = async () => {
    const newTodo = {
      // id: Date.now(),
      text,
      isDone: false,
      isEdit: false,
      cate,
      createdAt: Date.now(),
    };
    // addDoc은 document(dbService,"todos","콜랙션id~~")
    // 요렇게 안하고, collection만지정해도된다.
    // document로 하면 특정 다큐먼트의 id까지 지정해줘야하는데,
    // collection은 자동으로 랜덤으로 지정해준다.
    await addDoc(collection(dbService, "todos"), newTodo);
    // 배열로 [] 감싸주는거 잊지말긔!!!!!!!!!!!
    // setTodos([...todos, newTodo]);
    setText("");
  };

 

당연히 쿼리문에서는 'createdAt'으로 내림차순을 요청하고, db에는 'createAt' 로 저장을 하니 안불러와지지

 

it's human error

my brain error

my finger error

 

절대 안잊을 오늘의 오류일지 끝