드래그 앤 드롭으로 개인 재정 추적기 향상 - JavaScript 실습

소개

이 Lab 에서 Alex 의 개인 재정 추적기 개발 여정은 고급 단계로 접어들어, 정교한 이벤트 처리 기술을 통해 애플리케이션의 상호 작용성을 향상시키는 데 초점을 맞춥니다. 이 장면은 기술 스타트업에서의 브레인스토밍 세션에서 시작되며, Alex 는 재정 기록을 재정렬하기 위해 드래그 앤 드롭 기능을 추가할 것을 제안합니다. 이 야심찬 목표는 사용자에게 기록을 직관적으로 정리할 수 있는 방법을 제공하여 개인 재정 관리의 유동적인 특성을 반영하는 것입니다. 이를 위해서는 Alex 가 고급 DOM 이벤트 (DOM events) 를 탐구하고 시각적으로 매력적이고 사용자 친화적인 방식으로 요소를 조작해야 합니다.

이 Lab 에서는 JavaScript 의 고급 이벤트 처리에 대해 자세히 알아보고, 목록에서 항목을 동적으로 재정렬하기 위해 드래그 앤 드롭 기능을 구현하는 방법을 배우게 됩니다. 이 기술은 사용자 경험을 우선시하는 현대적이고 상호 작용적인 웹 애플리케이션을 만드는 데 매우 중요합니다.

지식 포인트:

드래그 앤 드롭 API (dragstart, dragover, drop)

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 95%입니다.학습자들로부터 97%의 긍정적인 리뷰율을 받았습니다.

DragEvent

DragEvent는 드래그 앤 드롭 (drag-and-drop) 작업을 처리하기 위한 이벤트 인터페이스입니다. MouseEvent에서 확장되므로 모든 마우스 이벤트 속성과 드래그 앤 드롭 작업과 관련된 몇 가지 추가 속성을 포함합니다.

드래그 앤 드롭 설정

요소를 드래그 가능하게 만들려면 해당 요소의 draggable 속성을 true로 설정해야 합니다. 그런 다음 드래그 앤 드롭 이벤트를 처리하기 위해 이벤트 리스너를 추가할 수 있습니다.

<div id="drag-item" draggable="true">Drag me</div>

또는

setAttribute("draggable", true);

드래그 앤 드롭 이벤트 처리

드래그 앤 드롭 작업에는 dragstart, drag, dragend, dragenter, dragover, dragleave, 및 drop을 포함한 여러 이벤트가 관련됩니다.

dragstart: 사용자가 요소를 드래그하기 시작할 때 트리거됩니다.
drag: 요소가 드래그되는 동안 지속적으로 트리거됩니다.
dragend: 드래그 앤 드롭 작업이 종료될 때 트리거됩니다.

예를 들어, 요소에 이벤트 리스너를 추가하는 경우:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Drag and Drop Example</title>
    <style>
      #drag-item {
        width: 100px;
        height: 100px;
        background-color: rgb(87, 196, 238);
        color: white;
        line-height: 100px;
        text-align: center;
        margin-bottom: 10px;
        cursor: pointer;
      }
      #drop-zone {
        width: 200px;
        height: 100px;
        background-color: rgb(214, 210, 210);
        line-height: 100px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="drag-item" draggable="true">Drag me</div>
    <div id="drop-zone">Drop here</div>

    <script>
      const dragItem = document.getElementById("drag-item");

      dragItem.addEventListener("dragstart", function (event) {
        // Set the drag data
        event.dataTransfer.setData(
          "text/plain",
          "This is the data being dragged"
        );
      });

      dragItem.addEventListener("dragend", function (event) {
        // Operations after dragging ends
        console.log("Drag ended");
      });
    </script>
  </body>
</html>

드롭 처리

요소가 드롭된 항목을 수신하도록 하려면 dragover 및 drop 이벤트를 처리해야 합니다.

