TIL 240809 (배운내용으로 웹페이지 수정해 보기)

웹개발 강의에서 준 예제를 이용해 사용가능한 웹페이지로 만들어 보았다.

 

데이터 저장을 위해 파이어베이스 내 firebaseConfig 코드를 추가했다.

 

파이어베이스에 저장되게 데이터 코드를 이렇게 짯다.

$("#addBtn").click(async function () {

            let image = $('#image').val();

            let title = $('#title').val();

            let star = $('#star').val();

            let comment = $('#comment').val();

            //  객체 구성

            let doc = {

                'image': image,

                'title': title,

                'star': star,

                'comment': comment

            };

            // Firestore 데이터베이스에 새문서 foods 추가

            await addDoc(collection(db, "foods"), doc);

            // 메시지 알림 표시

            alert('음식 등록 완료!');

            // 새로고침 하여 변경사항 추가

            window.location.reload();

        })

 

카드 생성하는 코드는 이렇게 짯다.

// 카드 가져오는 코드

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

         // 코드 반복 처리

        docs.forEach((doc) => {

            let row = doc.data();

            // 데이터 추출

            let image = row['image'];

            let title = row['title'];

            let star = row['star'];

            let comment = row['comment'];

            // 카드 형태로 문자열 생성

            let temp_html = `

            <div class="col">

                <div class="card h-100">

                    <img src="${image}"

                        class="card-img-top" alt="...">

                    <div class="card-body">

                        <h4 class="card-title">${title}</h4>

                        <p class="card-text">${comment}</p>

                        <p>${star}</p>

                        <button class="card-button">주문하기</button>

                    </div>

                </div>

            </div>`;

            // ID : card 에 생성된 HTML 추가

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

        });

 

부트스트랩과 파이어 베이스를 이용해 손쉽게 간단한 웹페이지를 여러 개 만들어 볼 수 있었다.

숙련이 좀 더 되면 이런 프로그램이나 라이브러리를 이용하지 않고 만들어 보고 싶다.