드래그앤드롭 라이브러리 사용을 위해
react-beautiful-dnd를 사용하기로 결심했다.
dragula나, react-dnd 등 자유도가 더 있는 라이브러리들이 있었지만,
현재 내가 작업중인 프로젝트에서는 엄청나게 다채로운 드래그앤드랍 보다는 간단한 dnd가 필요하므로
비교적 간단히 쉽게 dnd를 구현할수있는 react-beautiful-dnd라이브러리 사용을 하고자 했다.
👆 (마인드가 잘못됐었다. 이유는 뒤에 후술하겠다.)
그리고는 설치를 했다..
🚫에러🚫가 떴다!.
터미널상 에러에대해서는 많은 지식이 없었던 터라 당황스러웠다.
당연히 구글링을 시작했다.
금방 이유를 찾아낼수 있었다.
자세히 오류를 살펴보면 아래와 같이 해석할 수 있다.
react-beautiful-dnd@13.1.0 모듈을 설치하던 중 react@"^16.8.5" 에 의존하는 것을 발견했다.
그러나 root project에서 발견된 react는 18.2.0 버전이라 react@"^16.8.5" 의존성을 해결하지 못한 것이었다.
그 아래에 해결책 또한 제공하고 있다.
npm install 할 때 --force 또는 --legacy-peer-deps와 함께 실행하라는 것이다.
즉, npm install --legacy-peer-deps 를 실행하면 위 의존성 문제를 해결할 수 있다.
해결 방법
📌npm install --force
로컬에 다운로드 복제본이 존재하더라도 다시 온라인에서 다운로드 받는다.
📌npm install --legacy-peer-deps
마치 6버전 이하에서 동작하던 것처럼 peerDependencies를 무시한다.
📌npm config set legacy-peer-deps true
모든 npm install에서 legacy-peer-deps로 동작하도록 설정한다. npm에서 권장하지 않는 방법이다.
결국 npm install --legacy-peer-deps 로 의존성을 무시하고 라이브러리 설치를 완료 하였다.
😒현직 개발자 친구가 옆에서 보더니
" 너는 취업 후 중요한 니 회사 프로젝트 때도 라이브러리 쓸때 의존성 무시하고 그런식으로 라이브러리 쓸 생각이냐? "
라는 말을 했다. 이말을 듣고 머리가 멍해왔고 생각에 잠기게 되었다.
위 이미지는 react-beautiful-dnd 사용시 처음부터 나와있는 ⚠️경고문이다.
📌굳이 대체할 다른 라이브러리가 있음에도, 유지보수및 지원은 더 이상 하지 않는다는 경고문까지 있는 라이브러리를 내 기술적 모자람으로 인해 좀 더 쉽고 간단하게 기능을 구현할려고 선택 한 것 이었다.
📌한 회사의 개발자로 일하고 있는 상황에서였다면 더더욱 지양해야 할 책임감 없는 행동 인 것이다.
📌사실 어느 라이브러리든 조금만 더 시간 투자하고 사용법을 익히면 결국 다 쓸 수 있게 된다. 더 노력해보지 않고 쉬운길로 가려 한 나자신에 대한 반성을 할 수 있게 한 값진 에러 였다.
다른 라이브러리를 사용하기로 하였다. 분명 어렵겠지만, 오늘 깨달은 것들을 가슴속에 잘 기억하고, 다시 공부 하러 가본다.
