멤버소개 모달 만들기, 왕초보 4,5주차 수강

5주차 숙제 할 때 오타 찾느라 고생했습니다.

강의때 코드랑 조금 다르게 나와서 긴장했는데 결국 익숙한 코드로 수정해서 제출했습니다.

 

이번주 팀 과제에서 멤버소개 팝업창을 만드는 역할을 맞게 되었습니다.

버튼을 다른 박스과 함께 가로배열하고 싶은데 자꾸 버튼이 아래로 내려가는 오류가 생겨서 해결방법을 찾고 있습니다.

오늘 내로 끝나면 좋겠어요 ㅠㅠ

 

◆오늘 배운 것 중 정리하면서 기억할 필요가 있는 것 1~2가지

 

파이어베이스 사용준비 코드

<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 구성 정보 설정 -> 프로젝트 설정의 SDK 설정 및 구성 가져오기
        /*const firebaseConfig = {
            // 본인 설정 내용 채우기 
        }; */
        // For Firebase JS SDK v7.20.0 and later, measurementId is optional
        const firebaseConfig = {
            apiKey: "AIzaSyARvXqt1jk70WhUPCZ1yCDxqK4V0gsZ-uc",
            authDomain: "sqarta-5fffb.firebaseapp.com",
            projectId: "sqarta-5fffb",
            storageBucket: "sqarta-5fffb.appspot.com",
            messagingSenderId: "786388961610",
            appId: "1:786388961610:web:36b035fbf79f0391c759b3",
            measurementId: "G-X895B7R0TW"
        };


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

파이어베이스에 데이터 저장하기

        $('#memberForm').on('click', 'button[type="submit"]', async function (e) {
            e.preventDefault();

            // 입력 데이터 수집
            const name = $('#name').val();
            const mbti = $('#mbti').val();
            const hobby = $('#hobby').val();
            const introduction = $('#introduction').val();
            const strengths = $('#strengths').val();
            const collaborationStyle = $('#collaborationStyle').val();
            const resolution = $('#resolution').val();

            // 입력 값 검증
            if (!name || !mbti || !hobby || !introduction || !strengths || !collaborationStyle || !resolution) {
                alert('모든 항목을 입력해 주세요.');
                return;
            }

            const doc = {
                'name': name,
                'mbti': mbti,
                'hobby': hobby,
                'introduction': introduction,
                'strengths': strengths,
                'collaborationStyle': collaborationStyle,
                'resolution': resolution,
            };

            // Firebase에 데이터 추가
            try {
                await addDoc(collection(db, "members"), doc);
                alert('멤버 카드가 성공적으로 추가되었습니다!');
                // window.location.href = 'index.html';

            } catch (e) {
                console.error('에러발생!: ', e);
                alert('오류가 발생했습니다. 다시 시도해 주세요.');
            }

        }); $("#posting_btn").click(async function () {
            let image = $('#image').val();
            let title = $('#title').val();
            let coment = $('#coment').val();
            let date = $('#date').val();

            let doc = {
                'image': image,
                'title': title,
                'coment': coment,
                'date': date
            };
            await addDoc(collection(db, "albums"), doc);
            alert('저장 완료')
            window.location.reload(); // 새로고침        
        })

 

파이어베이스의 데이터 반영하기

 // 데이터 불러오기
        let docs = await getDocs(collection(db, "albums"));
        docs.forEach((doc) => {
            let row = doc.data();

            // 특정한 곳에 있는 벨류값 가져오기
            let image = row['image']; // let 변수명 = row['#키이름']; 키값을 변수에 넣음
            let title = row['title'];
            let coment = row['coment'];
            let date = row['date'];

            let temp_html = `
            <div class="card">
                <img src="${image}"
                    class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">${title}</h5>
                    <p class="card-text">${coment}</p>
                    <p class="card-text"><small class="text-body-secondary">${date}</small></p>
                </div>
            </div>`;

            $('#card').append(temp_html);
        });

 

https://ashen99.tistory.com/196

[왕초보] 웹개발 5주차 - 배포

https://ashen99.tistory.com/195

[왕초보] 웹개발 4주차 : 파이어베이스와 파이어스토어