오늘의 오류는 수정 버튼에서 발생했다.
테스트할 때는 내용을 성실하게 입력하거나 입력하지 않다 보니 몰랐으나,
prompt() 창에는 아무것도 입력하지 않고 '취소'를 누르는 경우도 발생했다.
이때 내용이 null로 마음대로 수정되는 상황을 해결한 방법을 소개한다.
prompt() 사용 시 발생하는 경우의 수
처음 수정 버튼을 구현할 때 기존의 코드는 이렇게 작성되어 있었다.
$('.ourcards').on('click', '.editbtn', async function () {
let card = $(this).closest('.card.border-light.mb-3');
let contentdox = card.attr('id');
console.log(contentdox);
let newContent = prompt("수정할 한마디를 입력해주세요.")
if (newContent == '') {
alert('내용이 비어 있어 수정할 수 없습니다!')
}
else {
await updateDoc(doc(db, "comments", contentdox), { content: newContent });
window.location.reload();
}
});
이 코드의 문제는 만약 prompt 창에서 취소 버튼을 누르거나 기타 아무것도 입력하지 않은 채 완료를 누르지 않고 나가버리는 경우 newContent에 null이 반환되고, 이것은 공백을 입력한 것과는 다르기 때문에 else문이 실행되어 내용이 null로 수정되어 버리는 것이었다.
이 문제의 해결 방법은 간단하다.
if문의 중간에
else if (newContent == null) {}코드를 추가하여 값이 null이 될 경우 아무 행동도 하지 않도록 하는 것이다.
이러면 newContent의 값은 사용되지 않기에 null로 남아 있어도 문제가 없다.
다시 수정 버튼을 눌렀을 때는 내용을 새로이 입력받기 때문에 다음 실행에도 영향을 주지 않는다.
