[react-beautiful-dnd] Could not find a declaration file for module 'react-beautiful-dnd'.

1. 에러가 발생한 이유

이 에러는 타입스크립트 프로젝트에서 react-beautiful-dnd를 사용할 때 발생하는 문제로, 해당 라이브러리에 타입 정의 파일(.d.ts)이 포함되어 있지 않거나, 타입 패키지가 프로젝트에 설치되지 않은 경우에 나타납니다. 타입스크립트는 모든 모듈의 타입을 확인하려고 시도하지만, 타입 정의가 없으면 implicitly has an 'any' type 경고를 출력합니다.

 

2. 해결 방법

1) 타입 정의 파일 설치

react-beautiful-dnd는 커뮤니티가 관리하는 타입 정의 파일이 별도로 제공됩니다. 이를 설치하면 문제를 해결할 수 있습니다.

npm install --save-dev @types/react-beautiful-dnd

 

혹은 yarn을 사용하는 경우:

yarn add @types/react-beautiful-dnd --dev

 

 

2) 타입스크립트 설정 수정 (임시 해결 방법)

타입 정의 파일을 설치할 수 없는 경우, 타입스크립트 설정에서 해당 모듈을 예외 처리할 수 있습니다. tsconfig.json에 아래 옵션을 추가하세요

//json
{ "compilerOptions": { "noImplicitAny": false } }

 

또는 declare module을 통해 직접 모듈 선언을 추가합니다

// src/types/react-beautiful-dnd.d.ts declare module 'react-beautiful-dnd';

 

이 방법은 임시적인 해결책으로 권장되지 않으며, 타입 정의 파일을 설치하는 것이 최선입니다.

 

저는 기존에 설치되어 있던 패키지를 삭제하고 type 버전으로 재설치를 해주었습니다.

 

3. 느낀 점

이 문제를 통해 타입스크립트의 엄격한 타입 검사의 중요성을 다시 느꼈습니다. 특히, 서드파티 라이브러리를 사용할 때 타입 정의 파일을 확인하고 설치하는 습관을 들이는 것이 필요하다고 생각했습니다. 또한, 타입 정의가 없는 라이브러리를 사용할 때 발생할 수 있는 문제를 효과적으로 해결하는 방법을 배웠습니다. 앞으로는 라이브러리 선택 시 타입스크립트와의 호환성을 먼저 고려해야겠다는 교훈을 얻었습니다.