3주차 스크럼

📌 1일차

1일차 스크럼/회고 보러가기

스크럼

주말에 한 일

• 영언 : svg 공부, 드롭다운 메뉴 애니메이션 적용
• 민지 : redux-saga,redux 공부 및 webGL 자세하게 알아보기
• 승현 : 나만의 로딩화면 구현
• 지현 : 경험치+=80,000,000,000

우리가 할 일

• 멘토님 미팅 (3시)
• 마..스..터..클..래..스(1시)
• 구현 (미팅 이후)

  • https 배포 2명 지현님 영언님

  • crop 2명 승현님 민지님

  • 버튼 그룹 정리

  • 취소버튼 -> 캔버스 초기화 2명

  • 우리 조는 사실 8명입니다. (아니면 4명이서 두배로 야ㄱ...)

질문리스트

• 멘토님에 대해 궁금함
• 조직이나 맡은 업무
• 공부해보면 좋을것
  • 신입이 가지고 있으면 좋을 소양

회고

• 오늘의 MVD : 다들 모두 고생 엄청 완전🏅

• 영언: https배포 및 리팩토링~

  • 지현님과 함께 https배포를 하고 배포 과정 및 개념을 위키에 정리했다.
    • https의 개념에 대해 좀 더 이해를 할 수 있는 시간이었다 ㅎ
  • webglController의 positions를 2차원 배열로 변경하고 flat()메서드를 이용하여 몇몇 함수를 리팩토링했다.
  • 취소버튼을 누르면 기존 캔버스에 있는 영상이 지워지지 않는 문제를 해결했다.
    • 영상을 편집하는 도중 (ex: 90도 회전)에 취소를 하고 새로운 영상을 불러와도 90도로 회전되어 있는 현상이 있었다.
    • 취소버튼을 누르면 영상의 position 값도 초기값으로 설정하도록 변경하여 해결했다.
  • Tools가 300줄이 넘어가는 일이 발생해서 파일을 분리하여 리팩토링을 진행했다.(설계의 중요성을 느꼈다..)
  • 세부 편집 도구가 나타나며 영상과 함께 위로 자연스럽게 올라가는 애니메이션을 구현하여 적용해봤다.
    • videoContainer와 Tools가 형제관계여서 생각보다 구현하기 귀찮았다.🤣

• 민지: crop구현 및 버튼 그룹 정리

  • redux를 공부만하고 구현을 못해봤었는데 crop을 구현하면서 redux를 써볼 수 있어서 좋았다.
  • 메인버튼을 눌렀을 때, 서브버튼이 나오게 버튼 그룹을 정리했다. toolType이 바뀔 때 서브버튼이 닫히거나 열리게 했다.
  • 코드짜는 것보다 리팩토링이 더 어려운 것 같다. 맨날 구현했던 방식대로 구현해서 그런 것 같다. 항상 좀 더 나은 방향을 생각해보자!
  • react-range의 step값, react-icons/ai(pId가 없다)를쓰면서 생기는 소소한 오류들?warning?이 있었는데 빨리빨리 잘 해결한 것 같아서 좋다
  • PR단위를 좀 더 작게하고 commit을 좀 더 자주해야할 것 같다. 전부 짝코딩으로 진행해서 그나마 다행이긴하지만... 그래도 코드리뷰를 위해서라도 PR단위를 작게하고 commit을 자주하는게 좋을 것 같다.

• 승현: Crop store를 구현해본 날~ 👻

  • Crop store를 구현하면서 redux를 코드만 보고 공부했던것이 실습이 된 것 같아서 좋았다. 🤗 action과 reducer, selector가 어떤 역할을 담당하고 있는지 확실하게 알게 된 것 같았고, 나중에도 까먹지 않게 정리를 해봐야겠다. 👩‍💻

  • store 이슈를 작성하면서 action에 대해서 정리를 해봤는데, 필요없는 action들이 보여서 이를 리펙토링 해봤다. 코드를 구현하고 이를 더 멀리서 지켜봐야 다른 좋은 방안이 떠오르는 경우가 있는것 같았다. ⛰

  • 썸네일에서 store를 selector로 지켜보고 그에 따라서 crop layer의 활성화 상태를 결정하는 로직을 짜봤다. 어느 시점에 해당 값에 접근하느냐에 따라서 값이 잘 안나오는 경우가 있어서 시간이 좀 걸렸다.😣

  • Tools의 버튼 그룹을 구현하면서 메소드 선언, 버튼 데이터 생성 등의 이유로 파일이 길어졌는데, 팀원분들의 도움으로 리팩토링하여 조금 더 나은 코드가 된 것 같았다. ♻

