Day 16 : 약간의 진로변경, 기능설계, JS & 리액트 입문

원래는 분석해서 시각화를 했으니 이제 하이라이트를 감지하는 알고리즘을 탑재할 계획이었다

하이라이트 포인트를 추천해주는 기능인 셈

 

그런데 중간발표에서 데이터 분석 툴에 가깝고 프론트단에서의 서비스적인 것이 전무하다는 비판을 들었다.

그래서 약간의 진로변경

 

기존 계획처럼 하이라이트 포인트를 추천하고 다운로드받는 사이트가 되면

프론트에선 아무리 잘해봐야 유튜브 음원추출해주고 영상추출해주는 원페이지 사이트급의 구현밖에 할게 없다

 

프리미어프로같은 UI로 웹 내에서 다양한 기능을 제공하는 에디터스러운 방향으로 가야

프론트가 뭘 했다는 것이 잘 보일 것

 

그리고 이걸 가능하게 하려면

팀장인 내가 알고리즘깎기에만 매달려서는 불가능하다

 

그냥 직전 포인트보다 일정%이상 뛴 부분을 추천하거나, 평균치보다 일정%이상인 포인트를 추천하는 알고리즘은 쉽게 만들 수 있어서 진작에 만들어봤지만

결과는 예상과 많이 다르다

1등부터 10등까지 뽑아줘 하면 서로 붙어있는 10초가 1위부터 10위까지 다 차지하는 꼴

이게 같은 장면의 연속인지 아까와는 다른 장면인지,

잠깐 채팅이 잠깐 피크한번 뛰고 만건지 꾸준히 호응이 좋은건지

이런걸 제대로 판별하려면 하나하나 케이스 처리를 하든 해줘야할텐데

그럼 난 프로젝트 내내 분석프로세스 스크립트 하나만 붙잡고있어야한다...

 

그래도 데이터 가공을 잘 해뒀다

만족스러운 지표인가 하면 그렇진 않지만, 그래도 쓸줄 아는사람이 보고 적절한 포인트를 찾을 수는 있다.

처음보는 영상에서도 중요 포인트를 찾는게 지금단계에사도 나는 이미 가능함

각각의 차트가 뭘 의미하는지 설명을 달아둔다면 유저가 알아서 체크할 수 있다.

 

유튜버가 슬레이트를 쳐서 오디오 피크로 편집점을 잡는건 흔히 쓰던 방법이라

편집자라면 다 뭔지 알거라 믿는다.

그거랑 똑같은 기능을 하는 차트를

이제 채팅과 비디오라는 또다른 두개의 데이터로도 제공하는 셈

 

 

https://yuihyun.notion.site/5a12659c403946ebb566c9a7650be789

와이어프레임, 기능설계

 

와이어프레임의 각 요소가 어떻게 작동해야 할지 기능설계

 

설계를 하고나니 영역별로 컴포넌트를 만들고 그 컴포넌트들간의 전역변수 동기화가 필요한 상황

 

근데 어떻게 할지를 모름

 

그래서 리액트 공부...

 

근데 리액트 이전에 자바스크립트도 모름ㅋㅋ

자바로 알고리즘 몇문제 보면서 기본 문법만 익혔다.

 

리액트 문서는 뭔가 개발자 블로그처럼 한글로 정리가 잘돼있어서 그걸 보고 따라하다가 퇴근

 

뭔가 '프론트 면접에 뭐나와요' 하는 글들 볼때마다 나오던 뭔지모를 개념들이 다 여기 있어서 재미있다.