4주차 강의 (Web 개발 강의)

이번 강의에서는 1주차 강의에서 만든 '추억의 앨범'을

DataBase와 연결하는 강의 였다.

 

DataBase에 들어가기 앞 서 꼭 JQuery를

연결해야 하는데 

 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 

위의 코드를 head 부분에 넣어주면 됐다.

HTML과 DataBase 연결하기

 

DataBase 사용 이유 :

데이터 베이스는 저장된 데이터를 잘 찾기 위해서 사용한다.

 

DataBase  종류 :

 

관계형 데이터 베이스 : 키(key)와 값(value)들의 간단한 관계를 테이블화 시킨 데이터 베이스

 

 

비관계형 데이터 베이스 : 키(key)와 값(value)들이 관계를 맺지 않는 데이터 베이스

 

Firestore Database

구글 클라우드 기반 NoSQL데이터 베이스이다.

 

HTML에서 사용하기 위한 초기 세팅

구축된 FireBase를 바탕으로 HTML에

    <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: "AIzaSyDFHJXiFM2YtnoDYIYZL9tFH7fi2gSRuXA",

            authDomain: "sparta-d46a3.firebaseapp.com",

            projectId: "sparta-d46a3",

            storageBucket: "sparta-d46a3.appspot.com",

            messagingSenderId: "736869860855",

            appId: "1:736869860855:web:f5e7e878753119d06f5af2",

            measurementId: "G-4LND2EJ73P"

        };

FireBase 구성 정보를 가져온 후 

        // 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();

        })

동적으로 만들어준다. 위와 같이 작성을 하면

HTML에서 작성한 값들을 DataBase에 저장할 수 있다.

<button id="savebtn">추억 저장하기</button>

HTML에서 DataBase로 정보를 저장시킬 버튼은

으로 변경시켜줘야한다.

(onClick을 지우고 id = "사용한 id" 속성을 추가해줘야 한다.)

 

이후, DataBase에서 HTML로 가져오기 위해

        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-muted">${date}</small>

                    </div>

                </div>

            </div>`;

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

        });

$('#card').append() 함수로 card를 추가시켜준다. 

<div id="card" class="row row-cols-1 row-cols-md-4 g-4">

 

"#card"는 HTML 부분에서 id가 "card"인 부분이다.