공동편집

이전 게시글에서 문제가 있어서 Yjs를 도입하기로 했다. 이 글을 통해 어떻게 도입했는지 작성해보려고한다. Yjs알아보기 공유 타입 선택하기 Yjs는 다양한 타입을 지원한다. map도있고, array도 있다. 하지만, 우리는 코드 에디터니까 text를 선택했다. 이렇게 사용할 수 있다. insert를 통해 n번 인덱스에 문자를 삽입하는 형태다. toString을 통해 실제 텍스트를 얻어올 수 있다. delete역시 동일한데, insert와 다르게 length를 두번째 인자로 받는다. 어떻게 병합하지 여기서 핵심만 보자면 // Merge changes from remote const update = Y.encodeStateAsUpdate(ydocRemote) //update용 객체(Uint8Array다) ..

이 글은 아래의 글 부터 이어집니다. https://0422.tistory.com/332 실시간 동시편집 구현 연대기 (1) - CRDT와 OT 들어가며 네이버 부스트캠프에서 진행중인 그룹프로젝트로 algoitni라는 알고리즘을 동료, 친구들과 화상, 음성, 채팅을 공유하며 코드를 함께 작성할 수 있는 서비스를 만들고 있다. https://algoitni 0422.tistory.com 우리 프론트엔드 팀은 우선은 CRDT 구현에 도전해보기로 했다. 굉장한 기술적 도전이 될것이라 판단했기때문이다. 어떻게 구현하지? 구현하기위해서는 필요한 것들부터 알아야한다. CRDT, 즉, 클라이언트 측에서 원활하게 상호 병합을 문제없이 하기위해서는 어떤 조건을 만족해야할까? A 사용자에서 병합하나, B 사용자에서 병합하..

들어가며 네이버 부스트캠프에서 진행중인 그룹프로젝트로 algoitni라는 알고리즘을 동료, 친구들과 화상, 음성, 채팅을 공유하며 코드를 함께 작성할 수 있는 서비스를 만들고 있다. https://algoitni.site/ 😺 AlgoITNi 너 알고리즘 얼마나 알고있니? algoitni.site 실시간 동시편집 이번 프로젝트에서 가장 어려운 문제는 코드를 함께 작성할 수 있는 이었다. (사실 쉬운게 없었다...) 다행히도 시중에는 이런 기능을 제공하는 프로그램들이 꽤 있다. Google Docs, Notion이 그렇다. 이들은 어떻게 구현했을까? OT와 CRDT 알아보기 실시간 동시편집을 구현하는데에는 크게 두가지 기술을 적용시킬 수 있다. OT (Operational Transformation) OT..