웹 사이트의 최근 파일 기록 기능을 구현하는 방법 중 하나는 드래그 앤 드롭 이벤트를 사용하는 것입니다. 이 기능은 사용자가 파일을 드래그하여 웹 사이트에 업로드하는 것을 가능하게 합니다. 자바스크립트로 이 기능을 구현하는 방법을 알아보겠습니다.

드래그 앤 드롭 이벤트를 지원하는 HTML 엘리먼트 생성하기

먼저, 드래그 앤 드롭 이벤트를 지원하는 HTML 엘리먼트를 생성해야 합니다. 다음은 드랍 영역을 나타내는 <div> 엘리먼트의 예시입니다.

<div id="drop-area">
  <p>여기에 파일을 드래그하세요.</p>
</div>

드래그 앤 드롭 이벤트 핸들러 함수 작성하기

이제 자바스크립트 코드를 사용하여 드래그 앤 드롭 이벤트 핸들러 함수를 작성해야 합니다. 다음은 파일을 드롭할 때 호출되는 handleDrop 함수의 예시입니다.

function handleDrop(event) {
  event.preventDefault(); // 기본 동작 방지

  var fileList = event.dataTransfer.files; // 드롭한 파일 리스트 가져오기

  // 파일 리스트 순회
  Array.prototype.forEach.call(fileList, function(file) {
    // 최근 파일 기록을 추가하는 로직을 구현하세요.
    console.log('파일 이름:', file.name);
    console.log('파일 크기:', file.size);
    console.log('파일 유형:', file.type);
  });
}

드래그 앤 드롭 이벤트 리스너 등록하기

마지막으로, 드래그 앤 드롭 이벤트 리스너를 등록하여 이벤트가 발생할 때마다 핸들러 함수가 호출되도록 해야 합니다. 다음은 drop-area 엘리먼트에 드롭 이벤트 리스너를 등록하는 코드입니다.

var dropArea = document.getElementById('drop-area');

dropArea.addEventListener('drop', handleDrop);

실행 및 결과 확인하기

이제 웹 페이지를 실행하고 드래그 앤 드롭 영역에 파일을 드래그한 후 개발자 콘솔을 확인하면 파일의 이름, 크기, 유형 등을 확인할 수 있습니다.

참고 자료

• MDN 웹 문서 - 드래그 앤 드롭 API

이 예시 코드는 HTML5 표준을 따르기 때문에 최신 버전의 웹 브라우저에서 동작합니다. 세부 구현은 개발 환경에 맞추어 진행하시면 됩니다.