<aside> 📋 CRDT 시리즈

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

CRDT... 널 알고 싶어 - (1)

이제 CRDT가 무엇인지 알게 되었어요.

저희가 프로젝트에서 CRDT를 만들고 적용한 과정을 소개할게요.

기획 상 왜비나의 회의록은 노션처럼 블럭 단위의 사용자 인터페이스를 제공하는데요.

Week3에 CRDT 팀이 세웠던 목표는 공동 편집이 가능한 블럭 한개를 만드는거에요.

1. 필요한 인터페이스

우선 p 태그 하나를 블럭으로 사용하기로 했어요.

HTML의 contentEditable 속성을 사용해 input이나 textarea 태그처럼 내용을 수정할 수 있어요.

사용자의 입력에 따른 내용 변경은 리액트가 아닌 HTML 단에서 일어나고, input 이벤트로 변경을 감지합니다.

어플리케이션 쪽에서는 CRDT 인스턴스를 하나 가지고 사용자로부터 발생하는 local operation과 소켓을 통해 들어오는 remote operation을 반영해요.