[WIL] 오늘이 주말이었나?! 계속되는 프로젝트 작업 개발일지

 

 

어제 타겟(?) 게시물에 댓글을 달고, 해당 게시물의 댓글들을 조회하는 코드를 만들었는데

생각했던 것보다 어려운 점들이 많았다

가장 재밌었던 건 모던 자바스크립트에서 글로만 배웠던 부모요소 찾아가는 것!

그리고 저렇게 찾아가기 위해서 append로 안의 div를 만들때부터 id를 붙여주는 것

나는 왜 div 안에 넣을 html 태그를 작성할 때 id를 굳이 같이 붙여주나 했더니, 이런 깊은 뜻이!!

그리고 동훈튜터님께 배운 id 작성하는 방법

진짜 이번 주에 가장 유익한 시간이었던 것 같다.

 

👀 더 공부할거야 

• getElementById 와 querySelector 차이
• 어떨땐 getElementById로 불러오니 null값이 떴는데, querySelector로 불러오니 불러와졌었다
• HTMLElement가 정확히 어떤 놈인지
• 튜터님이 어떨땐 Id로 불러오는게 안되서 class로 불러와야한다고 하셨는데 그게 뭐지?
• closet 유연하게 쓰기
• 자바스크립트 어설프게 알지말고 진짜 마스터 될거야

 

❤️ 이건 어제 죙일 매달린 소듕한 나의 코드 ㅎㅅㅎ 

import {
  addDoc,
  collection,
  orderBy,
  query,
  getDocs,
  where,
} from "https://www.gstatic.com/firebasejs/9.14.0/firebase-firestore.js";

import { dbService, authService } from "../firebase.js";

export const moveCommentBoardPage = () => {
  console.log("moveCommentBoardPage 실행 in commentboardpage.js");
  window.location.replace("#CommentBoardPage");
};

//게시물 저장
export const save_CommentBoardPage = async (event) => {
  console.log("save_CommentBoardPage 실행 in commentboardpage.js");
  const boardcontent = document.getElementById("boardText");
  const cateWord = document.getElementById("catecate");
  const { uid, displayName } = authService.currentUser;

  try {
    await addDoc(collection(dbService, "CommentBoard"), {
      text: boardcontent.value,
      createdAt: Date.now(),
      creatorId: uid,
      nickname: displayName,
      cateWord: cateWord.value,
    });

    boardcontent.value = "";
    console.log("게시물 저장 성공!");
    getCommentBoardList();
  } catch (error) {
    alert(error);
    console.log("error in addDoc:", error);
  }
};

// getCommentBoardList 게시물 불러오기 + 댓글창 달기
export const getCommentBoardList = async () => {
  let CommentBoardList = [];
  const q = query(
    collection(dbService, "CommentBoard"),
    orderBy("createdAt", "desc")
  );
  const querySnapshot = await getDocs(q);
  querySnapshot.forEach((doc) => {
    const boardCommentObj = {
      id: doc.id,
      ...doc.data(),
    };
    CommentBoardList.push(boardCommentObj);
  });

  const CommendAndBoardList = document.getElementById("CommendAndBoardList");
  CommentBoardList.forEach((boardobj) => {
    const temp_html = `
      <div>카테고리는 몇번? :${boardobj.cateWord}</div>
      게시물생성고유시간 : <div id="CommentBoardOnlyName-${boardobj.createdAt}" class="CommentBoardOnlyName">${boardobj.createdAt}</div>
      <div>저는 글내용이에오 : ${boardobj.text}</div>
      <div>저는 고유아아디에오 :${boardobj.creatorId}</div>
      <!--댓글창보기 버튼에 event를 주어야 한다.-->
      <button type="button" onclick="getCommentBoardCommentsList(event)">댓글창보기</button>
      <div id="getCommentBoardCommentsList-${boardobj.createdAt}"></div>
      
      <div>
        <form onsubmit="saveBdComment(event)">
          <div><input type="text" id="cbTextcontent"></div>
          <div>닉네임 : <div id="userCommentNickname"></div></div>
          <div>현재 날짜 : <div id="nowDate"></div>
          <input type="submit" value="댓글 등록">
        </form>
      </div>
      <hr/>
      `;

    const div = document.createElement("div");
    div.innerHTML = temp_html;
    // div에 id를 붙여준 이유 : 나중에 버튼을 클릭했을때, 버튼 위위위의 ${boardobj.createdAt} 값을 가져와야하니 부모태그 기준을 만들 수 있도록 만들어준 것
    div.id = "testId";
    CommendAndBoardList.appendChild(div);


  });
};

