WIL(04)

드디어 오늘 발표날이다.

원래 WIL은 주말에 적어야하지만 프로젝트로 인해 정말 쓸 시간이 없었다...ㅠ

그 주말동안 팀원들을 보려고 서울 까지 갔는데 진짜 그 시간이 아깝지 않을 정도로 팀원분들이 좋았다.😍

막 지식을 얻는것도 있지만 물론, 사람을 얻었다라는 표현이 이번엔 더 잘 맞았던 것같다.

오늘이 지나면 이제 각자 다른 팀원들과 새로운 팀을 시작하게 되겠지만 그래도 계속 꾸준히 연락을 할 것 같다.

(어려운거 있으면 연락하라는 말이 진짜 고마웠다....ㅎ)

암튼 이번 주는 정말 많은 일이 있어서 WIL이 엄청 길어질꺼같다. 근데 그만큼 정말 열심히 했다. 잠을 이렇게 안 잔적이있나 싶을정도로

그래서 더욱 애착이 가는 프로젝트가 될꺼 같고, 처음으로 만들어 본 제대로 된 나의 프로젝트라서 더 의미가 있다.

---

<이번 주 기억에 남는 힘들었던 기능>
 :  리뷰_게시글 수정하기
- 메인페이지에서 > 특정한 운동화를 누르면 > 상세 페이지로 넘어가서 리뷰를 작성하고 > 등록된 리뷰를 수정하는 기능

1.처음 생각한 구현

처음 적은 리뷰<p>를 가지고 와서 수정 버튼을 누르면 textarea로 바뀌면서  원래 있던 값을 가지는 수정 창을 구현해보려고 했다.

=>  원래 있던 값을 가진 수정 input이 더 사용자에겐 더 좋을 껏 같아서 그렇게 구현을 했다.

그래서 예상했던 순서가

: 1) 수정버튼을 만들고 유저가 이 버튼을 누르면 이 버튼들을 사라져야한다.(유저가 헷갈릴 수 있으니) + 그리고 새로운 완료 버튼을 만든다

  2) 수정버튼을 누름과 동시에 새로운 textarea가 뜬다.

  3) textarea안에는 유저가 먼저 적은 리뷰텍스트가 그대로 유지가 되어 있어야한다.

  4) 완료버튼을 누르면 그 textarea의 내용이 본래의 p 가 된다.

 

이 순서로 진행을 짜고 시작했다.

원래는 이렇게 구현을 짜고 시작하지 않았는데 그 이유가 그동안 만들었던 기능들이 간단한 순서를 가지고 있어서 그랬던 것같다.

근데 점점 복잡해지는 기능에 저렇게 기능을 만들어 놓고 하나씩 순차적으로 코드를 짜는게 더 효율적이라는 생각이 들었다.

(사실 하다가 중간에 '어..? 내가 그래서 어디까지 했더라'가 생기니까 자꾸 집중이 끊겼다.)

 

2.힘들었던 점

:힘들었던 점은 뻔하다. 저렇게 생각을 해도 오류는 생긴다.😅
 이러면서 좀 더 구체적인 계획, 다시 똑같은 오류를 만났을 때 더 여유로운 사람이 될 수 있을꺼같다ㅎ

 근데 이 오류가 프로젝트 완성이 다 되어 가는데 해결이 안되서 급했던거....? 한 몇일동안 계속 오류만 생각을 했다... ㅠㅠ

 

export const reviseReview = async (event) => {
  event.preventDefault();

  const udBtns = document.querySelectorAll(".editButtons");
  udBtns.forEach((udBtn) => udBtn.classList.add("noDisplay"));
  const reviewBody = event.target; //수정 아이콘
  console.log(reviewBody);
  const commentText = document.querySelector("#reviseComment");
  //commentText : board에서 들고 온 textarea
  console.log(commentText);
  const userOriginText = document.querySelector(".reviewComment");
  const reviseBtn = document.querySelector(".saveReviseComment"); //수정완료버튼
  commentText.classList.remove("noDisplay");
  userOriginText.classList.add("noDisplay");
  reviseBtn.classList.remove("noDisplay");
  console.log(userOriginText);
};

export const updateReviews = async (event) => {
  const parentNode = event.target.parentNode;
  console.log(parentNode);
  const commentText = parentNode.children[0];
  console.log(commentText);
  const commentInputP = commentText.value;




  const creatorId = localStorage.getItem("id");
  const commentRef = doc(dbService, "reviews", creatorId);
  const savebtn = document.querySelector(".saveReviseComment");
  savebtn.classList.add("noDisplay");

  try {
    await updateDoc(commentRef, { text: commentInputP });
    const changeComment = document.querySelector("#reviseComment");
    changeComment.value = commentInputP;
    const changeDiv = document.querySelector(".reviewBody");
    changeDiv.innerHTML = '';
    const p = `<p class="reviewComment">${commentInputP}`;
    changeDiv.innerHTML = p;
  } catch (error) {
    alert(error);
  }
};

 

> 이 부분이 수정을 하고 나서 저장버튼을 누르면 실행되는 함수이다.

