[React] video 삽입하기, Public 폴더 수정 후 해당 파일 접근 url 사용법

프로젝트를 하던 도중 .mp4 영상을 삽입해야 했다. 평소 이미지 파일 삽입하던 대로 src/assets/ 폴더 아래에 videos 폴더를 만든 뒤 삽입하려 했으나 제대로 작동되지 않았다.

 

결국 구글링을 통해 https://stackoverflow.com/questions/60794257/react-js-react-player-how-to-play-local-video을 참고해서 영상을 성공적으로 삽입했었다.

해결책은 public 폴더에 videos폴더와 그 아래 영상들을 위치시키고, 필요한 곳에서 url='videos/video1.mp4' 을 통해 불러와 사용하는 것.

로컬로 실행할 땐 아무 문제가 없었기에 역시 스택 오버플로우가 짱이야 하면서 넘어갔었는데...

 

며칠 뒤 문제가 생겼다.

빌드가 제대로 안된다..! 

 

문제가 뭐지 하고 폴더 구조를 유심히 살펴보기도 하고.. 곰곰히 생각해보았다.

리액트 최상단인 index.html에서 app을 렌더링하는데 그걸 제대로 못하는 것 같았고, 왜 못하지 생각해보다가 public 폴더에 위치한 내가 만든 videos 폴더가 눈에 띄었다. 

 

곧바로 구글링해보았다. 

그리고 public 폴더 변경 시 참고해야 하는 공식문서 글 발견!

 

 

https://create-react-app.dev/docs/using-the-public-folder/

Using the Public Folder | Create React App

 

// 이전 error 발생 코드
<ReactPlayer
    url={'videos/about-video1.mp4'}
    width='400px'
    height='300px'
    playing={true}
    muted={true}
    controls={true}
    loop={true}
    />

// 수정한 코드
<ReactPlayer
    url={process.env.PUBLIC_URL + '/videos/about-video1.mp4'}
    width='400px'
    height='300px'
    playing={true}
    muted={true}
    controls={true}
    loop={true}
    />

 

역시 공식 문서 최고👍

 

public 폴더 참조 시

 

index.html 에서는 %PUBLIC_URL%

그 외 javascript 코드에서는 process.env.PUBLIC_URL

 

위와 같이 참조해야 한다는 것을 알게 되었다.

 

 

 

+) 사실 빌드가 안된 문제는 다른 문제였는데 (import 문제) 덕분에 public 폴더 수정 시 url 사용법도 배우고, 코드 리팩토링도 하게 됐으니 엄청난 뻘짓은 아니었다!