// saveBdComment() 댓글 저장하는고
export const saveBdComment = async (event) => {
  console.log('saveComment메소드 시작!')
  //querySelector : selector의 구체적인 그룹과 일치하는 document안의 첫번째 엘리먼트를 반환한다.
  const cbTextcontent = event.target.querySelector("input");
  console.log('event.target :',event.target)
  console.log('event.target.querySelector("input") : ', event.target.querySelector("input"))
  console.log("event.target.closet('#testId').querySelector(.commentboardonlyname):",event.target.closest("#testId").querySelector(".CommentBoardOnlyName").innerText
  );

  const onlyNum = event.target.closest("#testId").querySelector(".CommentBoardOnlyName").innerText;

  const { uid, displayName } = authService.currentUser;

  try {
    await addDoc(collection(dbService, "CommentBoardcomments"), {
      text: cbTextcontent.value,
      creatorId: uid,
      nickname: displayName,
      CommentBoardOnlyName: onlyNum,
    });

    cbTextcontent.value = "";
    alert("댓글 저장 성공!!!");
  } catch (error) {
    alert(error);
    console.log("error in addDoc:", error);
  }
};

// 댓글 불러오는 리스트 함수
export const getCommentBoardCommentsList = async (event) => {
  console.log("getCommentBoardCommentsList 댓글 조회해오는 메소드 실행!");
  const abc = event.target.closest("#testId").querySelector(".CommentBoardOnlyName").innerText;
  let CommentBoardList1 = [];
  const commentsBoardRef = collection(dbService, "CommentBoardcomments");
  const q1 = query(commentsBoardRef, where("CommentBoardOnlyName", "==", abc));
  const querySnapshot1 = await getDocs(q1);
  console.log("querySnapshot1 : ", querySnapshot1);
  querySnapshot1.forEach((doc1) => {
    const boardCommentObj1 = {
      id: doc1.id,
      ...doc1.data(),
    };
    CommentBoardList1.push(boardCommentObj1);
  });

  //abc는 위에서 쿼리셀렉터.클래스로 끌고온 값 : createAt
  // 그걸 이용해 document.getEle~id의 내부를 만들어 데려온 것
  const getCommentBoardCommentsList = document.getElementById(`getCommentBoardCommentsList-${abc}`);
  
  //이걸 걸어준 이유 : 이걸 안걸어주고 버튼 계속 클릭하면 밑에 계속 쌓임

  getCommentBoardCommentsList.innerHTML="";
  CommentBoardList1.forEach((commentobj) => {
    const temp_html = `
      <div>댓글 내용 : <div>${commentobj.text}</div></div>
      <div>댓글아이디 : <div>${commentobj.creatorId}</div></div>
      <div>댓글닉네임 : <div>${commentobj.nickname}</div></div>
      `;
    const div = document.createElement("div");
    div.innerHTML = temp_html;
    getCommentBoardCommentsList.appendChild(div);
  });
};


//authService.currentUser.displayName : 사용자 닉네임
// export const SearchCate = async () => {
//   console.log("SearchCate가 실행되었슴당.");
//   const cateSearchbar = document.getElementById("cateSearchbar");
//   console.log("cateSearchbar의 value값?", cateSearchbar.value);

//   const searchTarget = cateSearchbar.value;

//   let TargetBoardList = [];
//   const TargetBoardRef = collection(dbService, "boardContent");
//   const q = query(TargetBoardRef, where("keyword", "==", searchTarget));

//   const querySnapshot = await getDocs(q);
//   querySnapshot.forEach((doc) => {
//     const targetBoardObj = {
//       id: doc.id,
//       ...doc.data(),
//     };
//     TargetBoardList.push(targetBoardObj);
//   });

//   const htmlcateBoardList = document.getElementById("cateBoardList");
//   htmlcateBoardList.innerHTML = "";

//   TargetBoardList.forEach((boardobj) => {
//     const temp_html = `
//       <div style="color:red">카테고리는 몇번? :${boardobj.keyword}</div>
//       <div>저는 닉네임이에오 :${boardobj.nickname}</div>
//       <div>저는 글내용이에오 : ${boardobj.text}</div>
//       <div>저는 고유아아디에오 :${boardobj.creatorId}</div>
//       <hr/>
//       `;

//     const div = document.createElement("div");
//     div.classList.add("myCateboard");
//     div.innerHTML = temp_html;
//     htmlcateBoardList.appendChild(div);
//   });
// };

 

아래는 오늘 프로젝트 하면서, 수정해야하는 부분들 수정한 내용~~~

 

https://warn-code.tistory.com/159

프로필 사진 변경 수정 사항

 

 

미니 프로젝트 때보다 구현할 수 있는 기능들도 훨씬 많아지고, 무엇보다 나의 집념(?)이 점점 강해지는 것 같아 너무 행복하다

나의 ENTJ 성향을 깨워주고, 좀 더 나를 나답게 찾아주는 개발이 난 정말 너무 좋다!!!!!!!!!!!!!!