2주차 화요일 데일리스크럼

오전 회의

React에서 상태관리는 어떻게 동작하는가? - 지화영님 발표

어제 고민 : useState에서 자기 자신 (변경점)을 어떻게 인지하는가, 자기 자신이 어디에 있는 node인지.

어제 고민하던 내용은, 시작부터 잘못 되었다.

setState가 자기 자신의 index 값을 알고 있고, 그걸 통해서 가상 돔에서 실제 돔의 변경 로직을 동작시키는 것이 아니라, RequestIdleCallback 함수를 이용하는 것이었다.

RequestIdleCallback 함수는 브라우저가 idle(유휴) 상태일 때, 동작하는 callback 함수다.

RequestIdleCallback은 workLoop를 callback 함수로 넘겨서 실행시키는데, 이 때 workLoop가 가상 돔을 생성하고, 그 가상 돔을 토대로 render를 해주고, 다시 RequestIdleCallback을 실행하여 다음 변경을 대기하게 한다.

이 세 가지의 핵심이 되는 부분을 차례대로,

1. PerformUnitOfWork()
   • 가상 돔이 만들어지는 부분을 담당, 유닛을 가상 DOM에 반영하고 다음 유닛을 반환한다.
2. commitRoot()
   • 가상 DOM을 실제 DOM에 반영한다.
3. RequestIdleCallback()
   • 다시 유휴 상태로 가게 한다.

이 세 함수를 거친다고 할 수 있다.

가상 DOM은 어떻게 만들어지는가? - performUnitOfWork(fiber)

• 가상 DOM을 만드는 부분.
  • 함수형인 경우와 일반 Component로 나눠서 생각한다.
  • 함수인 경우 호출을 해줘야 하기 때문.
    • 이 두 경우 모두 reconcileChildren(fiber, children)을 호출한다.

반환값

• 자식이 있는 경우, 자식을 반환한다.
• 형제가 있는 경우, 형제를 반환한다.
  • 형제가 없는 경우 부모의 형제를 찾는다.
  • 결과적으로 모든 fiber에 대해서 탐색하게 된다.

reconcileChildren(fiber, children)

변화가 있든 없든 체크를 한다. (root 부터 볼 것인지, 변화의 최상단 지점부터 볼 것인지?)

fiber의 effectTag에 따라서 다른 동작을 한다. (UPDATE, PALCEMENT, DELECTION)

오후 개발 계획

공통

• 자료형 변경 (dom, alternate, id)

  • 좀 있다 모여서, 자료형만 정해 놓고, 역할 분담 시작합니다.

    {
    	type : string (ex. "div", "customDOMtag", etc),
    	id : number,
    	dom : document.querySelect의 결과 값, // 실제 DOM에서 매칭되는 대상
    	alternate : currentDOM의 node, // 가장 최근에 rendering된 가상 DOM
    	effectTag : "UPDATE"| "PLACEMENT" | "DELECTION",
    	props : {
    		id : string | null,
    		className : string : null,
    		children : [],
    		style : {
    			//	...이것도 parsing 가능하게.
    		}
    	},
    	parent : dom.parentNode의 결과 값, // 가상 DOM에서의 부모
    	child : children[0]
    	sibling : children[ 1 ~ the others...] // 1개 씩, 다음 노드를 가리킨다.
    }

1팀

구승효, 심재익

2팀

강경수, 지화영

1. current와 wip을 비교하기

• requestIdleCallback (브라우저에서 지원해주는 함수)
  • workLoop (requestIdleCallback의 콜백 함수)
    • performUnitOfWork()
    • reconcileChildren()
• 가상 DOM을 복제하는 logic

---

2. 실제 돔에 rendering

• 실제 돔에 rendering 하는 역할 만들기

  • commitRoot()
  • commitWork()

• 빨리 끝나는 팀은, 함수형 컴포넌트 쪽.

  • 새로이 추가할 함수형 Hook들에 대해서 고민해볼 부분.

• 백엔드는 언제...?

---

팀 미팅 (with 멘토)

질문 리스트

참고 하고 있는 자료와 점점 유사해지는 문제.

1. 현재 진행이, 조사한 자료 + 우리의 아이디어 조금, 이게 의미가 있는가?
   • 문법도 좀 옛스러운 것들도 있고, 리팩토링도 필요.
   • auto increment (모든 HTMLElement 요소에 id(index)를 부여하여 변경 지점을 바로 탐색할 수 있도록.) ??? 논의중
     • root에서부터 변경지점을 탐색 또는 rerendering 하는 문제를 해결하기 위해서 id(index)를 부여???
2. 어느 정도 비율이 있어야 창조적이라고 할 수 있는지 걱정.

참고하는 자료

https://github.com/pomber/didact/blob/master/didact.js

https://bluewings.github.io/build-your-own-react/

---

프로젝트가, 있었는데, 없었습니다. 2

처음부터 restart!

멘토님과 대화 후 계획을 급 변경하게 되었습니다. 부디, 후회없는 선택이 되었으면 하는 마음으로, 작성합니다...

프로젝트가 진행 중에 리스타트된 건에 대하여.

다시 하는 건 좋다! 그러면 이것을 지키면서 하자!

1. 창의성이 드러나게! - 다른 사람의 코드를 베끼지 않고, 우리만의 창의적인 코드로! ( 그렇지만 성능은 보장할 수 없다. )
2. 주말에도 일하자. 아니, 밤에도... ( 권장사항으로 휴식을 보장하자. )
3. 너무 완벽하게 하려고 하지 말자. 성능에 문제가 있거나 추후에 오류가 발견되어도, 그게 잘못된 거라고 생각하지 말자.
4. 오늘 최종적인(?) 설계를 만들자.
   • 프로젝트가 다시 생겼다!
5. 모르면 알 때까지 질문하기 ( 표정만 봐도 모르는 거 보입니다. )
6. 몇 번 물어봐도 화내지 않기 + 화내기 전에 이해하기.

boostact season 3. (뭐 했다고 3야.)

boostactDOM season 3. (만들어진 적도 없었다.)

"우와 미쳤다, 왜 있는 걸 또 만들지?"

"거의 현대인이 무인도 체험하러 간 꼴."

새로 작성한 명세서

https://docs.google.com/presentation/d/1AbbJOr3kAvwP4nGF2EHMgURJBFmoZpFc6sJPU8x787o/edit#slide=id.ga329c041dc_1_0