• 지현: 리.팩.토.링 (+ https)

  • FE 구현을 할 때 주로 상태관리/로직 부분을 미리 설계하고 가는 편인데, 장점은 리팩토링 할 일이 적다, 단점은 구현 속도가 느리다는 것 같다.
  • WebglController의 함수를 Array.prototype이 제공하는 함수를 적극적으로 활용하여 리팩토링하는 과정에서 배열 자료구조에 대한 이해가 한층 더 증가한 것 같다.
  • https 배포가 생각보다 곱게 빨리 끝나서 다행이다. 왜 학습스프린트때 진작 안 해봤을까? (노느라)
  • 사촌 컴포넌트끼리 상태를 주고 받는 일은 언제 해도 참 더럽고 치사하고 어렵다. 상태관리 라이브러리가 있다는 것 자체만으로는 해결되지 않는 문제인지라, store 설계와 활용을 잘 해야 할 듯 하다.
  • Tools의 로직이 매우 매우 복잡한 것은 스펙 상 어쩔 수 없는 부분인 것 같은데, 어떻게 잘 파일을 쪼갠다면 코드가 볼만해질까? 아직도 해결책이 잘 떠오르지 않는다...

📌 2일차

2일차 스크럼/회고 보러가기

우리가 할 일

• 각종 문제 해결
  • 자르기 하다가 전체취소 누르면 없어져야 함
    • 으아아아ㅏㅏㅏㅏㅏㅏ 즐거운 상태관리
  • 영상이 끝나면 정지되는거를 알려줘야함
  • 로고 svg?
• 자르기 이후 썸네일 추출 및 저장
• WebCodecs
  • 이제 token도 있으니 마음껏 쓰십시오...

공유할 사항

• 없음(∵ 짝코딩)

회고

• 오늘의 MVD : 영언영언지현지현지현지현 🏅

• 영언: crop 이후 이곳저곳 수정~

  • 기존에 duration을 기준으로 모든 컴포넌트를 설계해놨던 것을 crop후에 start, end를 기준으로 모두 변경하였다.
  • 웹 영상편집기라는게 신경써야 할 부분이 정말 많은 것 같다.
  • UI를 좀 신경쓰고 애니메이션을 넣어주니 완성도에 비해 더 있어보이는 느낌도 있다..ㅋㅋ
  • 내일부터 드디어 WebCodecs를 공부하고 적용해야할 때가 왔다. 핵심 기능이 잘되어야 할텐데 오늘 칼퇴하고 내일부터 다시 달려보죵~

• 민지: crop하면 thumbnail 다시 추출

  • crop/saga에 crop시 thumbnail을 다시 추출할 수 있도록 구현해보았다.
  • CROPaction을 이용해서 썸네일 추출할 때 바뀐 start,end값을 다시 줘서 뽑는 방식
  • 코드리뷰를 하고싶은데 내 눈에는 다 잘 짠 코드같다...ㅎ 경험이 좀 더 쌓이면 코드리뷰를 잘할 수 있을까...?
    • 돌아가면 잘 짠겁니다
  • 팀원분들이 리팩토링하는 것을 보면서 어떻게하면 더 좋은코드인지?를 배워가는 것 같아서 좋다.

