날짜: 2022년 9월 23일 금요일

키워드 및 질문

• dynamic html tag with JS
• event delegation
• FileReader

본문

막힌 부분

동적으로 생성된 HTML 태그에 이벤트리스너를 다는 부분에서 어려움을 겪음.

⇒ 해결: event delegation 를 사용.

document.addEventListener('click',function(e){
    if(e.target && e.target.id== 'brnPrepend'){
          //do something
     }
 });

아래 코드는 엘리스의 답안 코드

document.querySelector('#add-post').addEventListener('click', createModal);

function createModal() {
  const modalEl = document.createElement('div');
  modalEl.setAttribute('class', 'modal__layout');
  modalEl.innerHTML = modal;

  document.querySelector('body').prepend(modalEl);

  document
    .querySelector('.modal__close')
    .addEventListener('click', function () {
      document.querySelector('body').removeChild(modalEl);
    });
    
  // 지시사항에 맞춰 코드를 작성해주세요.
}

그냥 이벤트리스너의 콜백 안에서 다시 쿼리셀렉터로 가져와 바로 이벤트리스너를 달아버리네… 이렇게 해도 함수가 닫히지 않고 계속 이벤트를 대기하는건가보다..

새롭게 배운 부분

브라우저 내부 IndexedDB.. 너무 어려웠다. 사용만 하려고 해도 메서드 엄청 많고.. 내부 구조는 더 모르겠고..

FileReader도 꽤 어려웠다. 다들 WepAPI던데..

Node.setAttribute(”class”, “className”); 클래스 이름 변경

Node.prepend(div); 하위 첫번째 자식으로 태그 추가

<aside> 📌 요약: JS에 의해 동적으로 생성된 HTML 태그에 이벤트를 그냥 달면 달리지 않는다. event delegation을 활용하여 이벤트를 달 수 있다. 파일을 읽어오는 FileReader와 브라우저 내부 DB를 사용하게 만들어주는 IndexedDB 등 Wep API를 배웠다.

</aside>