240807 TIL - 우리 파이어베이스 쿼리에 불이 났어요

SQL

date_format(column, 'type')은 where절에도 쓸수 있다

select count(user_id)
from user_info
where date_format(joined, '%Y') = 2021 AND age between 20 and 29

여기서 날짜 포맷을 %y 로 했더니 2021 중에서 21만 나와 당황했다. %Y로 쓰니 전부 다 나왔다.

알고리즘

서울에서 김서방을 찾는 새로운 방법 - findIndex

참고 블로그

프로젝트

지금 쓰고있는 건 Firebase v9

firebase v9 문법 정리 블로그
firebase가 8 -> 9 버전업으로 문법이 많이 바뀌었다고 한다. 바뀐 문법은 React의 느낌이 나서 React + firebase로 풀스택을 하시는 분들이 많다고.

index가 번호가 아닌게 흠 - Firebase 개발자들이 doc 문서 갯수를 세는 방법

참고한 블로그

정보 저장을 위한 collection을 따로 만든 후 key 값으로 분류된 문서에 count라는 필드를 추가하는 것이다.
key값과 count하려는 collection을 연동시켜 데이터 추가, 삭제가 이루어질때 count 필드 값을 변경해주는 것이다.
하여튼 비동기를 포함한 함수 앞에 async를 붙여주고 비동기로 진행되는 함수 앞에는 await를 붙여준다.
이러면 비동기의 결과값ㅇ르 얻은 후에야 다음 단계가 진행되는 것이다.

삭제 한번 구현하기 힘드네! deleteDoc 구현하기

deleteDoc(doc(db, "bbs", doc_id)) -> doc is not a function?!

왜 함수가 아니라는건데?!!?! -> 위에서 같은 이름으로 변수랑 forEach문의 인자값을 쓰고 있었기 때문
결론 : 같은 이름이 많아서 파이어베이스 상단에 import를 했어도 doc이라는 함수까지 닿지 못해 구동되지 않았던 것.

deleteDoc에 들어가야 할 doc_id가 필요해서 deletedoc_id 라는 이름으로 deleteDoc 인자 이름을 바꿨다.
그러나 문제가 있었다.

  let docs = await getDocs(query(collection(db, "bbs"), orderBy('date', 'desc'), limit(5)));
        docs.forEach((doc) => {
            let row = doc.data();
            let doc_id = doc.id;
            let nickname = row['nickname'];
            let comment = row['comment'];
            let date = row['date'];
            let temp_html = `
        <div class="card" id = "commentcard">
            <div class="card-body">
                <blockquote class="blockquote mb-0">
                    <p id="cmt">${comment}</p>
                        <div class = "cardbtn">
                        <button type="button" class="btn btn-outline-primary" id = "modifybtn">수정</button>
                        <button type="button" class="btn btn-outline-secondary" id = "deletebtn">삭제</button>
                        </div>
                    <footer id="nickname" class="blockquote-footer">${nickname}</footer>
                    <footer id="date" class="blockquote-footer">${date}</footer>
                </blockquote>
            </div>
        </div>`;
            $('#comment-list').append(temp_html);
            //forEach문 끝
            $("#deletebtn").click(async function () {
                await deleteDoc(doc(db, "bbs", doc_id))
                alert('삭제 완료!');
                window.location.reload();
            });
        });

1. 이 deletedoc_id는 사실 forEach문 안에서 인자인 docs_id 값을 받아 doc_id = docs.id 로 썼었는데,
   forEach문 안에 넣어놓고 있으니 for문을 돌아서 완료창이 n번 눌러야 꺼진다. (n = 컬렉션 갯수)
2. 그리고 forEach문 안에 있으면 forEach문 인자 이름도 doc, deleteDoc 함수 이름도 doc이라서 deleteDoc 함수가 안 돌아간다.
3. 그렇다고 forEach문 밖으로 빼는 순간 저 인자 docs를 못 받아와서 값을 사용할 수가 없다.

• 해결방법:

1. 일단 doc_id을 forEach문에서 빼서 전역변수 deletedoc_id로 선언 (forEach문 인자값도 docs_item으로 변경)
2. forEach문 내부에서 deletedoc_id = docs_item.id; 로 forEach문 인자값에서 받아와줌
3. deleteDoc의 doc함수 내부 인자값을 deletedoc_id로 변경

또다른 문제 - 맨 위의 것만 삭제된다...

forEach문을 돌다 보니 마지막 id만 가져오는게 문제인 것 같다.

호영 튜터님의 조언

버튼이 다 같은 버튼인게 문제다. 버튼을 특별하게 만들어야 한다.
1번은 1번의 버튼, 2번은 2번의 버튼, 3번은 3번의 버튼이어야만 각각의 게시물을 삭제할 수 있다.
이 말을 이해했다면 가서 만들 수 있다.

못만들겠어요 튜터님 전 글렀어요😭😭😭😭😭

firestroe DB CRUD 구현한 블로그!
참고블로그2

window.location.~~ 시리즈는 괄호 없이 그냥 써야 URL이나 쿼리문이 표시된다.

이 시리즈의 종류는 이 블로그

정섭 튜터님의 말씀

지금은 그냥 마음대로 코드를 쳐볼것. 인터넷에 나와있는 모든 방법 다 써봐도 ok.
결과는 같아도 과정이 다른 코드 여러개를 쳐 보는 게 중요하다.