🔸 라이브러리 사용 이유

• react-calendar :
  • react-calendar 같은 경우 기본적으로 달력이 독립적으로 사용 되기 때문에, 우리가 만들 UI 와 가장 적합해서 사용했습니다.
  • 기본 제공되는 디자인의 달력을 사용하여 기능 구현 시간 확보의 장점과 moment.js를 사용하지 않고 구현할 수 있어 메모리 사용을 줄일 수 있었습니다.
• react-intersection-observer : 라이브러리에서 제공하는 useInView hook을 통해 요소가 뷰포트에 들어가고 나가는 것을 감지하여 boolean 값을 통해 쉽게 데이터를 관리할 수 있기에 사용하였습니다.
• React-slick :
  • 메인 페이지의 슬라이드 구현을 위해서 사용
  • 목표 페이지를 각각 만들어주는건 불필요한 렌더링을 야기시킨다고 생각하여 라이브러리를 사용하였고 다른 슬라이드 라이브러리에 비해 상대적으로 가볍고 심플하게 구현이 가능하여 선택했습니다.
• React-html5-video-editor
  • 메인의 각 하루하루 목표페이지에 동영상 등록 페이지에 적용하기 위하여 사용
  • 사용자가 동영상을 1초만 찍어서 올리기엔 불편할 수도 있다고 생각하여 해당 라이브러리 비디로 크랍기능을 사용해서 3초내지 5초짜리 동영상을 올려도 원하는 부분(1초)를 생각하여 올릴 수 있도록 구현을 생각해보았습니다.
  • 라이브러리 선택 이유
    • 동영상편집기능을 직접구현하기엔 시간이 너무 빠듯하였고 React-native쪽으론 동영상 편집을 가진 라이브러리가 다수 있었지만 React 동영상 편집이 가능한 심플한 라이브러리는 해당 라이브러리가 가장 적합했습니다.
    • js 동영상 편집 라이브러리(movie masher)도 있었으나 기능이 너무 많고 무거워서 해당 프로젝트에 어울리지 않아 배제했습니다.
• 리덕스 툴킷
  • 동영상 파일업로드의 비동기적 처리와 전역관리의 유지보수의 편의성을 위해서 사용하였습니다.  동영상을 3일째 올리는 날 동영상이 합치는 로직이 같이 포함되어있어 합쳐지는 로딩시간이 7초 내외정도 걸리게 되는데 그 로딩시간이 자칫 렉이 걸렸다고 인지할 수 있는 부분이 있기 떄문에 로딩화면을 띄어주기 위함으로 사용했습니다.
  • 전역관리 툴로 리덕스 툴킷을 사용한 이유는 아무래도 상대적으로 생태계가 가장 크고 접근성이 뛰어나서 선택하게된 이유가 큽니다. 하지만 보일러플레이트가 상당히 많고 리덕스에 비해 중복코드도 상당히 줄어든편이지만 여전히 러닝코드등도 많고 전역관리를 해야하는 부분이 크지않을 떈 부담스러운게 사실입니다 .그래서 추후 리액트를 위한 상태관리 라이브러리인 리코일로 리팩토링하는 부분도 염두에 두고 있습니다. 상대적으로 가볍고 리액트를 위한 라이브러리이기 떄문에 좀 더 직관적이며 사용이 간편하다고 느꼈기때문입니다.

🔸trouble shooting

• 동영상 파일 업로드를 formdata를 이용하여 구현했는데 동영상은 넘어갔지만 promise 타입에러 발생
  • -> fullfilled extrabuilder에서 Payload값을 배열로 저장하여 문제가 발생한다고 생각되어 직접적으로 action.payload값을 저장시켜주니 해결
• 동영상 등록이 백쪽에서 제대로 된 것을 확인하고 영상을 돌려보니 영상은 안나오고 소리만 나오는 문제 발생
  • -> 보내는 방식이 잘못되었다고 생각하여 input type을 바꿔도 보고 했지만 문제 발견을 못했었는데 특정 동영상은 합쳐지는 걸 발견하고 코덱부분이 달라서 안되는 부분을 확인했습니다. 아이폰으로 찍은 영상은 코덱이 hevc를 기본적으로 가져가는데 동영상을 합칠 때 사용하는 ffmpeg은 AAC H.264를 기본적으로 가져가고 있어서 추후 인코딩이나 코덱 교체의 필요성을 느끼고 있습니다. 해당 부분은 현재 진행중입니다.
• 영상 썸네일과 영상의 1:1 연결의 오류
  • 오류 원인 맵을 돌려 요소가 만들어질 때 modal의 토글값이 모두 같이 사용되어 modal이 ture가 되면 모든 모달에 적용되어 원하는 값을 불러올 수 없음.
  • 가설
    • ref값을 이용하여 현재 요소에 대한 값을 불러와 모달에 props로 값을 전달
    • 모달을 map과 분리하여 해당 게시글의 상세 내용을useState를 이용해 props로 상세내용 전달
    • 전역 상태 관리를 통해 게시글에 이벤트가 발생했을 때 게시글 상세 내용을 모달로 전달
  • 해결 방안
    • ref를 이용하여 현재 요소의 값을 가져오려 하였으나 동일하게 map을 돌고 모두 같은 값을 사용하기 때문에 처음 문제와 동일한 결과가 보여짐.
    • 모달을 map함수에서 분리한 후 onclick 이벤트가 일어났을 때 해당 url의 값을 useState로 관리하여 변경된 값을 props로 모달에 전달하여 구현하여 성공하였다.
    • 전역 상태 관리는 props보다 메모리를 더 많이 차지하기 때문에 useState관리가 더 효율적이라 생각하여 2번에서 구현을 마무리하였다.

🔸 개선 사항