240806 TIL - 파이어베이스 문법은 어려워

프로토콜이 뭔가요 - 똑똑, 데이터 송수신하러 왔어!

HTTP든 HTTPS든 TCP든 전부다 통신 규약이다. 프로토콜이라서 P로 끝난다.
요즘은 일반적으로 HTTPS를 쓴다 - 송수신 과정에서 제 3자가 내 데이터를 볼 수 없기 때문.

Firebase에서 orderBy로 정렬하고 싶은데 어떻게 하지?

참고1
참고2
뭔소린지 모르겠는 docs

다 찾아봤는데 계속 에러! 좀처럼 되질 않는다😩

왜 튜터님께 갔더니 갑자기 잘 되는거지...!!! 부들부들

그래서 코드는 다음과 같다.

import { query, orderBy, limit } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
//상단에 이걸 import로 집어넣고

        let docs = await getDocs(query(collection(db, "bbs"), orderBy('date', 'desc')));
//let docs 부분을 이렇게 써주었더니 갑자기 날짜 순으로 정렬이 되는 것 같다!

        docs.forEach((doc) => {
            let row = doc.data();

            let nickname = row['nickname'];
            let comment = row['comment'];
            let date = row['date'];

            let temp_html = `            
        <div class="card">
            <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" disabled>수정</button>
                        <button type="button" class="btn btn-outline-secondary" id = "cancelbtn" disabled>삭제</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);
        });

async 함수는 script type = "module" 안에서 써야 하는구나

js파일로 따로 뺐더니 오류를 구웨에엑 토해낸다.
파이어베이스는 js파일을 따로 쓸 수 없는걸까? -> firebaseconfig.js 파일을 보통 쓰나보다.

그래서 내가 쓰고있는건 정확히 뭐지? -> Firestore query!

Firebase는 클라우드 백엔드 플랫폼의 이름이고, 그 Firebase에서 제공하는 DB가 Firestore. 내가 필요한 것은 DB에 사용하기 위해 쓰는 문법 (Firestore query)
인 것 같다!
참고한 블로그

JS에서 현재 시간을 찍으려면 -> Date();

표시 형태를 정해주려면 괄호 안에 형식을 넣어주자. ex) let date = Date('%Y-%m-%d');

NavBar에 i태그 아이콘이 안나와 -> CDN을 import 해주자

나는 fontawesome에서 i태그 아이콘을 가져다 썼는데, 이전 프로젝트에선 나오는데 지금 프로젝트에선 안나왔다.
CDN을 import 해주니 정상적으로 출력되었다.

<script src="https://kit.fontawesome.com/06263c1511.js" crossorigin="anonymous"></script>

getbootstrap의 아이콘 CDN은 여기

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">

CDN import에 참고한 블로그

파이어베이스도 반응형 웹을 만들 수 있구나? + 그 외 FE, BE 정리블로그

참고 블로그