* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

강의 내용에 따라 firebase에서 앨범 저장한 데이터베이스를 불러오고(제목 기준 '안녕안녕' '여행추억'), 그 뒤에 강사님 지시에 따라 구글에서 이미지를 가지고 와서 '서울 앨범'이라는 내용을 2개 더 추가해 넣었습니다. 근데 각각이 여행추억 우측에 새로 뜨는 게 아니라 처음 등록한 것은 '안녕안녕' 뒤에, '여행추억'과의 사이에 뜨고, 그 뒤에 등록한 '서울 앨범'은 예상하던 대로 '여행추억' 뒤로 뜨는 것을 확인할 수 있었습니다. 이건 왜 그런 것일까요?

작성한 코드 및 에러 메세지

오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.

Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.

Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!

    <script type="module">
        // Firebase SDK 라이브러리 가져오기
        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
        import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
        import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
        import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";



        // Firebase 구성 정보 설정
        // For Firebase JS SDK v7.20.0 and later, measurementId is optional
        const firebaseConfig = {
            apiKey: "AIzaSyC--QPmoW_x2bJ5j_Hopn6Lqg4HmTuFm94",
            authDomain: "sparta-9c3c4.firebaseapp.com",
            projectId: "sparta-9c3c4",
            storageBucket: "sparta-9c3c4.appspot.com",
            messagingSenderId: "397360489681",
            appId: "1:397360489681:web:6295faa44420bb5fd8d1f0",
            measurementId: "G-LY865S4VV2"
        };


        // Firebase 인스턴스 초기화
        const app = initializeApp(firebaseConfig);
        const db = getFirestore(app);



        $("#postingbtn").click(async function () {
            let image = $('#image').val();
            let title = $('#title').val();
            let content = $('#content').val();
            let date = $('#date').val();


            let doc = {
                'image': image,
                'title': title,
                'content': content,
                'date': date
            };
            await addDoc(collection(db, "albums"), doc);
            alert('저장 완료!');
            window.location.reload();
        })


        $("#savebtn").click(async function () {
            $('#postingbox').toggle();
        })


        let url = "http://spartacodingclub.shop/sparta_api/seoulair";
        fetch(url).then(res => res.json()).then(data => {
            let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM']
            $('#msg').text(mise);
        })


        let docs = await getDocs(collection(db, "albums"));
        docs.forEach((doc) => {
            let row = doc.data();
            let image = row['image'];
            let title = row['title'];
            let content = row['content'];
            let date = row['date'];


            let temp_html = `<div class="col">
                <div class="card h-100">
                    <img src="${image}"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">${title}</h5>
                        <p class="card-text">${content}</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-body-secondary">${date}</small>
                    </div>
                </div>
            </div>`;
            $('#card').append(temp_html);
        });
    </script>