목록 보기
라이브러리만 붙이면 동시편집은 끝일까요?
프론트엔드

라이브러리만 붙이면 동시편집은 끝일까요?

채널톡
채널톡
2026년 11월 12일

두줄요약

ProseMirror와 Yjs를 연결한 동시편집의 변경 전파·반영 흐름을 설명했습니다. 중복 의존성으로 인한 런타임 오류를 peer dependency와 external로 해결했습니다.

구조와 흐름

  • ProseMirror 트랜잭션과 Yjs Doc 간 변경을 양방향 동기화하는 y-prosemirror 바인딩
  • Provider의 웹소켓 기반 Yjs update 전송·수신과 원격 변경의 ProseMirror 트랜잭션 변환
  • mutex와 origin 구분을 통한 바인딩 재진입 및 수신 update 재전송 방지

원인 분석

  • ProseMirror 스키마의 doc 노드 탐색 오류와 orderedmap 중복 로딩
  • 서로 다른 모듈 인스턴스의 생성자로 인한 instanceof 판별 실패
  • 툴킷 번들 내부 ProseMirror와 바인딩의 호스트 ProseMirror가 공존한 의존성 구조

해결 방법

  • ProseMirror 공통 패키지 구성과 툴킷의 peer dependency 선언
  • 빌드의 external 설정으로 공유 의존성을 번들에서 제외
  • 툴킷·바인딩·호스트의 ProseMirror 및 OrderedMap 참조 경로 통일

주의할 점

  • peer dependency 선언만으로 번들 내부 의존성 제거 불가
  • external 적용 후에도 호환 버전과 최종 앱의 동일 모듈 참조 필요
  • 객체·모듈 내부 상태 공유 라이브러리의 싱글턴 유지 필요

다음 읽기

#Yjs 주제를 이어서 읽기

동시편집 중 서버에서 일어나는 일

문서 협업 장벽을 낮추기 위해 Yjs 기반 CRDT 동시편집 서버 구조를 설계했습니다. 웹소켓 동기화와 update 영속화, 기존 blocks 문서 형식 호환 방식을 설명합니다.

채널톡
채널톡
백엔드
전체 보기

댓글 0개

댓글을 작성하려면 로그인이 필요합니다.

댓글을 불러오는 중...