[React.js] Cannot find module 'img/full.mp4' or its corresponding type declarations. : React.js video 사용하기

로컬 안에 있는 이미지를 import 하는 것처럼 mp4도 import하여 사용하려고 했으나 빨간 색으로 밑줄이 보였다. 

mp4를 사용하기 위해선 React.js에서 몇가지 설정이 필요하다.

 

1. 아래의 npm 명령을 이용하여 url-loader 설치

npm i -D file-loader url-loader

 

2. src 폴더 내부에 @types/videos.d.ts 파일 생성 및 설정

@types/videos.d.ts

declare module '*.mp4';

 

다시 img를 import 하는 것처럼 시도하면 빨간 줄이 안보이는 것을 확인 할 수 있다.

아래와 같이 최종으로 mp4를 muted, autoplay, loop 옵션을 주어 코드를 짜보았다.

import fullMp4 from 'img/full.mp4';
function Test(){
return (
	<>
    	<video muted autoPlay loop>
            <source type="video/mp4" src={fullMp4} />
          </video>
    </>
)
}