• 승현: 비디오를 잘라본 날~

  • 어제 구현해 놓은 crop store를 통해서 video를 잘라보았다. 물론 실제로 잘리는 것은 아니지만, 비디오의 시작 / 끝 시간을 정해두고 이를 base로 썸네일을 다시 뽑아낼 수 있었다. 그 과정에서 saga를 통해 비동기 로직을 처리하는 경험을 해봐서 좋았다.

  • 코드 리뷰를 하는 과정에서 여러 Hook들을 경험해봐서 좋았고, 이후에는 Custom Hook들도 한번 공부를 해봐야 겠다.

  • 멘토님이 말해주신 방법대로 WebGL 필터 처리를 할 때, matrix 연산 적용해 보아야 겠다.

  • 이제 3주차에서 구현할 사항은 어느정도 마친 것 같고, WebCodecs를 도입해야 하기 때문에 새로운 기술 탐방을 해봐야겠다.

• 지현: 즐거운 오류 수정

  • 멘토님 앞에서 발표하는 게 벌써 3번째라니, 프로젝트 상당 부분이 이루어졌지만 또한 갈 길도 상당히 멀다. 마지막까지 잘 달려보자 ㅅ
  • Slider, CurrentTime, Video, Canvas의 싱크를 맞추는 것은 정말 까다로운 작업인 것 같다. 머리를 열심히 쥐어짜내서 인 것 같다.
  • 비교적 store 구조를 많이 안 갈아엎고도 고칠 수 있어서 다행이다.
  • 개발자라면 새로운 기술을 접했을 때 써 보고 싶어지고, 프로그래밍이 프로그래밍이 재밌어야 하지 않을까 라는 멘토님의 말씀에 나는 정말 평생 개발자가 될 수 있을까 수 있을까 좀 고민을 해 봐야 할듯한...
  • 오랜만에 칼퇴 후 메이플~ !!

📌 3일차

3일차 스크럼/회고 보러가기

우리가 할 일

• 서버에 있는 파일 목록 조회 API (+ react modal)
• 파일 저장 방법, video 병렬처리 로직 정하기
• 웹코덱 적용
• audio/video mux 과정 공부하기(mux.js등)

공유할 사항

• shader 순서,해상도 issue

회고

• 오늘의 MVD : 지현님~ 🥇

• 영언: 프로젝에서 비디오 처리의 흐름 파악!

  • 비디오 처리에 대한 도메인 지식이 너무 없었고, 모호한 부분이 많았는데 지현님이 잘 정리해서 설명해주셔서 처리흐름에 대한 이해를 할 수 있었다.
  • 처음에는 기존 영상에서 WegGL로 편집된 상태의 영상을 캔버스에 처음부터 그리면서 그 영상을 canvas.captureStream(fps)을 사용하여 frame을 얻어오는 방식으로 생각했었는데, 이렇게 되면 framerate가 기존영상에서 원하는 framerate로 정확히 뽑아오지 못할 수도 있는 것 같아서 기존 영상의 MediaStreamTrack에서 fps 를 설정하고 frame을 뽑아서 그 frame을 WebGL을 통해 편집된 상태로 변경하여 인코딩하는 방식으로 해야할 것 같다.
  • 다시 redux-saga를 사용해서 서버에 있는 영상의 목록을 조회하는 로직을 구현했다. 현재 스토어에 영상 목록 정보가 없는 경우에만 서버에 요청을 보내고, 아니라면 바로 목록을 조회해서 모달에 띄우도록 했다.
  • 어제 너무 늦게까지 줌에서 작업을 해서 집중이 잘 안됐던 것 같다.

• 민지: 이것저것✨

  • webCodecs와 비디오에 대한 제대로 된 개념이 없는 상태에서 무작정 코드를 짜려고 하니까 계속 오류도 나고 하면서도 이게맞나...?라는 의문이 들었었다.
  • 그런데 지현님이 비디오에 대한 개념과 함께 프로젝트 워크플로우를 잘 정리하고 공유해주셔서 이제 이해가된다!!행복 역시 제대로 알고 구현을 해야한다.
  • Object Storage에 비디오를 올리는 방식을 동영상(비디오+오디오) 상태로 올리기로 결정을 했기 때문에, user별로 폴더를 만들어서 파일을 관리하기로 했다.
  • Object Storage에 폴더를 만드는 방법을 검색해봤는데, 폴더를 따로 만드는게 아니라, fileKey에 폴더/파일이름이런 식으로 쓰면 폴더가 만들어졌다. 어려울 줄 알았는데 생각보다 쉽게 해결되었당
  • 이슈를 보고 User store를 구현해봤는데 아직 익숙하게 빨리 짤 수 있는건 아니지만 그래도 어떻게 동작하는지는 알고 짤 수 있어서 좋은 것 같다.
  • 이번 프로젝트는 알고 있는 기술을 갖고 하는게 아니라 계속 새로운(모르는) 기술을 공부하면서 구현하는거라서 쉽지는 않지만 그래도 재밌는 것 같다. 모르고 있던 것을 알게되었을 때 짜릿하다~⚡

