오늘은 강의 실습을 해보면서 시작한다..

간단하게 주어지는 html 을 수정하여 아래 이미지처럼 만드는 것이 목표였다.

이미지와 음식명 별점등을 넣고 기록을 하면

이렇게 카드가 추가되는 방식이다.
사실 만드는 방식자체는 헷갈리지 않을 줄 알았는데 의외로 사소한 부분에서 헷갈리고 오류가 났다.

가장 첫번 째 오류로는 기록하기 버튼을 눌러도 전혀 반응이 하지 않는 것이었다.
무엇이 문제일까 생각하다가 콘솔 창을 활용해 띄워 보았고 query문 자체가 작동하지 않는 다는 것을 확인 하고 보니 한줄 코드가 빠져있는 것을 발견했다.
주의하자.

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

또한 은근히 id와 class값을 적절히 넣어 주는 부분이 어려웠다.

<script>
        function makecard() {
            let image = $('#image').val();
            let title = $('#title').val();
            let text = $('#text').val();
            let star = $('#star').val();

            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-star">${star}</p>
                        <p class="card-text">${text}</p>
                        <div><button class="card-button">주문하기</button></div>
                    </div>

                </div>`
            $('#card').append(temp_html);
        }
    </script>

${image}태그들을 잘 확인하는것이 중요할 듯 하다.

이렇게 문제들을 모두 해결했지만 한가지 해결되지 않은 부분이 있다.

이 구간에서 스파르타 푸드파이터는 <.h5> 태그이고
맛집을 소개해 주세요! 부분은 <.p>태그인데
두개다 margin은 정상적으로 작동하는데
p태그에서만 font-size 가 작동하지 않는 것을 발견했다.. 무엇이 문제일까

Database

데이터베이스에 대해 공부를 시작하였다.
데이터베이스는 전공 과목 공부를 통해 기초적인 부분은 알고 있었는데 모르는 부분이 생각보다 좀 있었다.

기존에 html을 작성할 때는

<script> "내용" </script> 

방식으로 작성을 하였는데

firebase 데이터베이스를 사용할 때에는

<script type="module"> "내용" </script> 

이렇게 type에 module을 붙여 사용해야 한다. 또한 이렇게 module을 붙이게 되면 기존에 사용하던 onclick()과 같은 메소드들은 사용이 불가능해진다. 그래서 변경을 해줄 필요가 있다.

기존 onclick()은 다음과 같다.

function OpenClose() {
        $('#postingbox').toggle();
}

<button onclick="OpenClose()">

이렇게 사용하였는데

$("#savebtn").click(async function () {
        $('#postingbox').toggle(); //껏다 키기
}) 

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

firebase를 사용하여 script에 module을 붙일 경우 id 태그를 사용하여 위와 같이 사용한다.

새롭게 카드를 추가하는 방식 또한 기존과는 다르게

$("#postingbtn").click(async function () {
            let image = $('#image').val(); // #image에 value값 들고오기
            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();
        })//database에 값을 저장

위와 같은 코드를 통해 html에서 가지고 싶은 val 값들을 let 변수에 저장을 해준 후 딕셔너리 현태로 저장하여

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

위 코드를 통하여 datebase에 값을 넣어준다.

그 이후에는

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_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-body-secondary">${date}</small>
                    </div>
                </div>
            </div>`;
            $('#card').append(temp_html);
        });

await getDocs를 통해 db에서 정보를 다시 가져온후
값을 기존과 같이 출력해주기만 하면 끝이다.

---

곧 있으면 본 과정인데 그전에 미리 사전 과정을 다 마치려면 부지런히 공부 해야겠다.