<aside> 📋 CRDT 시리즈

  1. CRDT... 널 알고 싶어 - (1)
  2. CRDT. 너 왜비나랑 만나볼래? - (2)
  3. CRDT를 납작하게 만들어줘요. - (3)
  4. CRDT를 블럭 여러개에 적용해봐요. - (4)
  5. CRDT야 이것좀 붙여넣게 해줘 - (5)
  6. CRDT 블럭아 포커스 좀 잡아줘 - (6) </aside>

feat/#161 브랜치가 생겨난 배경

Week3에 왜비나는 링크드리스트 기반으로 구현한 CRDT로 블럭 하나를 공동 편집하는 기능을 제공했어요.

화면_기록_2022-11-26_오후_5.11.51.mov

이제 이 블럭들을 여러개 사용할 수 있도록 확장이 필요했어요.

기획 주차에 연습해본대로 상위 컴포넌트에서 <Block />들을 만들고 삭제해주면 되는데요.

<Mom />에서 blocks 상태를 두고 <Block />들을 렌더링 한 뒤 <Block /> 내부에서 구현한 편집 로직을 사용하면 돼요.

blocks.map((block) => <Block />)

그런데 텍스트 뿐 아니라 블럭에도 동기화 로직이 필요하다는 알고싶지 않은 사실을 깨달았어요.

그래도 저희에게는 지난주 만든 **CRDT 패키지**와 **useCRDT 훅**이 있었어요. 🎉

이것들을 재사용해서 해볼 수 있겠다고 판단했지만 막상 어플리케이션에 적용하려니 단순한 작업이 아니었어요.