[사전캠프]5주차 과제

 

JavaScript를 활용하여 동적 데이터 생성하기

<MISSION>
1.JavaScript를 활용하여 동적 데이터 생성하기
 script 부분을 확인하여 본인이 등록한 firebase 프로젝트의 설정에 맞게 자신의 데이터베이스를 연결해줍니다.

2. firebase 데이터 추가 코드를 완성해보세요.
가져온 값을 각각 변수에 저장해주세요.
담은 변수를 컬렉션 필드에 각각 넣어주세요.

3. firebase 데이터 읽기 및 카드 생성 코드를 완성해보세요.
필드에서 추출한 데이터를 활용하여 각 데이터를 포함한 카드의 HTML 코드를 완성하세요.

 

• 예시사진

---

1.JavaScript를 활용하여 동적 데이터 생성하기
 script 부분을 확인하여 본인이 등록한 firebase 프로젝트의 설정에 맞게 자신의 데이터베이스를 연결해줍니다.

 

firebase SDK 기본 코드이다. 

나중에도 사용 가능하도록 기록해놓으려고 한다.

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


//module로 해놓으면 onclick으로 해놓은 게 안되기 때문에 아래와같은 코드를 넣어준다.
$("#id").click(async function () {
    let doc = {};
    await addDoc(collection(db, "콜렉션이름"), doc);
})

 

• firebase 설정방법 (위 박스를 참고하여 1~4번까지 수행하면 된다)

1. 먼저 style태그는 접어두고 script태그에 type="module"로 해둔다.

이때 onclikc은 실행이 안됨을 알아야 한다.

그래서 설정해준 openclose나 makeCard와 같은 걸 따로 설정해줘야 한다.

2. 그리고 안에 위에 나와있는 코드를 넣고 firebase에 접속한다.

3. 내가 만들어놓은 프로젝트 개요에 들어가서 프로젝트 설정으로 들어간다.

4. 밑에 스크롤을 내려보면 SDK가 보인다 복붙해서 위 나와있는 코드 const firebaseConfig 안에 넣어주면 된다.

 

 

 

2. firebase 데이터 추가 코드를 완성해보세요.
가져온 값을 각각 변수에 저장해주세요.
담은 변수를 컬렉션 필드에 각각 넣어주세요.

 

변수를 지정하고 저장할 수 있게 구현해야한다.

// 데이터 추가
        $("#addBtn").click(async function () {
            function makeCard() { }
            let image = $('#floatingInput').val();
            let title = $('#foodTitle').val();
            let star = $('#inputGroupSelect03').val();
            let comment = $('#floatingTextarea').val();

            // title_input, comment_input, image_input id를 가진 HTML 요소에서 값을 가져와서 title, comment, image 변수에 저장해 주세요.

            try {
                const docRef = await addDoc(collection(db, "foods"), {
                    'image': image,
                    'title': title,
                    'star': star,
                    'comment': comment
                    // 각각 담은 변수를 컬렉션 필드에 title, comment, image에 각각 넣어주세요.
                });

                alert("음식이 추가 되었습니다!");
                window.location.reload();
            } catch (e) {
                console.error("Error adding document: ", e);
            }
        });

 

 

 

3. firebase 데이터 읽기 및 카드 생성 코드를 완성해보세요.
필드에서 추출한 데이터를 활용하여 각 데이터를 포함한 카드의 HTML 코드를 완성하세요.

 

쉽게 말해서  카드를 입력하면 박스를 뜨게끔 구현하라고 한다.

// 데이터 읽기 및 카드 생성
        $(".row-cols-3").empty();
         const querySnapshot = await getDocs(collection(db, "foods"));
        querySnapshot.forEach((doc) => {

            let title = doc.data().title;
            let comment = doc.data().comment;
            let star = "⭐".repeat(doc.data().star);
            let image = doc.data().image;
            
            //여기서부터는 밑에 col카드를 하나만 가져와서 변수를 지정해주면된다.
            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>`

            // 문서의 title, comment, image, star 필드에서 데이터를 추출한 변수명을 갖고,
            // tempHtml 문자열에 각 데이터를 포함한 카드의 HTML 코드를 생성하세요.

            $(".row-cols-3").append(temp_html);

        });

 

 

 

마지막으로 맨 밑에 col카드를 삭제하면 끝이다.

---

• 내가 만든 홈페이지

 

 firebase에는 실행이 되는데 홈페이지에서는 카드등록이 안돼서 곤란했다.

그래서 과제를 삭제하고 다시 코드 넣어보고 반복하다가 갑자기 짜잔됐다..

아무래도 코드를 넣어야 하는 위치를 잘못 했던 것 같다.

 

대체 뭐가 문제였고

지금은 또 왜 되는 건데..?

---

• 어려웠던 점

1. firebase에 연결만 하면 홈페이지에 있던 음식카드들이 사라져서 화가 날 뻔 했다.

> $(".row-colos-3").empty();를 주석처리해봤는데 카드가 생기는 걸 볼 수 있었다. 

 

2. firbase에서만 실행되고 카드생성이 안됐다.

> $("#addBtn).click(async function () 안에 변수명을 

let image=$('floatingInput').val();이런식으로 줘야 하는데 같게했고

try함수 addDoc에서는 또 다르게 줬더니 안됐던 모양이었다.

 

3. 구현이 안되길래 검사기능으로 봤을 때 erro가 떠져있었다.

> 마지막에 시험해본답시고 console.log(row);를 넣어져있었는데 그게 문제라고 떴다.

 

4. 전체적으로 그냥 다 엎어버리고 싶을때

> 초기화하고 스파르타필릭스에서 했던 코드들을 보고 감대로 해봤는데 성공했다...

진짜 열받는 오늘 ^^