[TIL] 240421 (댓글 수정 시 input으로 수정)

솔·2024년 4월 21일

TIL

목록 보기

18/268

🥞 오늘 한 일

팀 소개 페이지 미니 프로젝트 (못 다한 기능 구현해보기)
- 댓글 수정
  - prompt가 아닌 댓글 자체에서 input으로 나오도록 변경
  - 기존 수정 버튼 안 보이게 하기
  - 포커스가 바로 수정 input으로 가게 하기
- 댓글 비밀번호 입력 input에 type을 password로 설정해서 입력 시 보이지 않도록 하기

🍽️ 문제 해결

댓글 수정 시 input으로 수정

문제

async, await 에 대한 이해도가 떨어진 상태에서 무작정 쓰려다보니 발생한 문제였다.
기존에 짰던 코드는 이미 설계된 수정 코드 내부에서 짜다보니 async await을 신경쓰지 않고 짰다. 최종 코드와 구조는 매우 유사했으나 계속 오류가 나던 부분이 바로 이 때문이었다.

해결

내가 이 문제를 해결하는 데에 가장 필요했던 개념은, await은 async 함수 안에서만 동작한다는 것.
그걸 모르고 그냥 냅다 async가 아닌 함수 내에 await을 넣어버리니 문제가 발생했던 것이다. 최종 코드를 조건문만 떼서 살펴보겠다.

// 패스워드가 일치할 경우
if (data.pw === needPwModi) {
  // 수정할 댓글을 적을 textarea 생성
  const textarea = document.createElement("input");
  modiInput.placeholder = "수정할 댓글을 입력하세요";
  modiInput.value = data.comment; // 기존 댓글이 수정할 textarea에 그대로 들어가도록 함.

  // 수정한 댓글을 등록할 button 생성
  const saveButton = document.createElement("button");
  saveButton.textContent = "댓글 등록";
  saveButton.classList.add("saveBtn");

  // textarea, button을 넣을 div 생성
  const textModiBox = document.createElement("div");
  textModiBox.classList.add("textModiBox");
  textModiBox.appendChild(modiInput);
  textModiBox.appendChild(saveButton);

  // 수정 버튼, 현재 코멘트를 보이지 않게 하고, 수정할 박스를 추가.
  modiBtn.style.display = "none";
  userComment.style.display = "none";
  liLeft.appendChild(textModiBox);
  modiInput.focus(); // 수정 시 바로 input에 포커스가 가도록 하기

  // 문제의 부분. 해결 전에는 async를 사용하지 않아 문제가 발생했다.
  // 수정 버튼 클릭 이벤트.
  saveButton.addEventListener("click", async () => {
    const newComment = modiInput.value;
    if (newComment === '') {
      alert("댓글이 입력되지 않았습니다.")
      return;
    }
    try {
      // Firestore 업데이트
      await updateDoc(doc(db, "webComments", id), {
        'comment': newComment
      });
      // 수정된 댓글을 화면에 반영.
      userComment.textContent = newComment;
      userComment.style.display = "";
      window.alert("메시지가 업데이트되었습니다.");
      window.location.reload();

    } catch (error) {
      window.alert("오류가 발생했습니다.");
    }

  })
} else {
  alert("비밀번호가 다릅니다.");
}