TIL - 2022.03.14 월요일

오늘 한 것

1. react 드래그 앤 드롭 라이브러리 스터디

우리가 만들고자 하는 서비스의 프론트엔드 핵심 기능을 세가지로 추려서 프론트엔드 멤버 셋이서 각각 하나씩 담당하기로 했다. 그 중 내가 맡은 것은 여행 일정을 드래그 앤 드롭으로 등록 및 수정하는 기능. 그 기능을 구현하기 위해 필요한 세부 기능은 총 두가지이다.

1) 드래그 앤 드롭으로 데이터 배열 변경
2) 드래그 가능한 Item을 리사이징해서 해당 일정의 소요시간 변경

 

1번 기능 구현 자체는 어렵지 않았다. react-beautiful-dnd 등의 라이브러리를 이용하면 간단하고 깔끔하게 만들 수 있다. 해당 라이브러리에서 제공하는 snapshot 인자를 이용하면 css 수정도 가능하고.

구현한 drag N drop

react-beautiful-dnd는 대상 Item의 드래그 이벤트가 종료되는 시점에 시작점 Index와 종료지점 Index를 받아올 수 있다. 그 index를 활용해 데이터의 배열을 직접 수정해주는 방식으로 화면에 반영할 수 있다.

이런 식으로 데이터를 직접 수정한다.

문제는, 단순히 순서만 변경하는 것으로는 우리가 목표로 하는 기능을 완전히 구현할 수 없다는 사실이다.

내가 원하는 것은 위 와이어프레임과 같이 뿌려진 데이터가 '시간' 값에 따라 제 위치를 찾아들어가는 방식이다.

grid를 이용하면 UI 자체는 구현할 수 있는데, 단순히 index만 변경하는게 아니라 Item의 grid값을 직접 변경할 수 있는 라이브러리를 찾는 것이 관건인 듯.  react-beautiful-dnd를 이용해서 브라우저에 받아올 수 있는 정보값에는 grid로 활용할만한 데이터가 없다. 따라서 grid를 활용하는 다른 라이브러리를 살펴보려고 한다.

 

아래는 후보 중 하나인 react-grid-layout의 npm docs와 데모페이지.

https://www.npmjs.com/package/react-grid-layout

react-grid-layout

https://strml.github.io/react-grid-layout/examples/0-showcase.html

RGL Example 0 - Showcase

 

라이브러리 서치에는 오픈베이스에서 제공하는 React에서 사용할 수 있는 드래그 앤 드롭 라이브러리 랭킹을 참고하고 있다.

https://openbase.com/categories/js/best-react-drag-and-drop-libraries

10 Best React Drag & Drop Libraries in 2022 | Openbase

 

2. 웹 와이어프레임 마무리

내일이 웹 와이어프레임 마감이라 기획안 최종 정리 후 팀원들과 의견을 나누었다. 시간 안에 구현할 수 있는 수준으로 서비스의 기능도 다이어트 시키고.. 팀원 다섯 중 셋이 코로나 확진되는 바람에 얼굴을 보고 이야기할 수 없는 점이 제일 답답하다. 직접 보고 의논하면 커뮤니케이션에 드는 손실이 훨씬 줄어들텐데. 그래도 프로젝트의 기초적인 기획은 완료된 상태에서 격리되어 다행이다.

 

이번 주 목요일에는 둘이 격리해제, 금요일에는 마지막 하나(바로 나..)까지 격리해제다. 드디어 얼굴을 볼 수 있다. 편안한 마음으로 만날 수 있도록 그 전까지 힘내자. 아자자💪

 

앞으로 할 것

- 일정 드래그 앤 드롭 기능 구현 공부

- 목업 SCSS 기본 개념 정리 완료해서 팀원들과 공유 (리모트니까.. 아예 데모 파일로 만들어서 공유하자.)