[TIL]미니프로젝트 2일차

yeols·2023년 9월 26일

내배캠 미니프로젝트

[TIL]

목록 보기

13/72

2023년09월26일

개인소개 페이지 1차 완성

나의 개인 소개 페이지를 1차로 완성을 했다.

소개 섹션

상단에 조 이름이 출력되고 조 이름에 메인페이지로 돌아가는 link를 심을 예정이다.
그 밑에 사진과 이름, 포부 등이 출력되고 그 밑에 자신을 소개하는 글을 출력한다.

방명록 섹션

방명록은 간단하게 작성자 이름과 작성자 비밀번호를 입력받고 내용까지 필수로 입력받게 만들었다.
방명록 데이터는 firestore에 저장하고 저장된 데이터가 있으면 방명록 섹션이 보이게되고 저장된 데이터를 불러와 출력한다. 저장된 데이터는 자기 페이지 주인이 임의로 삭제할 수 없고, 작성자만 방명록 카드 오른쪽상단에 X버튼으로 삭제가 가능하다. 페이지 주인인 내가 삭제하려고 하면 firestore에서 삭제해야한다. 이는 회원제로 운영되는게 아니기에 이렇게 만들었지만 기본적으로 방명록 등록을 할 때 관리자 비밀번호를 입력하게 하여 사용해도 될거같긴 하다.

방명록 출력 작성중 error

방명록 출력 부분이 동적으로 생성되는 부분이다 보니 버튼에 event를 생성하는데에 있어서 오류가 생겼다.

오류생긴가 생긴 원인

const searchComment = async () => {  
  const dataList = await getDocs(query(commentRef, orderBy("regDate", "desc")));  
  createCommentCard(dataList);  
};

const createCommentCard = dataList => {  
  commentDiv.innerHTML = "";
  dataList.forEach(item => {  
    let contentWrapper = document.createElement("div");  
    contentWrapper.classList.add("comment-card");  
    contentWrapper.innerHTML = `  
            <h2>${item.data().commentName}</h2>  
            <p>${item.data().commentContents}</p>
			<div class="comment-card__delete">
              <button 
                      class="del-btn" 
                      value="${item.data().commentId}">
              </button>  
            </div>    `;  
    commentDiv.append(contentWrapper);  
  });  
  delBtnAddEvent();  
};

const delBtn = document.querySelectorAll(".del-btn");

const delBtnAddEvent = () => {  
  delBtn.forEach(buttons => {  
    buttons.addEventListener("click", event => {  
      event.preventDefault();  
      delModal.classList.toggle("active");  
    });  
  });  
};  
searchComment();

화면이 로딩이 되고 searchComment()를 통해 searchComment함수를 호출한다.
호출한 searchComment함수는 firestore에 저장된 데이터를 불러오는 getDocs를 호출하여 dataList에 전달 후 createCommentCard라는 동적 방명록 카드 생성 함수를 호출한다.
createCommentCard는 내부에서 방명록을 데이터만큼 만들고 끝에 delBtnAddEvent()라는 함수를 호출하여 삭제 버튼에 event를 생성하려 했지만 의도대로 동적으로 만든 버튼에 event가 생성되지 않았다.

원인은 let delBtn = document.querySelectorAll(".del-btn"); 이 부분이 전역 변수로 설정되어 아직 firebase에서 데이터를 불러오고 동적으로 방명록이 출력되기도 전에 삭제버튼을 호출했기 때문에 문제가 생긴 부분이었다.

오류 해결 코드

const searchComment = async () => {  
  const dataList = await getDocs(query(commentRef, orderBy("regDate", "desc")));  
  createCommentCard(dataList);  
};  
  
const createCommentCard = dataList => {  
  commentDiv.innerHTML = "";
  dataList.forEach(item => {  
    let contentWrapper = document.createElement("div");  
    contentWrapper.classList.add("comment-card");  
    contentWrapper.innerHTML = `  
            <h2>${item.data().commentName}</h2>  
            <p>${item.data().commentContents}</p>
			<div class="comment-card__delete">
              <button 
                      class="del-btn" 
                      value="${item.data().commentId}">
              </button>  
            </div>    `;  
    commentDiv.append(contentWrapper);  
  });  
  delBtnAddEvent();  
};


const delBtnAddEvent = () => {  
  const delBtn = document.querySelectorAll(".del-btn");  
  delBtn.forEach(buttons => {  
    buttons.addEventListener("click", event => {  
      event.preventDefault();  
      delModal.classList.toggle("active");  
    });  
  });  
};  
searchComment();