React + TypeScript(tsx) 에서 영상 배경 사용하고 싶을 때

React + TypeScript 에서 영상 배경 사용법

내가 이 글을 쓰는 이유는 방금 영상 배경화면 설정하는 법을 구글링을 통해 알아냈기 때문이다.

 

TypeScript error: Cannot find module  '../videos/video.mp4'. TS2307

 

위와 같은 module을 찾지 못한다는 에러가 뜬다면 참고했으면 좋겠다.

 

위의 에러는 파일의 유형을 찾을 수 없다는 유형 스크립트 오류이다. 

 

예시 코드

import bgVideo from "../video/clouds.mp4";

function Home() {
  return (
      <BgContainer>
        <video muted autoPlay loop>
          <source src={bgVideo} type="video/mp4" />
        </video>
      </BgContainer>
  );
}

 

위에서 src가 무슨 타입인지를 typescript에 선언해주어야 한다.

 

해결 방법

react-app-env.d.ts 파일이나 새로운 하나의 .d.ts 파일의 생성하여서 그 안에

 

declare module "*.mp4" {
  const src: string;
  export default src;
}

 

위의 코드를 작성하면 해결된다.

 

 

한 30분간을 찾아 헤맸기 때문에 나와 같은 고민을 하고 있는 사람이 있다면 이 글을 읽고 헤메지 않길 바라며..