• 승현: DB와 API를 만들어보고 공부할 것들을 살펴본 날~ 💫

  • video를 업로드 할 때, video의 이름을 입력받는 모달을 만들었다. 🖼 또, 로컬 db를 만들어서 video를 업로드할 때, 이를 저장하는 API를 구현해 보았다.

  • 이전에 사용했던 도커 컨테이너 중 mysql 컨테이너를 사용해서 db를 구동했다. 테스트 용도로 사용할 때는, 로컬pc에 설치하기 보다는 깔끔하게 db를 관리할 수 있어서 좋았다. 🤗

  • video 처리 프로세스를 세분화 해봤고, 어떤 기술들이 필요할지 생각을 해 봤는데, 쉽지만은 않을 것 같은 느낌이다. 🧐

• 지현: 트랙, 오디오, 비디오, 컨테이너, 이런 것들이 뭔지 알아본 날

  • 디지털 영상 분야에 대한 기본적인 이해가 없던 상태에서 Web Codec를 적용하려고 하니 너무 막막했는데, 역시 프로젝트 진행은 그 분야에 대한 공부를 하고 해야겠다.
    • Container: encoded audio track + encoded video track (+ metadata, subscript...)
    • Encoding: compressing track as encoded format
    • Decoding: decompressing track for playing
    • Codec: (en)co(der) + dec(oder), required for media player
    • Mux(multiplex): combining audio and video tracks into container
    • Demux: separating audio and video tracks from container
    • MediaStream: set of MediaStreamTrack(s)
    • Popular codecs: (MP3 for audio, H.264 for video) -> mp4 container
  • 영상 크기가 무진장 큰 것은 비디오에 무손실(또는 손실률이 낮은) 압축 코덱을 사용했거나, 그것마저 아니라면 그냥 정말 필요한 용량이 많은 거라는걸 알게 되었다.
    • 고로 Object Storage 서버도 아주 풍요로운 사용량을 자랑할 예정이다.
  • 로컬에 MySQL이 안 깔려 있어서 챌린지때 쓰고 묻어 두었던 Docker를 꺼내서 돌리려다가, 하나도 생각이 안 나서 일단 접었다. 복습하자... ~~언젠가...~~~
  • 오늘도 야근을 했고, 아직도 눈이 아프다 ㅠ 그래도 진도는 잘 나간다

📌 4일차

4일차 스크럼/회고 보러가기

우리가 할 일

• 프로젝트 워크플로우 및 영상 분야 기초지식 문서화
• 비디오 목록 모달 구현
• 비디오/오디오 트랙 인코딩
• EncodedVideo(Audio)Chunk를 mux.js로 넘기기 위해 필요한 가공 파악

공유할 사항

없음(짝코딩)

회고

• 오늘의 MVD : .mjlintrc.js

  • 영광입니다 더 열심히할게여~~

• 영언: video목록 모달 구현, VideoEncoder 설정 공부! 🖥

  • video목록을 가져오고 모달에 띄우는 기능을 구현했다. + 스타일링
  • 지현님과 함께 VideoFrame을 mp4가 지원되는 코덱을 사용해서 인코딩하는 작업을 했다.
  • encoder의 설정에서 codec을 지정해야 하는데, 기존 예제에서 제공되는 vp8은 mp4를 지원하지 않아서 H.264, AVC 등 mp4를 지원하는 코덱을 다 찾아서 넣어봤지만 다 invalid codec이라는 에러가 발생해서 삽질을 많이 했다.. 🎥
  • 결국 vp9에 이상한 parameter를 넣어야 유효한 동작을 하게 만들 수 있다는 것을 알고, vp09.02.10.10.01.09.16.09.01이 의미하는 것을 한참 찾아봤다...
  • VideoEncoding은 성공했지만 AudioTrackReader와 AudioEncoder가 없다는 것을 알고 슬펐다. ㅋㅋㅋ 🥺

