<div id="readability-page-1" class="page"><div>
                <div id="SE-cb54ce0e-65ad-4588-b28f-19d790360731">
                                    <p id="SE-1c3ae533-d28d-400d-977a-675d637974c4"><span id="SE-5fff74ef-2663-429c-93fc-3b70a162535d">안녕하세요 멍개입니다.</span></p><p id="SE-39d5b326-55e0-4b22-82d4-4c9074502f6e"><span id="SE-eb09d086-3a33-47b9-b797-973b162243d8">​</span></p><p id="SE-ae60f3fb-0507-418d-a883-33807183bf02"><span id="SE-3c1e4047-3848-474c-a5cc-6835a13a79fd">이번 시간은 CRDT의 구현체인 </span><span id="SE-bda84e80-e68d-4193-be05-34ddff50c6c7"><b>yjs</b></span><span id="SE-64eb9046-d3da-4c90-90be-b72123af5f9d">와 이를 </span><span id="SE-dc62a9e2-263b-45b0-aaaf-df7e9aebf9d0"><b>websocket</b></span><span id="SE-53771849-22a8-40f7-a3df-381cb8f4372b">을 이용하여 실시간으로 모든 사용자에게 동기화해주는</span><span id="SE-e7fe7a5e-7b08-4853-ac6e-3959b3cb635a"><b> y-websocket</b></span><span id="SE-c20f8bb9-c410-4476-8d43-aed6a2cffad8">을 이용하여 협업 에디터를 만들어 보겠습니다. 이 둘을 이용하면 아주 편하게 노션과 같은 협업 데이터를 만들 수 있습니다.</span></p>
                            </div>                                <div id="SE-120bdb31-7c39-486b-b084-4ef500aae4da">
                                    <p id="SE-98128b28-a5ec-450f-a2ee-eeca4ced4104"><span id="SE-232e5ddd-596d-4217-9b65-d96dff3a16bc">​</span></p><p id="SE-34285223-25d9-4437-9c6c-942d72b7bc7c"><span id="SE-f12c2a54-c84d-41b4-8199-7801e1b4d8cc">CRDT의 구체적인 동작 원리는 별도의 포스트로 진행합니다. 여기서는 간단히 y-websocekt 기반으로 에디터를 구현해봅니다.</span></p><p id="SE-1b8a1886-430b-45f8-b8fb-5a4d553d09c7"><span id="SE-9e74571e-c64b-4ca3-b681-68d71e525ab5">​</span></p><p id="SE-3199cd89-f2cc-4cd0-8af3-9d697c953989"><span id="SE-b42ead51-67b5-49f7-8709-70f147860450"><b>· 데모 실행</b></span></p>
                            </div>                <div id="SE-e3bed9ba-d8dd-4b13-87a4-c14eb41408d6">
                                    <p>$ git clone https://github.com/pjt3591oo/simple-notion-with-claude.git

$cd simple-notion-with-claude.git</p>
                                </div>                                <div id="SE-2c1c7210-98ea-41dc-962d-e5f754462510">
                            <p id="SE-3ed63bc0-0a00-4cb2-b493-f845220f8835"><span id="SE-b65712d4-24d4-45ef-94b3-c1f64ece966a">이후 localhost:5173으로 접속하면 다음과 같이 협업 에디터를 확인 할 수 있습니다.</span></p>
                        </div>                <div id="SE-e6a89da6-0f76-4cdb-ae0a-f408bacabc99">
                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-e6a89da6-0f76-4cdb-ae0a-f408bacabc99&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNTExMDlfMjk1/MDAxNzYyNjcxNTk2MDMz.JHeQBRtqQfoG_Ppi_RPJFsG5NLczBk-KYVsKQWZnlmQg.nod6dYF8v4Etrr3qxm69AAc6rm2aEsYV76WmbLFm02Ug.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2025-11-09_15.59.17.png&quot;, &quot;originalWidth&quot; : &quot;2054&quot;, &quot;originalHeight&quot; : &quot;2004&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot; }">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyNTExMDlfMjk1/MDAxNzYyNjcxNTk2MDMz.JHeQBRtqQfoG_Ppi_RPJFsG5NLczBk-KYVsKQWZnlmQg.nod6dYF8v4Etrr3qxm69AAc6rm2aEsYV76WmbLFm02Ug.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2025-11-09_15.59.17.png?type=w800" data-width="693" data-height="676" alt="">
                                    </a>
                                </p>
                        </div>
                <div id="SE-963eadd2-a2fb-4379-bc4e-d3f067f69f5f">
                                    <p id="SE-31056e3c-bb34-4a39-8a9a-3826850c49b6"><span id="SE-6f8de954-246e-4d54-af54-22179a3edd97">참고로 /(슬래시) 기반으로 스타일을 지정할 수 있습니다. 참고로 에디터 스타일은 slate를 이용합니다.</span></p><p id="SE-afec3d5b-24a1-4a2f-8f5f-841fa73abba9"><span id="SE-0e54c645-f657-4524-a70c-c4247735a4e9">​</span></p><p id="SE-ea6a1169-f951-4d0b-ae62-8d84ccd601bc"><span id="SE-ed1a16e9-862e-44df-8bfd-f11b6dbf79a1"><b>· 서버 구현</b></span></p><p id="SE-4fb188b9-a8f6-4055-ae98-0b20c0583774"><span id="SE-95ef795c-970e-499b-8721-2536a27ddb35">서버는 매우 심플합니다. y-websocket은 내부적으로 CRDT를 구현하여 </span></p>
                            </div>                <div id="SE-83a17fc2-5791-46bb-8a59-fc8c1893df97">
                                    <p>import { WebSocketServer, WebSocket } from 'ws'
