2024.08.04

작성된 리뷰들의 삭제 버튼을 클릭 했을 때 비밀번호 확인 모달창을 띄우기 위해 고민을 했습니다

// 삭제 버튼 클릭 시
// 비밀번호 확인 모달창이 떠야함
// 비밀번호 확인 모달창엔 모달창 닫기 버튼, 비밀번호, 확인 버튼이 포함됨
// 모달창 닫기 클릭 시  모달창이 내려가야 함
// 비번 틀릴 시 알럿창, 맞을 시 게시글 삭제

 

 

 

-> 삭제 버튼이 여러개이기 때문에 querySelectorAll로 삭제버튼을 불러오고, 거기에 클릭 이벤트를 주자.!

const removeBtn = document.querySelectorAll('.removeBtn');
removeBtn.addEventListener('click', () => {
	...
}

에러 발생

removeBtn이 addEventListener 메서드를 지원하지 않는 객체라는 것을 의미합니다. 보통 이 에러는 removeBtn이 실제 DOM 요소가 아니라, 다른 타입의 객체이거나 null일 때 발생합니다.

-> removeBtn을 확인하기 위해 콘솔에 출력해봅니다

Nodelist

배열같이 생긴 NodeList가 무엇인지 구글링을 해봅니다.

 

 

https://merrily-code.tistory.com/212

HTMLCollection과 NodeList, 너흰 누구니?

 

 

querySelectorAll 같은 메서드를 통해 NodeList가 반환되며, DOM 문서 내의 여러 요소를 선택할 때 사용됩니다. NodeList는 배열처럼 인덱스를 사용하여 요소에 접근할 수 있지만, 실제 배열은 아닙니다.

NodeList는 노드를 정적으로 관리합니다. 다만 childNodes 가 리턴한 NodeList는 정적임이 보장되지 않습니다.

 

또한, NodeList는 엄밀히 배열이 아니기 때문에 map, reduce 등 유용한 고차 함수들을 활용할 수 없다는 점도 단점입니다.

(*forEach의 경우, 배열의 forEach와 똑같이 동작하지만 배열의 것이 아닌 NodeList 객체가 독자적으로 가진 메서드입니다!)

 

따라서, HTMLCollection 또는 NodeList를 그대로 사용할 때는 부작용 예방 차원 및 고차 함수 지원을 위해 Array 로 치환해 사용할 것을 권장합니다.

 

-> 아하 NodeList는 유사객체배열이고 정적이구나..! forEach 배열메서드를 가지고 있구나.!

 Array.from() 또는 전개 연산자 (...)를 통해 변환하면 map, reduce, filter 등과 같은 배열 메서드 사용 가능하구나.!

const removeBtn = document.querySelectorAll('.removeBtn');
removeBtn.forEach((button) => {
  button.addEventListener('click', () => {
    const confirmModal = document.getElementById('confirmModal');
	...

    confirmModal.style.display = 'block';
  });
});

정상 작동