예를 들어:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Drag and Drop Example</title>
    <style>
      #drag-item {
        width: 100px;
        height: 100px;
        background-color: rgb(87, 196, 238);
        color: white;
        line-height: 100px;
        text-align: center;
        margin-bottom: 10px;
        cursor: pointer;
      }
      #drop-zone {
        width: 200px;
        height: 100px;
        background-color: rgb(214, 210, 210);
        line-height: 100px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="drag-item" draggable="true">Drag me</div>
    <div id="drop-zone">Drop here</div>

    <script>
      // JavaScript code goes here
      const dragItem = document.getElementById("drag-item");
      const dropZone = document.getElementById("drop-zone");

      // Drag start event
      dragItem.addEventListener("dragstart", function (event) {
        event.dataTransfer.setData("text/plain", "Drag Successful");
      });

      // Drag over event
      dropZone.addEventListener("dragover", function (event) {
        event.preventDefault(); // Necessary to allow dropping
      });

      // Drop event
      dropZone.addEventListener("drop", function (event) {
        event.preventDefault();
        const data = event.dataTransfer.getData("text/plain");
        console.log("Dropped data:", data);
        dropZone.textContent = `Dropped: ${data}`;
      });
    </script>
  </body>
</html>

✨ 솔루션 확인 및 연습

재정렬을 위한 드래그 앤 드롭 구현

이 단계에서 당신과 Alex 는 드래그 앤 드롭을 사용하여 사용자가 재정 기록을 재정렬할 수 있는 기능을 추가하여 개인 재정 추적기를 향상시킬 것입니다. 여기에는 dragstart, dragover, drop과 같은 여러 이벤트를 캡처하고 DOM 이 그에 따라 업데이트되도록 하는 작업이 포함됩니다.

먼저, script.js의 renderRecords 함수를 수정하여 각 레코드를 드래그 가능하게 만들고 이러한 이벤트를 처리합니다.

document.addEventListener("DOMContentLoaded", function () {
  const renderRecords = () => {
    recordsList.innerHTML = "";
    records.forEach((record, index) => {
      const recordElement = document.createElement("div");
      recordElement.setAttribute("draggable", true);
      recordElement.classList.add("record-item");
      recordElement.innerHTML = `
                ${record.description} - ${record.amount} (${record.type}) <button onclick="deleteRecord(${index})">Delete</button>
            `;
      recordElement.addEventListener("dragstart", (e) => {
        draggedIndex = index;
      });
      recordElement.addEventListener("dragover", (e) => {
        e.preventDefault();
      });
      recordElement.addEventListener("drop", (e) => {
        const temp = records[draggedIndex];
        records[draggedIndex] = records[index];
        records[index] = temp;
        saveRecords();
      });
      recordsList.appendChild(recordElement);
    });
  };
});

이 구현을 통해 사용자는 재정 기록을 드래그하여 목록 내의 새 위치에 드롭할 수 있으며, 애플리케이션은 자동으로 기록의 순서를 업데이트합니다.

✨ 솔루션 확인 및 연습

요약

이 랩에서 Alex 와 함께한 여정을 통해 개인 재정 추적기에 고급 기능, 즉 재정 기록 재정렬을 위한 드래그 앤 드롭 기능을 성공적으로 구현했습니다. 이러한 개선 사항은 애플리케이션의 사용성을 향상시킬 뿐만 아니라 웹 개발에서 복잡한 이벤트 처리 및 동적 UI 업데이트를 소개합니다. 이 과정을 통해 사용자의 작업에 정교하게 반응하는 대화형 및 직관적인 웹 애플리케이션을 만드는 데 대한 귀중한 통찰력을 얻었습니다.

드래그 앤 드롭과 같은 고급 이벤트 처리 기술을 탐구함으로써 웹 개발자로서의 도구 모음이 확장되어 더 복잡한 UI/UX 문제를 해결할 수 있게 되었습니다. 이러한 지식은 오늘날의 사용자가 상호 작용 및 응답성에 대해 높은 기대를 충족하는 현대적인 웹 애플리케이션을 구축하는 데 매우 중요합니다.