import { IncomingMessage } from 'http'
import { setupWSConnection } from 'y-websocket/bin/utils'

const PORT = 1234

const wss = new WebSocketServer({ port: PORT })

wss.on('connection', (ws: WebSocket, req: IncomingMessage) =&gt; {
  // y-websocket의 setupWSConnection을 사용하여 연결 설정
  setupWSConnection(ws, req)

  console.log(`✅ 새로운 클라이언트 연결됨 (총 ${wss.clients.size}명 접속 중)`)
})

wss.on('close', () =&gt; {
  console.log('❌ 클라이언트 연결 종료됨')
})

console.log(`🚀 CRDT WebSocket 서버가 ws://localhost:${PORT} 에서 실행 중입니다`)
console.log(`📝 협업 에디터를 http://localhost:5173 에서 확인하세요`)
</p>
                                </div>                                <div id="SE-a29d24d4-bf5f-4c5e-8ad5-3006b1fb426a">
                                    <p>const doc = new Y.Doc() // CRDT가 구현된 객체 반환
const yText = doc.getText('shared-text')

// WebSocket을 통해 서버와 연결
const provider = new WebsocketProvider(
  'ws://localhost:1234',
  'my-document', // 그룹핑 키로 사용됨
  doc
)</p>
                                </div>                <div id="SE-59247ccf-7c57-4b45-b59c-a155839217ad">
                            <p id="SE-97d721c5-d94a-4f9a-af10-4f678fd2e247"><span id="SE-0efa7cab-3da3-4e64-9a6a-7c80d368936c">이렇게만 하면 클라이언트는 WebsocketProvider의 두 번째 인자로 전달한 문서 이름이 동일한 사용자와 에디터에서 편집된 내용을 공유할 수 있습니다.</span></p>
                        </div>                <div id="SE-d61b64dc-c8d0-4cf6-b521-0df241187578">
                                    <p>// 로컬 변경사항 → Yjs → WebSocket → 다른 클라이언트
yText.observe(() =&gt; {
  // 변경사항 처리
})</p>
                                </div>                <div id="SE-7d9a6cd9-5cde-4311-82cf-ba6f5326a685">
                            <p id="SE-2ae1ad81-b5b6-4800-9cf3-0401f1604ada"><span id="SE-969d79da-c50a-4d50-9f37-d71dbea994fb">그리고 사용자의 정보를 설정하거나 다른 사용자 상태 변경을 다음과 같이 감지할 수 있습니다. 또한 provider는 awareness를 통해 동일한 문서에 접속중인 사용자에게 상태 변경 이벤트를 발생시킬 수 있습니다.</span></p>
                        </div>                <div id="SE-2552da45-83b0-4d88-ba28-20495e38c6d1">
                                    <p>// 현재 사용자 정보 설정
provider.awareness.setLocalStateField('user', {
  name: '사용자 이름',
  color: '#FF6B6B'
})

