[TIL] 오늘의 개발일지

 

바닐라 자쓰 이어서 오늘 리팩토링 했던 부분

 

기존에 메인페이지에서 게시글을 클릭했을때, 보이는 모달창에서 원래는 "댓글 조회하기" 버튼을 클릭해야 댓글이 조회되는 로직으로 만들어져있었는데 (과거의 나야 고생해떠 어떻게든 해보려고 애썼구나 ㅠ) , 처음부터 게시글을 클릭하고 모달창이 열릴때 해당 게시물의 댓글이 보이도록 리팩토링을 진행했다

 

[기존 코드]

기존 코드를 살펴보니 버튼에서 targetCommentsSearch 라는 함수를 실행하도록 하고 있었고, 

BoardcmtObjList.forEach((cmtObj) => {
    const temp_html = `    <div id="post_wrap">
    <div class="post_wrap_head">
       <a class="post_exit" onclick="feed_closeModal()">
           <i class="fa-regular fa-circle-xmark"></i>
         </a>
    </div>
    <div class="post_wrap_body">
     <div class="profile">
     </div>
     <a class="nickname" title="nickname" target="_blank">${cmtObj.nickname}</a>
     <div class="category_wrap">
                <p class="category">${cmtObj.keyword}</p>
              </div>
     <div class="modal_text_box">
       <div id="targetCommentsText">${cmtObj.text}</div>
     </div>
     <div id="yj_commment_container_hi">
       <div class="yj_comment">#comment</div>
       <form method="post" id="post_form">
           <div class="comment_box">
             <input type="text" class="comment" id="targetCommentsText1">
             <a class="comment_btn" onclick="saveTargetComments(${cmtObj.createdAt})">등록</a>
           </div>
         </form>
        <button type="button" class="comment_btn" onclick="targetCommentsSearch(${cmtObj.createdAt})">해당 게시물 댓글보기</button>
       <div class="yj_comment_container" id="target_comments">
       </div>
       </div>
     </div>
   </div>`;

 

아래 버튼 부분 저거!!! 

 

 

 

처음엔 단순하게 "뭐여, 그냥 targetCommentsSearch 함수를 처음 모달 열릴때부터 실행해주면 되것네" 하고 붙였다가

요런 에러메세지를 만났다

 

TypeError: Cannot set properties of null (setting 'innerHTML')

 

ㅇㅅㅇ?

 

생각해보니 targetCommentsSearch를 모달이 열리자마자 실행하는거 자체가 말이 안되었다는 생각을 하게 되어찌

 

왜?

 

 

바로 이부분!!!!!

target_comments라는 id를 가진 엘리먼트가 아직 그려지지 않앗는데 저따가 붙이려고 햇으니 문제징 ㅇㅅㅇ

데헿ㅎ 나의 실숭 ㅇ_<

 

간단하게 모달창 open됐을때 실행되는 함수에서 html요소들이 다 그려지고 난 후에 붙여주니 바로 해결되었당

 

+) 댓글 추가하면 바로 업뎃 되도록 댓글 저장함수 마지막 부분에도 댓글 조회하기 추가했음 ㅇ_<