이력서 작성

• 나는 예전 프로젝트를 여기에 쓰고 감당할 수 있나?
• 전체 평점이 기억이 안 나서 오랜만에 학교 사이트 들어감

개발

• 프로토타입에 썸네일 적용
• WebglController 코드 타입 정의 및 리팩토링
• 필요없는 shader source 제거
• UI 개선

공부

• 리덕스 공부
• WebCodecs 문서공부, WebGL 공부(조금)

메이플

멘토님과 미팅(3PM) : 프로토타입 시연

잊지말고 마스터클래스(1PM) 참여

• 오늘의 주제는?

Web codecs 개발자한테 메일보내기

주간 할일 정하기

• Product Backlog 업데이트
• Issue 형식 어느정도 통일, 신규 작성
• 주제를 나눠서 학습 및 공유

• 인코딩을 하려면 video 전체를 재생(= 길이만큼 시간 소요)해야 되는 것 같은데 어떡하면 좋을까요?

  • Encoder: VideoFrame -> EncodedVideoChunk
  • VideoTrackReader: MediaStreamTrack -> VideoFrame
  • ImageBitmap -> VideoFrame도 가능
  • 그런데 VideoTrackReader는 MediaStreamTrack이 주는(재생되는) 만큼만 VideoFrame을 제공
  • MediaStreamTrack 또는 ImageBitmap을 어떻게 Real-time보다 빠르게 줄 수 있을지?

• 인코딩 과정에서 video로 처리하면 audio 손실이 일어나는데, 각각 encoding하면 서버에 어떻게 저장하고, 불러와서 어떻게 합쳐야 할까요?

  • https://github.com/WICG/web-codecs/blob/master/explainer.md
  • Mux 역할을 하는 JavaScript native 라이브러리가 없는 듯 한데 이 때 WebAssembly를 사용하면 될까요?

오늘의 MVD : 지현님 ✨🥇

영언: 뜻밖의 발표?

• 멘토님과 미팅 때 시연을 하기로 했는데 어쩌다 보니 발표가 된 것 같당
• 지현님과 리덕스 공부를 위해 파일업로드 관련 부분을 프로젝트에 적용하며 공부하려했으나, 뜬금없는 웹팩 문제에 시간을 다뺐겼다..ㅋㅋ
• 이제 리덕스는 좀 이해가 되는 것 같은데, 리덕스 사가는 아직 어색한 느낌이 있다.(왜 쓰고 어떤 흐름인지는 알겠지만 뭔가 어색..)
• 빨리 리덕스와 리덕스 사가를 익히고 WebGL공부를 시작해야지!

민지: webGL공부를 했다

• 코드를 뜯어보면서 webGL공부를 했다.
• 혼자서 webGL공부를 했을 때에는 이론이랑 코드 따로 노는 느낌이였는데, 승현님께서 잘 설명을 해주셔서 이해가 잘되었다.
• webGL공부한 것을 바탕으로 색깔을 조절?해보는 실습시간도 가졌다.
• 좀 더 활용해서 이것저것 해봐야겠다.

승현: 늦잠을 자버렸다~ 😅 벌점 -3 점 ㅎㅎ

• WebGL을 하나하나 뜯어보며 공부를 했다. 정확히 어떤 내장함수가 어떤 역할을 수행하는지는 모르지만, 전체적인 플로우는 잘 이해가 된 것 같아서 좋았다.

• 문서화에 도전했다. MDN문서처럼 친절하게 설명을 하려 해봤는데, 좀 어려웠다.

• 색 변조 실습에도 도전해봤다. Fragment Shader에서 gl_FragColor를 바꾸어 필터링 효과가 가능했는데, fragmentSource를 어떤식으로 interactive하게 바꾸는지도 공부를 해 봐야겠다

지현: 믿는 도끼에 발등을 찍히고 나니 도끼를 믿어도 되나 싶고

