TypeScript - Motion 3

이 글은 엘리님 강의를 공부하면서 만들었습니다.

git 주소
배포 주소

기능

• 이미지버튼을 누르고 이름과 url에 이미지 url을 넣으면 이미지 article하나가 생성된다.
• url을 비우고 입력하면 랜덤 이미지가 출력되도록 구현했다.
• 비디오 버튼을 누르고 유튜브 주소를 넣으면 해당 비디오를 포함한 article이 생성된다.
• note나 task를 통해 글을 넣을 수 있다.
• x버튼을 통해 삭제할 수 있다.
• 모달을 닫을 때 ESC버튼으로 닫을 수 있다.

이벤트 위임을 통해 버튼들의 이벤트를 하나로 통합해주었다.

const buttonList = document.querySelector('.header-btns') as HTMLElement;


buttonList.addEventListener('click', (e) => {
  const elem = e.target as HTMLElement;
  const type = elem.dataset.type as modeType;
  
  if(type) {
    currentMode = type;
    if(type === 'IMAGE' || type === 'VIDEO') {
      modalBodyLabel.innerText = 'URL';
    } else if(type === 'NOTE' || type === 'TASK') {      
      modalBodyLabel.innerText = 'Body';
    }
    clickBtn();
  }
})

• 현재 버튼의 구조가 간단해서 이렇게 코드를 짯고 추후 복잡해진다면 while문 등을 활용해서 작성해야 하지 않나 싶다.

TS로 바꿔보았다.

• union literal, HTMLElement등을 이용해 가볍게 바꾸어 보았다.