${ isOwner? `<div class="editButtons">
            <i id="fix" class="fa-regular fa-pen-to-square reviewEdit" onclick="reviseReview(event)"></i>
          <i class="fa-regular fa-trash-can reviewDelete" onclick="deleteReview(event)"></i>
        </div>`
            : ""
        }
      </div>
      <div class="reviewImgBox" role="img">
        <img class="reviewImg" src="${poster.reviewImg}" />
      </div>
      <div class="reviewBody">
      <textarea
        id="reviseComment" class="noDisplay reviseInputArea">${
          poster.text
        }</textarea> 
        <button onclick="updateReviews(event)" class="saveReviseComment noDisplay">저장</button>
        </div>
        
        <p class="reviewComment">${poster.text}

> 이 부분은 수정을 할 부분의 html부분이다.(전체가 아니고 부분만 떼온거라 태그가 완전히 닫히지 않았다)

 

사실 이 코드들은 완성된 코드다. 기존에 있었던 코드들을 가져와서 내가 고친 것도 있지만 이렇게 기능이 구현 되다니...그저 감사할따름

수정버튼을 누른 상태

저렇게 기존에 있던 내용들이 유지된채 내용을 바꿀 수 있도록 나온다. 

 

저장을 누르면✅

내용이 저장된다. 그래서 코드를 보면

try {
    await updateDoc(commentRef, { text: commentInputP });
    const changeComment = document.querySelector("#reviseComment");
    changeComment.value = commentInputP;
    const changeDiv = document.querySelector(".reviewBody");
    changeDiv.innerHTML = '';
    const p = `<p class="reviewComment">${commentInputP}`;
    changeDiv.innerHTML = p;
  } catch (error) {
    alert(error);
  }

이 부분이였는데 수정한 글을 저장하고 나서 p로 바꿔주는 코드이다.

이게 보면 changeDiv로 html의 reviewbody를 지정해주고나서 그 안에 값을 비워주고 새로 적은 텍스트를 innerHTML로 넣어주고있다

이 부분이 안되서 한 하루를 애먹었던것같다. 내가 복잡하게 생각해서 그런지 ㅠㅠ 저장한 텍스트를 p태그로 바꿔주는 함수를 따로 또 만들고 있었다.

이렇게 따로 만들다 보니까 그 바뀐 부분만 수정이 아닌 아예 원래 페이지가 처음 렌더링 될때처럼 또 내용을 가지고오는? 그런

방식으로 되었다. 그러니까 막 경로가 더 복잡하고 하나를 해결하면 또 다른 에러가 나오고 난리였다 그냥 말 그대로 난리...ㅎ

 

이부분을 어떻게 헤쳐나가야할까 생각을 하다가 아 그냥 그 원래있던 내용을 비우고 새로운걸 채우자

이 방법을 저장 버튼에 입혀 놓은 함수에 다 넣어버리자 라는 생각이 들었다.

 

그래서 했는데 ㅠㅠㅠ 진짜 한방에 해결 ㅠㅠㅠ 얼마나 속이 시원한지 ,,, 기다려준 팀원분들한테 미안하고 ㅠㅠ 축하한다고 얘기해주는

것도 고맙고 그랬다 막 ㅠ 뭔가 해야하는게 해결이 되니까 그때 부터 마음이 엄청 가벼웠다.

수정버튼 기능 구현을 해야한다고 들은지 3일만에 해결된거라 후....ㅎ 이렇게 고생해놓으면 다음번엔 한결 쉽겠지라고 생각합니다.ㅎ

 

---

원래의 내가 맡기로 한 마이페이지 같은 경우는 미리 계획을 잡고 최대한 할 수 있는만큼 빨리 끝내보자가 목표라서

목요일?쯤 어느정도 다 기능이 끝난상태였다 물론 그때는 마이페이지 제작이 젤 어려웠음 TIL 보면 마이페이지 찡찡된걸 적어놨다.

그러다가 주말쯤에 갑자기 수정버튼기능을 맡으면서 오류를 만났는데ㅋㅋㅋ 그래서 그런지 기억에 젤 오래 남는다.

아 그리고 뭔가 남한테 도움을 잘 안받고 스스로 해결해본 기능이라 더 고생은 했지만 기억에 남는? 암튼 그랬다ㅎ

---

아 그리고 이번 주 아쉬웠던 점❗️

: 뭔가 기능을 하나 맡아서 한다는게 내가 언제 끝날지 모르기에 항상 리밋을 걸어놓고 그때까지 해본다 하고 있는데

 이번주는 어느정도 리밋시간이 지켜지긴했지만 쫌 오바가 된 경우도 있어서 아쉬웠따.. 다음부터는 리밋시간 잘 지켜서 기능 구현 해봐야지!

---

힘들었던것을 지나서 얻은 점

1) 일단 끈기를 얻었다. 아 나도 이렇게 하나에 매달릴 수가 있구나 라는 제대로 느낀 기간✅

 서울까지 가서 친구랑 카페에서 코드를 풀고 있었던점 ㅋㅋ웃겨서 적어놔야겠다. 이때 오류가 해결 됬는데 진짜 와 마음이 시원했다...

2) 공부를 할 목표가 생긴점..? 좋은 팀원들과 얘기하면서 이런 분들과 일하면 좋겠따라는 생각이들었다. 근데 그럴려면 내가 먼저 실력이 좋아야 한다는 생각이 강력히 들었따....! 

  좋은 프로젝트를 만들어 본 경험을 삼아서 더욱더 다음 프로젝트가 욕심이 난다. 그만큼 내가 더 열심히 해야지라는 동기부여가 된다.

 

그래서 이번주 WIL은 여기서 끝ㅎ