JavaScript 정렬 가이드: 배열, 테이블, 그리고 SortableJS를 활용한 드래그 앤 드롭

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introduction

JavaScript 기반 정렬 기능은 테이블과 리스트에서 데이터를 동적으로 관리하는 데 매우 유용합니다.
이 기사에서는 JavaScript의 기본 정렬 기능부터 직관적인 드래그 앤 드롭 정렬 구현까지 모든 것을 포괄적으로 설명합니다.

이 기사를 읽으면 다음을 할 수 있게 됩니다:

• JavaScript의 표준 기능을 사용하여 배열을 정렬하는 방법을 이해합니다.
• HTML 테이블과 리스트에 대한 정렬 기능을 구현합니다.
• SortableJS를 사용하여 드래그 앤 드롭 정렬을 구현합니다.
• 예제와 사용 사례를 통해 실제 프로젝트에 적용할 수 있는 실전 기술을 습득합니다.

각 주제를 단계별로 안내하므로, 따라하면서 예제를 직접 구현해 보세요.

2. JavaScript 기본 정렬 기능 이해

2.1 기본 정렬 방법

JavaScript에서는 내장된 정렬 기능을 사용하여 배열 데이터를 쉽게 정렬할 수 있습니다.
이 섹션에서는 기본 사용법부터 고급 예제까지 코드 샘플과 함께 설명합니다.

문자열 정렬 예제

const fruits = ["banana", "apple", "orange", "grape"];
fruits.sort();
console.log(fruits); 
// Output: ["apple", "banana", "grape", "orange"]

숫자 정렬 예제

const numbers = [40, 100, 1, 5, 25, 10];
numbers.sort((a, b) => a - b); // Ascending order
console.log(numbers); 
// Output: [1, 5, 10, 25, 40, 100]

숫자를 정렬할 때는 비교 함수를 사용하는 것이 중요합니다.
비교 함수가 없으면 값이 사전식(문자열로)으로 정렬되어 예상치 못한 결과가 발생할 수 있습니다.

2.2 사용자 정의 비교 함수를 사용한 고급 예제

객체 배열을 정렬할 때는 특정 속성을 기반으로 정렬할 수 있습니다.

객체 배열 정렬 예제

const users = [
  { name: "Yamada", age: 30 },
  { name: "Tanaka", age: 25 },
  { name: "Suzuki", age: 35 }
];

// Sort by age
users.sort((a, b) => a.age - b.age);
console.log(users);
/* Output:
[
  { name: "Tanaka", age: 25 },
  { name: "Yamada", age: 30 },
  { name: "Suzuki", age: 35 }
]
*/

위에서 보여준 바와 같이, 비교 함수를 사용하면 고도로 맞춤형 정렬 로직을 구현할 수 있습니다.

2.3 성능 최적화 팁

대규모 데이터셋을 다룰 때는 다음 사항을 고려하세요:

1. 비교 함수 최적화

• 비교 함수 내부에서 무거운 계산을 피하세요.

1. 정렬 대상 데이터 양 줄이기

• 정렬을 수행하기 전에 불필요한 데이터를 필터링하세요.

1. Web Workers 사용

• 정렬 작업을 백그라운드에서 실행하여 전체 성능을 향상시키세요.

3. 구현 예제: HTML 테이블 정렬

3.1 기본 테이블 정렬 기능

여기서는 JavaScript에서 열 헤더를 클릭하여 HTML 테이블 데이터를 정렬하는 기능을 구현합니다.

HTML 코드

<table id="data-table">
  <thead>
    <tr>
      <th onclick="sortTable(0)">Name</th>
      <th onclick="sortTable(1)">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Yamada</td><td>30</td></tr>
    <tr><td>Tanaka</td><td>25</td></tr>
    <tr><td>Suzuki</td><td>35</td></tr>
  </tbody>
</table>

JavaScript 코드

function sortTable(columnIndex) {
  const table = document.getElementById("data-table");
  const rows = Array.from(table.rows).slice(1); // Exclude the header row

  rows.sort((rowA, rowB) => {
    const cellA = rowA.cells[columnIndex].innerText;
    const cellB = rowB.cells[columnIndex].innerText;

    // Detect whether values are numeric or strings, then sort accordingly
    return isNaN(cellA) || isNaN(cellB)
      ? cellA.localeCompare(cellB)
      : cellA - cellB;
  });

  // Re-render after sorting
  rows.forEach(row => table.tBodies[0].appendChild(row));
}

