[왕초보] 웹개발 종합반 5주차 숙제

이번에는 JavaScript를 활용하여 동적 데이터 생성하기에 대한 숙제를 받게 되었다.

 

<결과물 예시>

 

1. firebase를 사용하기 위한 기본 세팅을 직접 해보세요.

 

내 데이터베이스와 연결된 상황

 

2. firebase 데이터 추가 코드를 완성해보세요.

// 데이터 추가

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

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

            try {

                const docRef = await addDoc(collection(db, "foods"), {

                    // 각각 담은 변수를 컬렉션 필드에 title, comment, image에 각각 넣어주세요.

                });

                alert("음식이 추가 되었습니다!");

                window.location.reload();

            } catch (e) {

                console.error("Error adding document: ", e);

            }

        });

 

 

• 가져온 값을 각각 image, title, star, comment 변수에 저장해 주세요.
• 각각 담은 변수를 컬렉션 필드에 image, title, star, comment에 각각 넣어주세요.

// 데이터 추가

        $("#postingbtn").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

            };

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

            alert('음식이 추가 되었습니다!');

            window.location.reload();

        })

 

첫 번째 사진으로는 도저히 어떻게 해야 하는지 감이 오지 않아

강의에서 배운 것을 적용시켰다

 

3. firebase 데이터 읽기 및 카드 생성 코드를 완성해보세요.

 // 데이터 읽기 및 카드 생성

        $(".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;

            // 문서의 title, comment, image, star 필드에서 데이터를 추출한 변수명을 갖고,

            // tempHtml 문자열에 각 데이터를 포함한 카드의 HTML 코드를 생성하세요.

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

        });

 

• 문서의 image, title, star, comment 필드에서 추출한 데이터를 활용하, tempHtml 문자열에 각 데이터를 포함한 카드의 HTML 코드를 완성하세요.

// 데이터 읽기 및 카드 생성

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

        docs.forEach((doc) => {

            let row = doc.data();

            let image = row['image'];

            let title = row['title'];

            let comment = row['comment'];

            let star = row['star'];

            let temp_html = `

            <div class="col">

                <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">${star}</p>

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

                    </div>

                </div>

            </div>`;

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

        });

 

여기도 2와 같이 강의에서 배운 것을 적용시켰다

 

 

하지만 기록하기 버튼이 작동하질 않아 의심가는 곳을 찾아봤다.

<!-- 부트스트랩 인풋 박스 적용-->

                <div class="post" id="input-card">

                    <div class="form-floating mb-3">

                        <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">

                        <label for="floatingInput">음식 이미지 주소</label>

                    </div>

                    <div class="form-floating mb-3">

                        <input type="text" class="form-control" id="foodTitle" placeholder="영화 제목">

                        <label for="foodTitle">음식명</label>

                    </div>

                    <div class="input-group mb-3">

                        <button class="btn btn-outline-secondary" type="button">별점</button>

                        <select class="form-select" id="inputGroupSelect03"

                            aria-label="Example select with button addon">

                            <option selected>별점 선택</option>

                            <option value="1">⭐</option>

                            <option value="2">⭐⭐</option>

                            <option value="3">⭐⭐⭐</option>

                            <option value="4">⭐⭐⭐⭐</option>

                            <option value="5">⭐⭐⭐⭐⭐</option>

                        </select>

                    </div>

                    <div class="form-floating">

                        <textarea class="form-control" placeholder="Leave a comment here"

                            id="floatingTextarea"></textarea>

                        <label for="floatingTextarea">추천 이유</label>

                    </div>

                    <div class="button2">

                        <button type="button" class="btn btn-danger" id="addBtn"> 기록하기 </button>

                    </div>

                </div>

            </div>

        </div>

    </div>

 

음식 이미지 주소의 id="floatingInput" 을 id="image"로

 

음식명의 id="foodTitle"을  id="title"로

 

별점의 id="inputGroupSelect03"를 id="star"로

 

추천 이유의 id="floatingTextarea"를 id="comment"로 변경하고

 

마지막으로 기록하기의 id="addBtn"을 id="postingbtn"으로 변경했다

<!-- 부트스트랩 인풋 박스 적용-->

                <div class="post" id="input-card">

                    <div class="form-floating mb-3">

                        <input type="email" class="form-control" id="image" placeholder="name@example.com">

                        <label for="floatingInput">음식 이미지 주소</label>

                    </div>

                    <div class="form-floating mb-3">

                        <input type="text" class="form-control" id="title" placeholder="영화 제목">

                        <label for="foodTitle">음식명</label>

                    </div>

                    <div class="input-group mb-3">

                        <button class="btn btn-outline-secondary" type="button">별점</button>

                        <select class="form-select" id="star"

                            aria-label="Example select with button addon">

                            <option selected>별점 선택</option>

                            <option value="⭐">⭐</option>

                            <option value="⭐⭐">⭐⭐</option>

                            <option value="⭐⭐⭐">⭐⭐⭐</option>

                            <option value="⭐⭐⭐⭐">⭐⭐⭐⭐</option>

                            <option value="⭐⭐⭐⭐⭐">⭐⭐⭐⭐⭐</option>

                        </select>

                    </div>

                    <div class="form-floating">

                        <textarea class="form-control" placeholder="Leave a comment here"

                            id="comment"></textarea>

                        <label for="floatingTextarea">추천 이유</label>

                    </div>

                    <div class="button2">

                        <button type="button" class="btn btn-danger" id="postingbtn"> 기록하기 </button>

                    </div>

                </div>

            </div>

        </div>

    </div>

 

별도 숫자대신 별로 채워넣었다

 

 

드디어 기록하기가 작동하여 "음식이 추가 되었습니다!" 문구가 출력은 됐지만

밑에 카드가 나오질 않았다

 

그래서 이전에  스파르타 플릭스에서 사용했던 카드 코드를 가져와 적용했더니

<!-- 부트스트랩 인풋 박스 적용-->

                <div class="post" id="input-card">

                    <div class="form-floating mb-3">

                        <input type="email" class="form-control" id="image" placeholder="name@example.com">

                        <label for="floatingInput">음식 이미지 주소</label>

                    </div>

                    <div class="form-floating mb-3">

                        <input type="text" class="form-control" id="title" placeholder="영화 제목">

                        <label for="foodTitle">음식명</label>

                    </div>

                    <div class="input-group mb-3">

                        <button class="btn btn-outline-secondary" type="button">별점</button>

                        <select class="form-select" id="star"

                            aria-label="Example select with button addon">

                            <option selected>별점 선택</option>

                            <option value="⭐">⭐</option>

                            <option value="⭐⭐">⭐⭐</option>

                            <option value="⭐⭐⭐">⭐⭐⭐</option>

                            <option value="⭐⭐⭐⭐">⭐⭐⭐⭐</option>

                            <option value="⭐⭐⭐⭐⭐">⭐⭐⭐⭐⭐</option>

                        </select>

                    </div>

                    <div class="form-floating">

                        <textarea class="form-control" placeholder="Leave a comment here"

                            id="comment"></textarea>

                        <label for="floatingTextarea">추천 이유</label>

                    </div>

                    <div class="button2">

                        <button type="button" class="btn btn-danger" id="postingbtn"> 기록하기 </button>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <div class="mycards">

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

        </div>

    </div>

 

(밑에 네 줄 추가)

 

카드가 나오면서 완성이 되었다.

 

<나의 결과물>