• 짜잔, server 폴더를 webpack할 때는 client에 에러가 있으면 안됩니다
• Store 구조 이렇게 가져가면 되겠지? 했던 생각이 1주일도 안 되어 바뀌었다
• 이제 redux-saga, react-redux를 복습하며 리팩토링을 해 보자...
• Web Codecs에서 AudioDecoder가 미구현이라는 내용이 있던데 설마;

오늘도 공부

• 어제 마무리 못한 리덕스, 리덕스 사가 공부 및 정리를 마무리하자~

2주차 구현하면서 공부

프로젝트 구현을 겸한 스터디

• webGL 설명(?)
• redux, react-redux, redux-saga 설명(?)
• 오늘 하기로 했는데 완성 못함

HTMLVideoElement를 생각보다 쓰는 곳이 많음

• 한 곳에서만 만들고 함수와 함께 export하는건 어떨지
• 쓰는 곳 목록: WebGL 효과 적용, 10초 앞/뒤 & 일시정지, progress bar로 위치 조절, 파일 업로드 후 .src 지정 등등...

오늘의 MVD : 🌟승현 빼고 모두🌟 🌊

영언: 대대적인 리팩토링, redux-saga적용

• 드디어 2일에 걸쳐 리팩토링을 완료하고 redux-saga를 적용해봤다.
• 확실히 redux-saga를 적용하고 나니, 비동기 로직을 한눈에 알아보기 쉽고 깔끔하게 처리할 수 있어진 것 같다.
• 2일에 걸쳐 공부하고 작업한 내용을 토대로 지현님과 함께 위키에 기술 공유 문서를 작성했다.
• 번역이 되지 않은 react-redux 공식 문서와, redux-saga의 API Referance 를 보며 영어 공부의 필요성을 느꼈다..ㅋㅋ
• 이제 WebGL 공부를 할 수 있는 것인가! 🌈

민지: video 싱글톤작업 + 썸네일 webGL로 그리기

• HTMLVideoElemnt가 여러군데에서 쓰이기 때문에, 한 곳에서 video class를 만들어서 export해서 쓰도록 싱글톤으로 만들었다.
• 어제(월요일) webGL에대해 공부하고 오늘(화) webGL을 이용해서 이미지 필터처리를 해주는 과정을 구현해보니 좀 더 이해가 잘된 것 같다.
  • 계속 비어있는 이미지의 data가 나오는 문제가 있었는데, webgl이 drawScene되는 곳에서 data를 뽑아내니까 잘 해결되었다.(promise,setTimeout,...)
• 이제 시간을 줄일 방법을 생각해서 다시 구현해봐야할 것 같다.

승현: video 클래스를 만들어 보고, 이미지를 WebGL로 다시 그려본 날~ 🎬

• video 클래스를 싱글톤으로 만들어서 여러군데에서 사용할 수 있게 작업을 했다. 그 과정에서 많은 시행착오가 있었지만, 민지님이랑 같이 해결하면서 어찌저찌 구현을 해 낸 것 같다. 🎃

• WebGL을 사용해서 이미지를 처리하는 과정도 구현해 보았다. 🎞 이 과정에서도 마찬가지로 여러 실수와 시행착오가 있었다. 가장 큰 시행착오는 바로 texture가 로드되는데에 시간이 필요하다는 점이었고, 이를 timeout을 통해 해결하여 promise all 처리를 해주었다.

• 이미지를 처리하는 과정에서 시간이 꽤나 소요되기 때문에, 이 실행시간⌚을 줄여주는 방안으로 리팩토링을 해보면 좋을 것 같다.

지현: store_구조_갈아엎기.then(수습하기)

• 분명 괜찮을 것 같다고 생각했던 구조도 만들다 보면 계속 바뀌는 느낌
• selector를 구현했으니 앞으로 component쪽은 덜 건드리겠지...
• reducer, actions, actionTypes를 typescript로 짜면서 스트레스도 받았지만, 타입을 실수해서 의도치 않은 undefined를 보는 일이 적어지리라 기대
• WebGL도 공부 해야되는데...
• 눈아파요...ㅠㅠ

코드 리팩토링

• 이거 더 하다가 2주차 구현사항 날아ㄱ...