이것은 클릭만으로 각 열을 정렬할 수 있는 간단한 구현입니다.

3.2 필터링과 결합한 고급 예제

정렬과 필터링을 결합하면 검색 결과를 실시간으로 정렬할 수도 있습니다.

JavaScript 코드 예제

document.getElementById("filter-input").addEventListener("input", (e) => {
  const filter = e.target.value.toLowerCase();
  const rows = document.querySelectorAll("#data-table tbody tr");

  rows.forEach(row => {
    const text = row.innerText.toLowerCase();
    row.style.display = text.includes(filter) ? "" : "none";
  });
});

이 기능을 사용하면 사용자가 데이터를 동시에 검색하고 정렬할 수 있습니다.

4. SortableJS를 이용한 드래그 앤 드롭 정렬

4.1 SortableJS란?

SortableJS는 HTML 요소에 대한 드래그 앤 드롭 재정렬을 쉽게 구현할 수 있게 해주는 JavaScript 라이브러리입니다. 다음과 같은 특징을 가지고 있습니다:

• 직관적인 드래그 앤 드롭 인터랙션 .
• 높은 커스터마이징 가능성, 리스트와 테이블에 적용할 수 있습니다.
• 모바일 친화적, 터치 기반 작업을 지원합니다.
• 의존성이 없는 경량으로 뛰어난 성능을 제공합니다.

4.2 SortableJS 설치 및 기본 설정

4.2.1 설치 단계

CDN 사용

<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>

npm 사용 (Node.js 환경용)

npm install sortablejs

4.2.2 기본 구성

다음 HTML 및 JavaScript 코드를 사용하면 드래그 앤 드롭 정렬을 구현할 수 있습니다.

HTML 코드

<ul id="sortable-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

JavaScript 코드

document.addEventListener("DOMContentLoaded", () => {
  const list = document.getElementById("sortable-list");
  new Sortable(list, {
    animation: 150, // Animation speed (milliseconds)
    ghostClass: "sortable-ghost" // Class applied to the element while dragging
  });
});

CSS (선택 사항)

.sortable-ghost {
  opacity: 0.5;
  background: #f0f0f0;
}

4.3 고급 예제: 여러 리스트 간 드래그 앤 드롭

HTML 코드

<div>
  <ul id="list1">
    <li>Item A</li>
    <li>Item B</li>
  </ul>
  <ul id="list2">
    <li>Item C</li>
    <li>Item D</li>
  </ul>
</div>

JavaScript 코드

document.addEventListener("DOMContentLoaded", () => {
  const list1 = document.getElementById("list1");
  const list2 = document.getElementById("list2");

  new Sortable(list1, {
    group: "shared", // Set the group name
    animation: 150
  });

  new Sortable(list2, {
    group: "shared", // Use the same group name
    animation: 150
  });
});

5. 비교 표: 서드파티 라이브러리 vs 네이티브 구현

5.1 비교 표

5.2 네이티브 구현이 최선인 경우

장점

1. 의존성 없음, 외부 라이브러리가 필요하지 않습니다.
2. 짧은 코드로 빠르게 구현 가능하며, 간단한 정렬 기능에 이상적입니다.
3. 높은 성능, 대규모 데이터셋에도 적합합니다.

단점

• 드래그 앤 드롭 지원 없음, 시각적 인터랙션을 위해 추가 작업이 필요합니다.
• 고급 커스터마이징이나 다중 리스트 지원은 추가 구현 또는 라이브러리가 필요합니다.

사용 사례

• 정적 HTML 테이블이나 배열을 정렬해야 할 때.
• 성능과 최소 기능을 우선시하는 프로젝트.

5.3 SortableJS가 최선인 경우

장점

1. 직관적인 시각적 인터랙션을 위한 내장 드래그 앤 드롭.
2. 다중 리스트 이동 및 서버 동기화 지원.
3. 기본적으로 모바일 친화적, 터치 지원 포함.
4. 높은 커스터마이징 가능성 및 프로덕션 환경에 적합.

