[RN] 비디오파일 캐싱

회사 입사 후 웹프론트 관리자쪽도 맡아서 일하다가, 리액트네이티브로 모바일쪽도 맡아서 진행하다가 최근부터는 RN을 주력으로 일을 하고있당.
둘다 경험해본바로는 음.. 난 웹보다는 모바일이 더 재미가 있다.
네이티브로 시작한 모바일개발일이 아니어서 그런지, 리액트 네이티브로 일을 하다보니 네이티브쪽도 관심이 생겨서 코틀린은 정말 맛보기로 튜토리얼정도만 진행해봤다. 자바스크립트라는 언어 하나를 계속 해서 그런지, 코틀린을 대충 훑어보는 정도였는데 딱히 거부감도 없었다. 입사 초반에는 뭘하더라도 안절부절했는데
요근래에는 뭐... 되겠죠?? 이런 마인드인것 같다. 하면 뭐 되기는 하는것 같다. 아직도 초짜라 많이 부족하지만..ㅎㅎ
사실 모바일은 언어나 문법 이런것들보다는.. 환경설정이 제일 큰 고비이자 문제니까.. 생각해보니 모바일만 그런게 아니구나 ㅎㅎ 다 그러네 개발일은 ㅋㅋ
할튼 서버쪽에서 내려주는 비디오데이터를 rn화면상에서 다 긁어와서 보여주려다 보니 앱이 심하게 과부하가 걸려서 멈춰버리는 현상이 생겼다. 매번 앱을 켤때마다 맵으로 돌리고 하다보니.. 동시에 20개 정도되는 비디오를 실행시키려다보니 완전 맛이 간다. 그러다보니 캐싱이 간절히 필요해서 캐싱 적용을 해봤다.
RN 파일 시스템에 접근하는 방법을 찾다보니 나름 많이들 쓰는 모듈이 있어서 사용했다.(디바이스 내부 캐싱경로로 접근하려는 방법을 찾아보면.. 대부분 fs모듈을 추천해준다.. 스택형님들도..)
사용 모듈은 react-native-fs
RN에서 비디오관련 모듈은 대표적으로 이거 하나가 그나마 잘돌아간다.. react-native-video 사실 이 모듈말고는 아직.. 대체할만한 게 없다..
앱 초기에 회사유튜브 관련 주소를 서버로부터 받아온 후 캐러셀컴포넌트를 사용하여 만들어보려했지만, 유튜브는 지원을 안했던것 같다.(버전도 0.5.2 최근에는 0.6.0인가 나왔을거다 아직 베타다... 최근에는 또 hermes랑 new-architecture가 rn 0.68인가 이 버전부터 적용이 되었는데 비디오 모듈이 버전을 따라가지 못하는 문제가 발생하기도 하였다. rn은 진짜.. 버전이 너무 빨리 오른다..)

할튼 뭐 fs모듈 사용해서 비디오파일 캐싱 메모
fs는 많은 props들을 지원해주는데 다 필요없고 downloadfile, loadfile 이거 2개면 된다. 처음에 뭐 읽기, 쓰기, 저장, 삭제, 파일생성 파일삭제 폴더생성 폴더삭제, 뭐 생성 다 해봤는데. 파일관련해서는 저것만 하면 된다. 그래도 지원해주는게 많으니 한번 들여다보면 도움이 된다.

const extension = Platform.OS === 'android' ? 'file://' : '';
 const path = `${extension}${RNFS.CachesDirectoryPath}/${videoId}.mp4`;
 const loadFile = (path) => {
   setCachedData({ uri: path });
 };
 const downloadFile = (uri, path) => {
   RNFS.downloadFile({
     fromUrl: uri,
     toFile: path,
   }).promise.then((res) => loadFile(path));
 };
 useEffect(() => {
   RNFS.exists(path).then((exists) => {
     if (exists) {
       console.log('Cached Video Exist!');
       loadFile(path);
     } else {
       console.log('Cached Video Not Exist... Downloading...');
       downloadFile(cachedSource.storageUri, path);
     }
   });
   return () => setCachedData({ uri: '' });
 }, []);

걍 코드보면 알수 있듯이 캐싱된 비디오파일이 있으면 걍 고거 불러오고 어어 어 만약에 없어? 캐싱해 다운로드해~ 어 다 됐니 어 그럼 불러와~ 이거다.끝
아직 다듬어지지않은 날것이지만, 이정도만 해도 잘 돌아간다. 초짜 실력으로는 맞는지 확신이 없지만, 돌아는 가니까 pr날리면서 더 잘 다듬어 봐야겠다.
나중에 또 써먹을 일이 있을까
결론은 잘 돌아간다. 틱톡처럼 엄청나게 부드럽게 돌아가지는 않지만, 처음에 앱이 뻑났더것과 비교하면 성능 향상이 엄청됐다. 이미지파일도 캐싱해버릴까 생각중...