// 다른 사용자 상태 변경 감지
provider.awareness.on('change', () =&gt; {
  const states = provider.awareness.getStates()
  // 접속 중인 사용자 목록 업데이트
})</p>
                                </div>                <div id="SE-6f5c1b6e-0859-47c4-80f6-d46afda6ac74">
                                    <p id="SE-253de227-df4f-4e87-a9a5-1d1742882c25"><span id="SE-b7094e67-a3f0-45c7-b523-5a874a8b559c">​</span></p><p id="SE-a98f836b-db6d-4b5b-af9a-8a59ce4276f8"><span id="SE-14d489d5-44a2-476a-ab01-345ec01afcc8">그리고 사용자가 폼에 텍스트를 입력하면 핸들러가 동작합니다.</span></p>
                            </div>                <div id="SE-e874f22f-c645-4a2a-84ec-a26c2879af44">
                                    <p>  const handleInput = (e: Event) =&gt; {
    const target = e.target as HTMLTextAreaElement
    const newText = target.value
    const oldText = yText.toString()

    if (newText !== oldText) {
      doc.transact(() =&gt; {
        yText.delete(0, oldText.length)
        yText.insert(0, newText)
      })
    }
  }</p>
                                </div>                <div id="SE-f9f4e642-4e76-401b-90d9-ab1528e0878b">
                                    <p id="SE-51d4cdcf-b784-4da1-a06a-79160e21bb96"><span id="SE-e4b1ada1-d12e-4bfd-b22d-5dcdc0a78e2c">yText에서 새롭게 입력된 내용으로 업데이트 한 후 doc를 업데이트 합니다. doc는 websocket provider를 만들때 세번째 인자로 전달하였기 때문에 doc가 변경되면 내부적으로 websocket을 이용하여 변경 사항을 서버에 전달하여 다른 사용자에게 전파하는 구조입니다.</span></p><p id="SE-f80ec2dc-6a4f-4654-a96b-8437f3e1fa62"><span id="SE-3bed73ab-663b-4516-8f0a-a44b10603e91">​</span></p><p id="SE-219d61fa-202d-4796-bdc5-369fec7c8999"><span id="SE-7d26671e-5a15-432e-9e1b-b1a31b168771">또한 문서의 변경 사항은 update 이벤트를 통해 할 수 있습니다.</span></p><p id="SE-e4c20a04-e755-44a0-b136-916cf8d8e6fd"><span id="SE-3db1718b-383f-4f37-8e5e-c0c42a987a84">​</span></p>
                            </div>                <div id="SE-51150d3a-bc45-49d1-b0cb-14359ba16d7e">
                                    <p>doc.on('update', (update: Uint8Array, origin: any) =&gt; {
  console.log('Yjs 문서 업데이트:', {
    updateSize: update.length
  })
})</p>
                                </div>                <div id="SE-9bbc1e44-8355-42e8-9cd6-eba419760953">
                                    <p id="SE-0d3e9daa-0afd-4862-a2cf-69be12b97f2f"><span id="SE-5af8483e-4b5f-47b0-90d3-465780e30a4a">​</span></p><p id="SE-0ed0dbbc-2604-486a-a752-b325b27b0a4b"><span id="SE-7886d7e5-b230-42d0-9ecd-700f39d86e6e">​</span></p><p id="SE-f2a77c14-e8ef-4ed5-b512-5285d608ab2e"><span id="SE-e3a23c17-dee3-4298-b743-13b2fafff4e9">근데 쓰다가 느낀건데 이렇게 하면 서버가 부하를 지속적으로 받게된다. websocket이 아니라 사용자들끼리 P2P로 연결한 후 서버를 거치지 않고 에디팅이 되도록 할 수 있을것 같다. 이렇게 되면 어느 주기로 서버에 저장할지 정책이 필요하다. 이렇게 되면 서버의 역할은 현재 참여된 사용자의 p2p 연결정보, 작성된 문서 주기적으로 저장이 될 것이다.</span></p>
                            </div>    </div></div>

삽질하는 멍개씨

안녕하세요 멍개입니다. 이번 시간은 CRDT의 구현체인 yjs와 이를 websocket을 이용하여 실시간으로 모든 사용자에게 동기화해주는 y-websocket을 이용하여 협업 에디터를 만들어 보겠습니다. 이 둘을 이용하면 아주 편하게 노션과 같은 협업 데이터를 만들 수 있습니다. CRDT의 구체적인 동작 원리는 별도의 포스트로 진행합니다. 여기서는 간단히 y-websocekt 기반으로 에디터를 구현해봅니다. · 데모 실행 이후 localhost:5173으로 접속하면 다음과 같이 협업 에디터를 확인 할 수 있습니다. 참고로 /(슬래시) 기반으로 스타일을 지정할 수 있습니다. 참고로 에디터 스타일은 slate를 이용합니다. · 서버 구현 서버는 매우 심플합니다. y-webs.......

yjs와 y-websocket으로 노션과 유사한 협업 에디터 만들기 with claude code

댓글