소개
이 Lab 에서 Alex 의 개인 재정 추적기 개발 여정은 고급 단계로 접어들어, 정교한 이벤트 처리 기술을 통해 애플리케이션의 상호 작용성을 향상시키는 데 초점을 맞춥니다. 이 장면은 기술 스타트업에서의 브레인스토밍 세션에서 시작되며, Alex 는 재정 기록을 재정렬하기 위해 드래그 앤 드롭 기능을 추가할 것을 제안합니다. 이 야심찬 목표는 사용자에게 기록을 직관적으로 정리할 수 있는 방법을 제공하여 개인 재정 관리의 유동적인 특성을 반영하는 것입니다. 이를 위해서는 Alex 가 고급 DOM 이벤트 (DOM events) 를 탐구하고 시각적으로 매력적이고 사용자 친화적인 방식으로 요소를 조작해야 합니다.
이 Lab 에서는 JavaScript 의 고급 이벤트 처리에 대해 자세히 알아보고, 목록에서 항목을 동적으로 재정렬하기 위해 드래그 앤 드롭 기능을 구현하는 방법을 배우게 됩니다. 이 기술은 사용자 경험을 우선시하는 현대적이고 상호 작용적인 웹 애플리케이션을 만드는 데 매우 중요합니다.
지식 포인트:
- 드래그 앤 드롭 API (
dragstart,dragover,drop)
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 문제를 해결할 수 있게 되었습니다. 이러한 지식은 오늘날의 사용자가 상호 작용 및 응답성에 대해 높은 기대를 충족하는 현대적인 웹 애플리케이션을 구축하는 데 매우 중요합니다.
