React.js에서 쉽게 drag and drop 관련 기능을 구현할 수 있게 해주는 라이브러리 react-beautiful-dnd의 공식 튜토리얼 비디오의 내용을 한국어로 번역하면서 정리하는 블로그 글에 사용될 블로그 독자분들을 도와드리기 위한 Github Repo 입니다.

이 레포지토리는 yarn berry zero-install을 사용합니다. git clone을 통해서 clone 한 이후에 아래에서 소개한 태그들을 활용해서 checkout해서 사용하시면 됩니다.

Create-react-app으로 만들어졌기에, 실행 해보려면 yarn start로 실행하면 됩니다.

최신버전 Ubuntu 22.04에서 Visual Studio Code로 작동이 됨을 확인하였습니다. 만약, 실행이 안되는 환경이 있으면 issue를 남겨 주세요!

강의 내용을 따라오면서, 사용한 코드를 직접 확인해보시고 싶다고요? 이 레포에서 저자가 달아놓은 코드를 활용해서 필요한 부분을 체크아웃해서 확인해 보세요.

git checkout <태그 명>

• init : 초기 repo 설정 및 스타일링
• intro : 첫번째 소개 글에서 다룬 끝부분
• resultPersistence : 두번째 소개 글에서 다룬 onDragEnd 작성하기 부분
• styleUsingSnapshot : 두번째 소개 글에서 다룬 snapshot 인수를 이용한 스타일링 부분
• callbackGlobalStyle : 두번째 소개 글 다룬 DragDropContext의 콜백을 이용한 스타일링 부분
• specificDrag : 세번째 소개 글에서 다룬 Drag Handle 따로 지정하기 부분
• multipleColumn : 세번째 소개 글에서 여러 Column간 item 이동 부분
• isDragDisabled : 세번째 소개 글에서 isDragDisabled를 이용해서 드래그 제한하기 부분
• controlWithType : 세번째 소개 글에서 TYPE을 이용해서 drag를 더 자세히 제어하기 부분
• isDropDiabled : 세번째 소개 글에서 isDropDisabled를 이용한 제어 부분
• horizontalDnd : 네번째 소개 글에서 수평방향 dnd 만들기 부분
• columnReorder : 네번째 소개 글에서 Column 재정렬 부분

본 레포지토리에서는 아래와 같은 테크 스택을 사용합니다.

This Project is BootStrapped with Create React App .