구현

• CurrentVideo store 구현
• Thumbnail 생성 작업 saga로 이전

(안 다뤄본 쪽) 공부 및 공유

썸네일 webGL하던거 마저하기

오늘의 MVD : 모두🌟 🌊 👨‍👦‍👦

영언: 애니메이션은 재밌었당 🎑

• 슬라이더의 이동을 애니메이션을 통해 구현해보았다.
  • 틈날때 애니메이션 공부를 더 해서 이곳저곳 적용해봐야징
• 타임라인의 전체적인 UI 개선 작업을 하고 타임존도 구현하니 얼추 전체적인 틀이 잡혀 보여 좋았다.
• 영상의 흐름에 따른 썸네일과 슬라이더의 이동을 설계했는데, 고려할 부분이 너무 많아서 쉽지 않다.
• 드디어 서로가 공부한 내용을 공유하는 시간을 가졌다.
  • WebGL에 대한 설명을 듣고 전체적인 흐름은 이해했지만 세부적인 동작이나 원리는 따로 더 공부를 해봐야겠다!

민지: 취소버튼을 구현하려다가....

• 취소버튼을 구현하려다가 아직 redux-saga에 대해 이해가 부족해서 결국 지현님이 해주셨다...ㅎ
• 그래도 saga코드를 구현하는 과정을보니 이해가 빨리 된 것 같다.
• 취소를 누르면 url이랑 상태는 없어지는데 비디오랑 썸네일 그려지는 부분도 지우는 과정을 해야한다.
  • 혼자 webGLController의 render부분에 video의 src의 유무에따라서 updateTexture을 해주거나 다시 glInit()을 해주는 방법을 써봤는데 음 다시 생각해서 해봐야할 것 같다. glInit()을 하면 다 초기화가 될 줄 알았는데 다시 불러왔을 때 이상하게 그려진다.

승현: video 편집 기능을 적용해 본 날~ 🛠

• 현재 시간을 알려주는 component⏰를 구현해 보았는데, store에 등록된 시간을 기반으로 표시해 줄 수 가 없어서, video 객체에 반복적으로 현재시간을 물어보고 표시해주었다.

• WebGL의 video src가 바뀌면 해상도가 이상하게 적용되는 문제가 있었는데,🖼 임시방편으로 width / heigth를 고정하여 해결하긴 했지만, 추후에 어떤것이 문제였는지 알아보고🔬 고쳐야 할 것 같다.

• VSCode live share 상태가 조금 이상한 것 같기도 하고, 내 pc에 eslint도 설정이 이상한 것 같아서 개발하는데 약간 애를 먹었다.😅

지현: singleton 비디오는 정말 잘한 선택이었을까...?

• currentTime을 store랑 동기화하기도 난감하고, video 접근은 컴포넌트에서 하든 saga에서 하든 뭘 해도 어색한 것만 같은 느낌
• 현재 시간을 표시하기 위해 setInterval 로직을 적용해보았음 이론상 오차는 최대 0.05초긴 한데 브라우저 환경에 따라 늘어날수도
• Slider 이동, thumbnail 길이 고정, thumbnail 드래그 vs 스크롤 등 CSS로 해결할지 아니면 JavasScript로 구현해야 할 지 고민인 부분이 많다...
  • 기존 라이브러리를 주워다 쓸 수 있으면 좋겠다 싶어서 찾아봤는데, 있을 법 하지만 나오지 않는다 ㅠㅠ 검색 키워드가 잘못된 것일까

동영상 길이 조절

• crop된 부분을 보여주는 반투명 레이어
• 양쪽 끝을 드래그해서 시작/종료 지점 조정하는 것이 최종 목표
• 시간이 쪼들리면 일단 text로 시간을 받기부터 해 보자

썸네일 클릭으로 동영상 현재 위치 이동

• 즐거운 픽셀 계산
• hover하면 slider가 보여서 그 위에 시간도 떠야 함

취소버튼을 누르면 canvas에 남아있는 이미지 사라지게 하기