단점

• 라이브러리 추가 필요, 프로젝트 크기가 약간 증가합니다.
• 코드 복잡도가 증가하여 학습 비용이 높아질 수 있습니다.
• 특정 환경에서 의존성 또는 설정 문제가 발생할 수 있습니다.

사용 사례

• 동적 리스트 또는 드래그 앤 드롭 기능이 필요할 때.
• 여러 리스트 간 아이템 이동 또는 실시간 순서 저장이 필요한 UI 디자인.

6. 구현 팁 및 문제 해결

6.1 성능 최적화

1. 대용량 데이터 세트 처리

대용량 데이터 세트를 정렬하면 성능 저하가 발생할 수 있습니다.

솔루션

• 가상 스크롤 사용

  const visibleItems = items.slice(startIndex, endIndex);
  renderItems(visibleItems);
  

• 비동기 처리 활용 UI를 반응성 있게 유지하기 위해 정렬 로직을 Web Workers에서 실행하세요.

2. DOM 작업 최소화

정렬은 종종 빈번한 DOM 조작을 수반하므로 불필요한 재배치를 줄이는 것이 중요합니다.

솔루션

• DocumentFragment 사용

  const fragment = document.createDocumentFragment();
  rows.forEach(row => fragment.appendChild(row));
  table.appendChild(fragment);
  

6.2 접근성 및 사용성 개선

1. 키보드 탐색 지원

드래그 앤 드롭을 사용할 수 없는 사용자에게 키보드 대안을 제공하세요.

솔루션

document.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowUp') {
    moveItemUp();
  } else if (e.key === 'ArrowDown') {
    moveItemDown();
  }
});

2. 시각적 피드백 강화

정렬 작업을 명확하게 나타내기 위해 시각적 단서를 추가하세요.

CSS 예시

.sortable-ghost {
  opacity: 0.5;
  border: 2px dashed #007BFF;
}

6.3 오류 처리 및 디버깅 가이드

1. 오류: 정렬이 작동하지 않음

원인 1: 잘못된 선택자

const list = document.getElementById("sortable-list");
if (!list) {
  console.error("Element not found. Please check the ID.");
}

원인 2: 이벤트 충돌

list.removeEventListener('click', handler);

6.4 문제 해결 체크리스트

1. 콘솔에서 JavaScript 오류 확인

• 개발자 도구의 콘솔 탭을 사용하여 문제를 식별하세요.

1. 데이터 형식 확인

• 정렬 및 서버 통신에 사용되는 데이터 구조를 검증하세요.

1. 라이브러리 버전 확인

• 모든 라이브러리와 종속성이 최신 버전인지 확인하세요.

7. 자주 묻는 질문 (FAQ)

Q1: 테이블 정렬 기능이 작동하지 않는 이유는 무엇인가요?

A1: 다음 사항을 확인해 주세요.

1. 잘못된 선택자

   const table = document.getElementById("data-table");
   

2. 숫자와 문자열 구분

   rows.sort((a, b) => Number(a) - Number(b));
   

3. 이벤트 충돌 다른 JavaScript 코드나 플러그인이 동일한 요소에 이벤트를 연결할 수 있습니다.

Q2: 드래그 앤 드롭이 응답하지 않습니다. 어떻게 해야 하나요?

A2: 다음 항목을 확인하세요.

1. SortableJS 로드 확인

   console.log(Sortable);
   

2. HTML 구조 확인

   <ul id="sortable-list">
     <li>Item 1</li>
   </ul>
   

3. 모바일 지원 설정 확인

   new Sortable(list, {
     touchStartThreshold: 5
   });
   

4. 잘못된 그룹 구성

   group: "shared"
   

Q3: 정렬된 순서를 서버에 저장하는 방법은 무엇인가요?

A3: AJAX를 사용하여 서버 동기화를 쉽게 구현할 수 있습니다.

JavaScript 예시

const list = document.getElementById("sortable-list");
new Sortable(list, {
  animation: 150,
  onEnd: function () {
    const items = Array.from(list.children).map(item => item.innerText);
    fetch("/save-order", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({ order: items })
    })
    .then(response => response.json())
    .then(data => console.log("Saved successfully:", data))
    .catch(error => console.error("Error:", error));
  }
});

