Day 17 : 풀스택...개발자가...되자...

팀 노션 페이지 중 일부

 

우리가 바라는 각 기능들이 제대로 동작하려면 function이 어떻게 굴러가야할 지 고민한 결과

 

이걸 구현하려면 유저 이벤트에 따라 값이 바뀌는 전역변수가 최소 두개는 필요하다.

더 늘어날 수도 있고...

 

리액트를 간단히 찍먹하며 느낀 것

하위 컴포넌트가 상위 컴포넌트로부터 정보를 받는건 쉽다

그냥 선언할 때 주면 됨

근데 하위 컴포넌트에서 변화가 발생했을 때 위로 정보를 올려서 갱신하는건 조금 귀찮은

 

우리 프로젝트에선 물론 후자를 구현해야 전체 페이지가 영상의 해당 장면 시간으로 동기화가 가능

 

프론트 팀원이 알려준 얘기로는 여러 방법이 있다고 한다

context 혹은 redux

context를 쓰는 방법도 class 쓰기 vs function 컴포넌트에서 구현하기 등등

사실 뭐라는지 모르겠다ㅋㅋ

 

일단 각 팀원이 구현한 컴포넌트를 얹을 틀을 짜고

아무튼 위의 선택지 중 무언가를 써서 컴포넌트간의 값 공유와 변경시 동기화를 구현하기로.

 

전날 읽던 리액트 문서를 마저 읽고 에디터 페이지를 제작

 

wrapper에 flex row를 줘서 위치만 배치

CSS는 잘하는 사람이 하면 되겠지...

 

 

이제 저 컴포넌트들간에 time pointer라는 값의 동기화를 구현해서

어디 한곳에서 값을 바꾸면 나머지도 값이 바뀌어 다시 렌더링되는 로직을 구현하면 된다.

그럼 그 위에 팀원 각자 개발한 기능들을 탑재하면 끝

 

 

난 당연히 내가 백이라고 생각했는데

생각해보니 난 0주차때 프론트를 했었다

 

0주차 html 디자인하던 시절로 돌아온것같아 재밌다

레고블럭 맞추는 느낌