2023.12.28 TIL Firebase 한 컬렉션에 여러 문서가 있을 때 데이터 불러오기

Firebase에서 데이터 불러오기 > 한 컬렉션 안에 여러 문서가 있을 때 데이터 불러오기

Firebase에서 데이터를 불러올 때는 보통 이 뼈대를 쓴다.

let docs = await getDocs(collection(db, "콜렉션이름"));

        docs.forEach((doc) => {

            let row = doc.data();

            console.log(row)

        });

 

그러고는 Firebase를 유심히 보는데, 지금까지는 하나의 콜렉션 안에 > 하나의 문서 안에 있는 데이터만 꺼내왔었는데

문득 여러 개의 콜렉션이라면? 또는 하나의 콜렉션이라도 그 안에 여러 개의 문서가 있다면? 

이라는 의문점이 들었다.

 

예시로 Firebase에 mbti라는 하나의 컬렉션 안에  ourmbti 와 theirmbti 라고 두 개의 문서를 만들어봤다.

 그러고 나서 아래 코드를 쳐서 

 

   let docs = await getDocs(collection(db, "mbti"));

        docs.forEach((doc) => {

            let row = doc.data();

            let mbti1 = row['mbti1'];

           

            $("#mbti1").click(async function () {

                alert(mbti1)

            })

           

        });

 

"mbti1" 이라고 id를 부여한 버튼을 눌렀는데 

alert 창이 처음에는 infj라고 값이 잘 나오는데

 

그 뒤에 undefined라는 창도 뜨는 것이다.

이상하다 이상하다.. 분명히 나는 버튼을 한번 눌렀는데 왜 alert 가 두 번 실행이 되는 것이지???

 

 

그 이유는 바로...

 

   let docs = await getDocs(collection(db, "mbti"));

        docs.forEach((doc) => {

            let row = doc.data();

            let mbti1 = row['mbti1'];

           

            $("#mbti1").click(async function () {

                alert(mbti1)

            })

           

        });

이 코드를 해석해보면

맨 첫줄: "mbti"라는 컬렉션에서 자료를 빼와서 걔를 docs라는 리스트라고 하면
둘째 줄: 그 리스트를 반복문으로 돌려서 하나하나의 객체(doc)로 빼자. 

 

그렇게 뺀 객체 하나하나의 doc을 row라고 할 것이고(ourmbti라는 row와 theirmbti라는 row가 빠지겠지?)

 

그 row의 key값이 mbti1인 것의 value값을 alert해라! 라는 뜻

(mbti : "infj")

 

근데 생각해보니 ourmbti 라는 row에는 mbti1이라는 key 값이 있는데 theirmbti 라는 row에는 mbti1 라는 key 값이 있어?

 

없자낭!!

 

그래서 처음나오는 창은 ourmbti라는 row에서 mbti1이라는 key 값을 찾아서 infj로 잘 나왔던 거고,

두 번째 창은 그 값이 없어서 undefined라고 나오는거였다...

 

그럼 첫 번째 창만 뜨게 하려면 어떻게 해야할까?

 

mbti1 이라는 key 값이 없으면, alert 함수가 실행되지 "않도록" 하면 되자나?

다시말하면, 

mbti1 라는 key 값이 undefined 면(없으면), alert 함수 실행되지 마라!

즉, mbti1 이 undefined가 아닐 때, 함수 실행되어라!

 

= > mbti1 이 undefined 가 아니면, alert 함수 실행되어라.

 

코드는 이렇게 하면 된다.

        let docs = await getDocs(collection(db, "mbti"));

 

        docs.forEach((doc) => {

            let row = doc.data();

   

            let mbti1 = row['mbti1'];

            if (mbti1 !== undefined) {

 

                $("#mbti1").click(async function () {

                    alert(mbti1)

                })

            }

        });

 

 

솔까말 내 논리력이 바닥인지 뭔지 모르겠지만 이 초초초짜에게는 진짜 오늘 하루종일 개고민했음....ㅠㅠ

힝 어려워~!

 

 

+) 더 알아봐야 할 것은 
1. 여러 개의 콜렉션이라면?
2. 아래 코드에서 undefined가 "undefined" 라면? ㅎ 잘 생각해보시길..

            if (mbti1 !== undefined) {

                $("#mbti1").click(async function () {

                    alert(mbti1)

                })

            }