[troubleshooting][technology decision]drag and drop 라이브러리 선택

어떤 오류를 해결한 과정보다는 프로젝트에 적합한 기술을 선택하기 위한 고민과 과정을 기록한 것입니다.

기술 선택에 도움이 되셨으면 좋겠습니다:)

 

 Problem 

⚠️ 상황

: 작사 지원 프로젝트 휘리릭에서 사용자가 좀 더 편하게 가사 순서 변경을 할 수 있도록 dnd 기능 구현을 맡게되었습니다. React-Draggable, React DnD, React Beautiful DnD 등  많은 darg and drop 라이브러리들 중 프로젝트의 요구사항을 충족시키기 위한 최적의 도구를 찾아야했습니다.

• drag and drop 기능 구현
• 이후 업무와 프로젝트 마감 기한으로 빠른 개발 필요

---

 Research 

🧐 접근

: 각 라이브러리의 장단점 비교를 위해 라이브러리들의 특징들을 조사했습니다. 

 

💡 라이브러리들의 특징

🔸React-Draggable

• 드래그가 가능한 element를 만들기 위해 사용됩니다.
• drag and drop 기능을 빠르고 쉽게 구현할 수 있고 간단합니다.
• 많은 컨트롤과 커스터마이징 기능을 제공하진 않습니다.

🔸 React DnD

• HTML5의 darg and drop API 기반의 라이브러리입니다.
• React 컴포넌트에서 drag and drop 로직을 직접 작성해야합니다.
• 따라서 복잡하나 유연한 로직을 작성할 수 있습니다.

🔸React Beautiful DnD

• atlassian(jira와 trello를 만든 곳)에서 배포하는 오픈 소스 라이브러리입니다.
• drag and drop 인터랙션 추상화가 간소화되어있고, 더 많은 기능과 성능을 제공합니다.
• UI/UX나 퍼포먼스가 좋은 동작이 predefined 되어있습니다.

---

 Decision 

✅ React Beautiful DnD 선택

 

💡 이유

1️⃣ 로직 구성

: react dnd는 hover 중일 때 순서가 변경되는 애니메이션이나 위치 변경을 직접 정의해야합니다.

react beautiful dnd는 애니메이션, 어느 좌표부터 순서를 변경할 지 결정하는 로직 구성이 잘 되어 있습니다.

 

2️⃣ drag and drop 요소의 이동과 재정렬을 지원

: 요소 이동과 재정렬을 지원하기 때문에 리스트나 테이블과 같은 ui 컴포넌트에서 많이 사용됩니다. 작사 노트는 리스트 형식으로 구현되어 있기에 휘리릭 프로젝트 ui 컴포넌트와 잘 맞다고 판단했습니다.

 

3️⃣ 관련 자료 多

: 처음 구현해보는 기능이기 때문에 관련 자료가 많은 라이브러리를 선택하는 것이 좋다고 생각했습니다.

 

4️⃣ 많은 커스터마이징이 필요하지 않음

: 좀 더 복잡하고 커스터마이징이 필요한 경우 react dnd를 사용하면 되지만 휘리릭 프로젝트에서는 많은 커스터마이징이 필요하지 않았습니다. 단순히 drag and drop과 리스트 재정렬이 필요했습니다.

또한 이미 ui/ux로 괜찮은 동작들이 predefined되어 있는 라이브러리를 선택하는 것이 시간상 효율적이라고 판단했습니다.

 

➕react-draggable은 아이템들 간의 순서 변경측면 보다 ,윈도우즈에서 윈도우를 드래그해서 위치를 바꾸는 부분에서 강점이 있는 라이브러리라고 합니다!

➕ react-dnd는 커스터마이징이 가능한 많은 기능들이 제공되어 있습니다. 그래서 복잡한 드래그 앤 드롭을 구현할 수 있어서 채팅 시스템, 댓글 시스템에서 많이 사용한다고 합니다!

 

---

Review

적절한 기술 선택은 개발 효율성을 높인다!

: 처음에는 라이브러리 선택에 시간을 투자하는 것이 개발 시간을 지연시키기는게 아닐까하는 걱정을 했지만 실제로는 더 적합한 도구를 사용하면서 개발 속도를 높일 수 있었다. 라이브러리 뿐만 아니라 프로젝트에 적합한 기술을 도입하며 이 과정에 시간과 노력을 투자한 프로젝트였다. 기술 선택 과정은 종종 고려되지 않거나 넘어가기 쉬운 부분일 수 있는데 실제로는 개발 과정의 효율성을 높이는 중요한 단계라는 것을 다시 한 번더 실감했다..!🤓