스파르타코딩클럽 사전캠프 4주차 Firebase 연결

Firebase db 생성

파이어베이스 접속

https://firebase.google.com/?hl=ko 

Firebase | Google’s Mobile and Web App Development Platform

 

우측 상단의 Go to console(콘솔로 이동) 누른다

 

프로젝트 만들기를 누른다

다 동의하고 계속 누름

웹 누름

 

규칙의 false를 true로 바

게시함

 

Firebase db 연결

프로젝트 설정에 가서

Composition(구성) 누름

연결할 소스에 가서

script type을 module로 변경하고 파이어베이스랑 연결을 해주기 위해 다음 코드를 넣는다

    <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 구성 정보 설정
        const firebaseConfig = {
            본인 설정 내용 채우기
        };


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

firebaseConfig 안에는

파이어베이스 설정의 sdk setup중 composition을 갖다 붙인다

 

<div class="mybtn">
            <button id="postingbtn" type="button" class="btn btn-dark">기록하기</button>

type을 module로 바꾸면 onclick이 작동하지 않는다고 한다

onclick 대신 id값으로 동작하게 한다 

 

$("#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);
        })

db에 잘 들어가는 모습을 확인할 수 있다.

 

데이터 넣고 화면 새로고침

alert('저장 완료!');
window.location.reload();

 

기록하기를 누르면 저장 완료가 뜨고 새로고침됨

아까와 다르게 입력창이 자동으로 초기화된다

DB에서 데이터 가져오기

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

makeCard로 만들던거를 이제 db에서 빼와서 붙이기로 함

        let docs = await getDocs(collection(db, "albums"));
        docs.forEach((doc) => {
            let row = doc.data();
            console.log(row);

            let image = row['image'];
            let title = row['title'];
            let content = row['content'];
            let date = row['date'];

            let temp = `
            <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>`;
            $('#cards').append(temp)
        });

실행시키면 아까 db에 넣은 사진이 잘 뜨는 것을 알 수 있다

높이가 다른게 좀 거슬려서 카드 스타일을 만들어서 높이 지정해줌

.card-img-top{
            height: 300px;
            
        }

근데 가로나 세로 중의 하나에 맞게 확대해서 사진 자르는 거는 어떻게 하는지 몰라서 사진이 세로로 압축됨