• 민지: 삽질Day~

  • 로컬db 설정을 했는데, 내 3306포트에 열려있는 db의 비밀번호가 기억이 안나서...쓸 수가 없었다 accountbook 할때도 이런 문제가 있었는데 주말에 꼭 해결해야지...docker사용도 공부해봐야겠다!
  • 일단 3307포트로 로컬 db를 설정을 해서 잘 해결했다.^~^
  • videoTrackReader로 뽑은 frame을 ImageBitmap으로 바꾼다음에 webGL로 처리를 한 다음에 이미지를 뽑아봤다.
  • toDataURL('',2)을 이용하면 canvas에 그린 그림을 문자열로 변환가능(2번째 인자에는 0~1사이의 quality가 들어간다)
  • applyConstraints() 트랙에 제약 적용가능(fps 설정가능)
  • 혼자 할 때는, 좀 느려도 결국은 해낼것을 알고있어서 그냥 도전!했었는데 팀으로 프로젝트를 하니까 내가 피해를 줄까봐 조금이라도 더 잘 할 수 있는걸 찾게되는 것 같다ㅜ😭주말에 열공하ㅏ자!!

• 승현: modal창 구현 및 video frame 처리 구현해본 날~ 😎

  • frame을 비트맵 이미지로 바꾸어 webgl기반으로 처리를 한 후, 다시 이미지로 뽑아오는 로직을 구현해 보았다. 아직 성능 테스트를 제대로 해보진않았지만, 만족하지 못 할 성능이 나올 경우 수정해야할 것 같다. 😅

  • 앞서 말한 이미지를 다시 비디오로 바꾸는 로직을 구현해보려 했으나, 해당 프로세스에 대해 아는게 없어서 시간을 많이 소비한 것 같다. 천천히 느긋하게 하나씩 해보면서 이해해 나가면 좋을 것 같은데, 조금 촉박해서 주말에도 짬짬이 공부를 해봐야겠다.🎃

  • OpenCV를 적용해서 video를 자르는 것을 도입하면 좋을 것 같다. C++ 베이스로 한번 짜 보고 wasm으로 적용해보아도 좋겠다.👻

• 지현: 끝이 보이지 않는 삽질의 시작

  • 모달 돌아가게 만드는 데 이상하게 오래 갈렸다...
  • AudioEncoder, AudioTrackReader는 not defined
    • 아니 구글놈들 피드백 받는다면서 구현도 다 안 해 놓으면 어떡해
  • EncodedVideoChunk는 대체 어떻게 mux에 먹일까??? 너무 막막하고...
  • VideoEncoder config에는 valid codec string을 넣으란다.
    • vp9, VP9, H.264, H264, h.264, h264 다 안된다
    • 구글놈들 실험중이라고 문서도 불친절해 세상에
    • vp09.02.11.10가 유효하다는걸 알기까지 얼마나 인터넷을 헤맸는가
  • 파일 포맷의 내부 구현, 코덱 종류와 특징, 이런거 잘 모르고도 구현할 수 있지 않을까 희망을 가졌는데, 개발자는 공부하는 직업이라고 전부 다 알아야 되겠다.
    • 야호 공부가 세상에서 제일 쉬웠어요?

📌 5일차

5일차 스크럼/회고 보러가기

우리가 할 일

• issue정리
• backlog 정리
• 데모 시나리오 작성
• wiki에 프로젝트 워크플로우 정리
• master에 배포

공유할 사항

• 파일 업로드 시 input태그 내부에서 스페이스, 좌, 우 방향키를 누르면 영상 재생, 10초 전, 후로 이동이 같이 되는 문제