2주차 발표 자료

2주차 PPT

대본

• 1p
  안녕하세요. 바닐라 마켓인줄 알았는데 부스트액트를 개발하고 있는 자유주제 D조입니다. 저희 조는 데모가 비교적 간단해서 간단히 이번주 활동에 대해 말씀드리고 떼모를 보여 드리겠습니다.

• 2p
  저번주에 바닐라 마켓을 선택하게 된 이유에 대해서 설명 드렸는데요. (애니메이션)

• 3p
  저희는 부스트액트와 바닐라마켓을 각각 코어와 애플리케이션이라 지칭하고, 처음에는 두 가지를 모두 개발하려고 했지만 실질적으로 주어진 기간 내에 두 가지를 모두 개발하는 것은 무리라고 판단했습니다.
  이 중에서 저희가 더 중요하게 여기고 있는 코어 기능, 부스트액트에 집중하기로 했습니다.

• 4p
  오늘 발표에서는 저희가 이번 주 학습하고 구현한 가상 돔의 동작 순서에 대해서 말씀 드리겠습니다.

• 5p: createElement
  먼저 첫 번째로, 바벨을 이용해 jsx 파일을 js로 변경해야 합니다. 이 가운데 주석을 쓰지 않으면 React.createElement로 동작하는데, 위의 주석을 추가하여 Boostact의 createElement로 동작하게 합니다.

• 6p: render
  최종적으로 createElement 함수가 동작하고 나면 type, props, children을 가진 JS로 된 객체가 반환됩니다. 저희는 이것을 설계도로 보고 가상 돔을 그릴 준비를 합니다.

• 7p
  Current는 실제 브라우저의 돔의 최신 상태를 나타낸 가상 돔입니다. Work In Progress는 위의 설계도를 바탕으로 그려진 가상 돔입니다. 이번 발표에서는 WIP라고 부르겠습니다. Real은 실제 브라우저의 돔입니다. Render는 이 WIP DOM를 실제 브라우저의 돔에 옮기는 과정입니다.

• 8p
  여러가지 eventListener나 hook을 통해서 상태가 바뀌는 경우 오른쪽과 같이 설계도가 변경될 수 있습니다. 이로 인해 re-rendering이 일어나는 과정을 그림으로 설명하겠습니다.

• 9p
  실제 브라우저엔 ul 아래 두 개의 li가 있고, current는 이 브라우저의 모습을 그린 가상돔입니다. 새로운 설계도로 WIP를 그려가면서, Current DOM에 매칭되는 부분을 비교하여 각각의 노드에 effectTag를 붙입니다. effectTag는 아무 변화가 없거나 props가 바뀐 경우 update, 추가된 경우 placement, 삭제된 경우 deletion을 붙여주었습니다.

• 10p
  effectTag에 맞게 브라우저 DOM에 반영하고, WIP 의 가상 돔은 Current의 가상 돔이 됩니다.

• 11p
  저희가 만든 헬로우 월드를 보여 드리겠습니다! 와 이렇게 input창에 쓴 내용을 바로 re-rendering하여 텍스트에 반영할 수 있습니다! 콘솔을 확인하시면, 부스트액트가 새로 렌더링 된 내용이 있는지 확인하고 있음을 보실 수 있습니다. requestIdleCallback이란 함수를 통해, 브라우저가 쉬는 동안에만 확인하고 있습니다.

• 12p
  이상으로 자유주제 D조였습니다. 감사합니당~