Q4: 성능을 어떻게 개선할 수 있나요?

A4: 다음 접근 방식을 고려하세요.

1. 가상 스크롤 사용

   const visibleItems = items.slice(startIndex, endIndex);
   renderItems(visibleItems);
   

2. Web Workers 사용 UI 반응성을 개선하기 위해 데이터를 백그라운드에서 처리하세요.
3. 정렬 로직 최적화

   rows.sort((a, b) => a - b);
   

Q5: 정렬을 추가 기능과 결합할 수 있나요?

A5: 예, 아래와 같이 쉽게 확장할 수 있습니다.

1. 실시간 필터링과 결합

   document.getElementById("search").addEventListener("input", (e) => {
     const value = e.target.value.toLowerCase();
     document.querySelectorAll("#sortable-list li").forEach(item => {
       item.style.display = item.innerText.toLowerCase().includes(value) ? "" : "none";
     });
   });
   

2. 동적으로 항목 추가 및 제거

   function addItem(text) {
     const list = document.getElementById("sortable-list");
     const li = document.createElement("li");
     li.textContent = text;
     list.appendChild(li);
   }
   
   function removeItem(index) {
     const list = document.getElementById("sortable-list");
     list.removeChild(list.children[index]);
   }
   

8. 결론

8.1 기사 요약

1. JavaScript 기본 정렬

• Array.prototype.sort() 를 사용한 기본 정렬 기법을 배웠습니다.
• 비교 함수와 성능 최적화 전략을 활용한 객체 배열 정렬을 다루었습니다.

2. HTML 테이블 정렬

• 열별로 테이블 데이터를 정렬하는 실용적인 예제를 소개했습니다.
• 필터링 기능과 결합된 고급 사용 사례를 탐색했습니다.

3. SortableJS를 이용한 드래그 앤 드롭

• SortableJS를 사용한 직관적인 드래그 앤 드롭 정렬을 구현했습니다.
• 다중 리스트 이동 및 서버 동기화를 포함한 유연한 접근 방식을 배웠습니다.

4. 기본 정렬 vs SortableJS 비교

• 각 프로젝트에 가장 적합한 접근 방식을 선택할 수 있도록 장점과 사용 사례를 비교했습니다.

5. 문제 해결 및 FAQ

• 일반적인 문제에 대한 해결책과 성능 및 신뢰성을 향상시키는 팁을 제공했습니다.

8.2 실용적인 다음 단계

정렬 기능은 동적 UI와 데이터 관리 개선을 위한 핵심 요소입니다.
앞으로 나아가면서 다음 사항을 기억하세요.

1. 간단한 구현부터 시작하고, 이후 고급 사용 사례를 탐색하세요
2. 코드 커스터마이징을 실험해 보세요
3. 오류 처리와 디버깅 기술을 숙달하세요
4. 성능과 사용성을 지속적으로 개선하세요

8.3 행동으로 옮기기

1. 직접 구현해 보세요!

• 이 기사에서 제공된 코드 예제를 자신의 프로젝트에 적용하고 실제로 테스트해 보세요.
• GitHub에 소스 코드를 공유하고 다른 개발자와 피드백을 교환하는 것도 권장합니다.

2. 지속적으로 스킬을 향상시키세요!

• 정렬 기능에 대해 더 배우고 싶다면 다음 공식 리소스를 참고하세요:
• SortableJS Official Documentation
• MDN Web Docs – Array.sort()

3. 관련 기사 확인

• 또한 “JavaScript 필터링 구현” 및 “DOM 조작 기본”에 관한 기사도 추천합니다.

8.4 최종 생각

정렬 기능은 데이터를 정리하고 사용자 경험을 향상시키는 데 필수적입니다.
이 기사에서 소개한 기술을 활용해 프로젝트를 개선하세요.

새로운 기능 구현이나 예제 확장에 대한 질문이 있으면,
댓글 섹션이나 문의 양식을 통해 언제든지 연락 주세요.

다음 단계는 여러분의 손에 달려 있습니다—오늘 바로 코드를 실험해 보세요!