React With Typescript Slack Clone Project Section6 - bonus

이미지(파일) 드래그 앤 드랍 링크

• drag 및 dragover이벤트를 정의
• 이벤트의 대상요소에 drop이벤트 핸들러가 필요

<div id="drop_zone" ondrop="dropHandler(event);">
  <p>Drag one or more files to this <i>drop zone</i>.</p>
</div>

// 이미지 & 파일을 드롭 했을 때 처리 방식

function dropHandler(ev) {
  console.log('File(s) dropped');

   // Prevent default behavior (Prevent file from being opened)
  ev.preventDefault();

  // dataTransfer in items or files add
  if (ev.dataTransfer.items) {
    // Use DataTransferItemList interface to access the file(s)
    [...ev.dataTransfer.items].forEach((item, i) => {
      // If dropped items aren't files, reject them
      if (item.kind === 'file') {
        const file = item.getAsFile();
        console.log(`… file[${i}].name = ${file.name}`);
      }
    });
  } else {
    // Use DataTransfer interface to access the file(s)
    [...ev.dataTransfer.files].forEach((file, i) => {
      console.log(`… file[${i}].name = ${file.name}`);
    });
  }
}

swr 디버깅할때 좋은 devTool - @jjordy/swr-devtools 링크

사용법

import { cache, mutate } from 'swr';

<BrowserRouter>
	<SWRDevtools cache={cache} mutate={mutate} />
	<App />
</BrowserRouter>