• 썸네일도 지워줘야 함 + 애니메이션도 초기화

다른 영상 load 하면 이전 영상 src 지우기

영상 10초 전후로 이동하거나 정지/재생할 때 애니메이션 바꾸기

오늘의 MVD : 민지님 🏆🥇

• 우와아ㅏ 영광입니다😎🤟

영언: 슬라이더와 데이트 📏

• 하루종일 슬라이더와 놀았당
• 마우스로 썸네일의 위치를 클릭하면 해당 위치로 동영상과 슬라이더를 이동시키는 기능을 구현했다!
• 슬라이더가 이제 영상의 위치에 맞게 잘 이동을 하니 뭔가 있어보이고 뿌듯했다.
• 하지만 슬라이더는 애니메이션으로 실제 영상과는 별개로 구현했기 때문에, 10초 뒤나 전으로 이동 후에 정지를 하면 약간의 싱크가 안맞는 이슈가 있는데 나중에 해결봐야겠다.
• 요즘 css 애니메이션을 공부해보다가 재밌어서 여기저기에 적용해보려고 하고 있다. 어제는 로딩중 화면을 임시로 만들어 보았다~
• hover를 하면 나오는 슬라이더도 구현을 해봤는데, hover의 슬라이더에서는 해당 위치의 영상의 시간을 출력해줘야 하기 때문에 Thumbnail의 길이와 현재 마우스 위치가 필요하고, MouseMove 이벤트를 Thumbnail에 걸어줘야 하기 때문에 해당 위치의 시간을 Thumbnail에서 상태관리를 한다. 그래서 MouseMove가 발생할 때마다 썸네일 Thumbnail 전체를 다시 렌더ㅇ

민지: CropLayer 구현

• CropLayer를 위해서 적절한 라이브러리를 찾아서 우리의 코드에 잘 녹여봤다(react-range)
• 자꾸 이상한 오류(...getBoundingClientRect of null)가 떠서 Range의 코드를 보고 이것저것 해보니까 오류가 사라졌다!(리드미에 ref추가해주라는 말이 없었는데 코드를 까서 보니깐 있길래 ref=(props.ref)를 추가하니까 해결됨!) 뿌---듯
• 지현님이랑 둘이하는 짝코딩은 처음해봤는데 구현을 하기 전에 어떻게하면 잘 짤 수 있을지를 생각하고 구현하기 시작하시는데 좋은 것 같다. 이런 것들을 배워야겠다!

승현: 동영상 재생 위치와 동영상 이동을 구현해 본 날~ 😆

• 영언님과 함께 현재 동영상 위치를 알려주는 slider를 구현해 보았다. 특정 시간을 주고 그 시간 부터 애니메이션을 적용하여 이동하는 것으로 구현했다. animation forward 속성을 주면 keyframe 마지막에 멈추는 것이 신기했다. 👍

• 키보드와 마우스로 동영상 이동을 구현해 보았다. 😎 버튼에 포커스가 있는 채로 키보드의 space bar를 누르면 버튼이 다시 클릭되는데, 포커스 해제를 통해 이를 방지했다. 나중에도 잘 써먹을 스킬인 것 같다. ✂

• 썸네일 쪽에서 render될 때 마다 image를 뽑기에 오류가 나는것을 확인했다. 🛠

• canvas를 이용해 로딩 화면도 그려보았다. 🖼

지현: 졸렸지만 잘 참고 라이브러리 줍줍

• 잠을 설쳐서 중간에 뻗을거 같았는데 문제 해결을 위한 기획만 하고 가야지 하면서 떠들다가 상황의 심각성을 깨닫고 잠 깸
• CropLayer를 직접 구현했다간 하루 다 쓰고도 아무것도 안 남을것 같아서 어떻게든 기존 라이브러리 활용 (=날먹) 을 하려고 열심히 검색을 해서 react-range 찾음
• 이번주 평균 퇴근시간 0시 이후인 거 같은데 넘 힘들어요

• 썸네일 추출
• crop layer 마우스 이벤트
• React.memo, useMemo를 잘 활용해보자...