[React] 3주차 중간발표 프론트 부분 정리 해둔 것

라이브러리

1. React-slick

메인페이지의 슬라이드 구현을 위해서 사용

 

목표페이지를 각각 만들어주는건 불필요한 렌더링을 야기시킨다고 생각하여 라이브러리를 사용하였고

다른 슬라이드 라이브러리에 비해 상대적으로 가볍고 심플하게 구현이 가능하여 선택했습니다.

 

 

2.React-html5-video-editor

메인의 각 하루하루 목표페이지에 동영상 등록 페이지에 적용하기 위하여 사용

 

사용자가 동영상을 1초만 찍어서 올리기엔 불편할 수도 있다고 생각하여 해당 라이브러리의

비디로 크랍기능을 사용해서 3초내지 5초짜리 동영상을 올려도 원하는 부분(1초)를 생각하여 올릴 수 있도록

구현을 생각해보았습니다.

 

라이브러리 선택 이유

동영상편집기능을 직접구현하기엔 시간이 너무 빠듯하였고 React-native쪽으론 동영상 편집을 가진 라이브러리가 다수 있었지만

React 동영상 편집이 가능한 심플한 라이브러리는 해당 라이브러리가 가장 적합했습니다.

 

js 동영상 편집 라이브러리(movie masher)도 있었으나 기능이 너무 많고 무거워서 해당 프로젝트에 어울리지 않아 배제했습니다.

 

 

리덕스 툴킷

동영상 파일업로드의 비동기적 처리와 전역관리의 유지보수의 편의성을 위해서 사용하였습니다.  동영상을 3일째 올리는 날 동영상이 합치는 로직이 같이 포함되어있어 합쳐지는 로딩시간이 7초 내외정도 걸리게 되는데 그 로딩시간이 자칫 렉이 걸렸다고 인지할 수 있는 부분이 있기 떄문에 로딩화면을 띄어주기 위함으로 사용했습니다.

 

전역관리 툴로 리덕스 툴킷을 사용한 이유는 아무래도 상대적으로 생태계가 가장 크고 접근성이 뛰어나서 선택하게된 이유가 큽니다. 하지만 보일러플레이트가 상당히 많고 리덕스에 비해 중복코드도 상당히 줄어든편이지만 여전히 러닝코드등도 많고 전역관리를 해야하는 부분이 크지않을 떈 부담스러운게 사실입니다 .그래서 추후 리액트를 위한 상태관리 라이브러리인 리코일로 리팩토링하는 부분도 염두에 두고 있습니다. 상대적으로 가볍고 리액트를 위한 라이브러리기떄문에 좀 더 직관적이며 사용이 간편하다고 느꼈기때문입니다.

 

 

 

 

 

트러블 슈팅

 

동영상 파일 업로드를 formdata를 이용하여 구현했는데 동영상은 넘어갔지만 promise 타입에러 발생

--> fullfilled extrabuilder에서 Payload값을 배열로 저장하여 문제가 발생한다고 생각되어 직접적으로 action.payload값을 

저장시켜주니 해결

 

동영상 등록이 백쪽에서 제대로 된 것을 확인하고 영상을 돌려보니 영상은 안나오고 소리만 나오는 문제 발생

--> 보내는 방식이 잘못되었다고 생각하여 input type을 바꿔도 보고 했지만 문제 발견을 못했었는데 특정 동영상은 합쳐지는 걸 발견하고 코덱부분이 달라서 안되는 부분을 확인했습니다. 아이폰으로 찍은 영상은 코덱이 hevc를 기본적으로 가져가는데 동영상을 합칠 때 사용하는 ffmpeg은 AAC H.264를 기본적으로 가져가고 있어서 추후 인코딩이나 코덱 교체의 필요성을 느끼고 있습니다. 해당 부분은 현재 진행중입니다.

 

 

 

 

 

 

정리가 제일 어렵다. 후

 

노션에 최종정리본

 

https://www.notion.so/c45f71941bed4779b40f0eea644ffd02