웹페이지에 삽입할 방명록 코딩해보기

팀미니프로젝트로 간단한 소개 웹페이지 만들기 중

방명록 작성을 맡았다.

강의에서 배운 firebase를 이용해 데이터 저장하고 저장된 데이터 불러 오는 코딩을 작성.

 $("#postingbtn").click(async function () {
                let name = $("#name").val();
                let command = $("#command").val();

                let doc = {
                    name: name,
                    command: command,
                };

                await addDoc(collection(db, "miniProject"), doc);
                alert("게시 완료!");
                window.location.reload();
            });

            let docs = await getDocs(collection(db, "miniProject"));
            docs.forEach((doc) => {
                let row = doc.data();

                let name = row["name"];
                let command = row["command"];

                let temp_html = `
            <div class="col">
                <div>
                    <div class="post">
                        <p class="nickname">${name}</p>
                        <p class="reply">${command}</p>
                    </div>
                </div>
            </div>`;
                $("#card").append(temp_html);
            });

 

데이터 베이스 연결하는 코드를 script에 작성후 위의 코드로 만들었다.

 

강의 따라하면서 배운대로 하니 생각보다 쉽게 그대로 나왔다.

해당 코드를 따로 만든 뒤 git pull 하여 다른사람들이 작성해놓은 코드를 불러와 옮겨서 합쳤다

합치는 과정이 어려웠다 다른 class 명 id 명 등을 내 코드가 스며들게 만드는게 할게 많고 헷갈리는 순간이 많았다.

코드를 짤때 주석도 자주 달면서 한눈에 잘보이게 만드는 것이 여러사람과 협업하는데 좋다는것을 배움.