[javascript] Draft.js를 사용한 텍스트 에디터의 북마크 공유 및 동기화 기능 구현하기

24 Nov 2023

javascript

텍스트 에디터는 사용자가 텍스트를 편집하고 서식을 지정할 수 있는 강력한 도구입니다. 그렇지만 여러 사용자 간에 텍스트를 공유하고 동기화하는 기능을 추가하는 것은 챌린지일 수 있습니다. 이번 기술 블로그에서는 Draft.js라는 JavaScript 라이브러리를 사용하여 텍스트 에디터에 북마크 공유 및 동기화 기능을 구현하는 방법에 대해 알아보겠습니다.

Draft.js 소개

Draft.js는 Facebook에서 개발한 리액트 기반의 텍스트 에디터 라이브러리입니다. 이 라이브러리는 텍스트 편집 기능을 구현하는 데 필요한 다양한 기능과 컴포넌트를 제공합니다. Draft.js는 복잡한 텍스트 에디팅 요구 사항을 간단하고 유연하게 다룰 수 있는 강력한 도구입니다.

북마크 공유 및 동기화 구현 방법

북마크 공유 및 동기화는 여러 사용자 간에 동일한 텍스트를 작업하는 경우 유용합니다. 사용자가 문서에서 북마크를 추가하면 다른 사용자도 해당 북마크를 볼 수 있어 텍스트 작업을 조율할 수 있게 됩니다.

1. 텍스트 에디터 컴포넌트 생성하기

먼저, Draft.js를 사용하여 텍스트 에디터 컴포넌트를 생성합니다. 이 컴포넌트는 사용자 입력을 받고 텍스트를 편집할 수 있는 환경을 제공합니다. Draft.js의 Editor 컴포넌트를 사용하여 텍스트 에디터를 생성할 수 있습니다.

import React, { useState } from 'react';
import { Editor, EditorState } from 'draft-js';

function TextEditor() {
  const [editorState, setEditorState] = useState(() =>
    EditorState.createEmpty()
  );

  const handleChange = (newEditorState) => {
    setEditorState(newEditorState);
  };

  return (
    <div>
      <Editor editorState={editorState} onChange={handleChange} />
    </div>
  );
}

export default TextEditor;

2. 북마크 추가 기능 구현하기

텍스트 에디터에 북마크를 추가하는 기능을 구현해야 합니다. 사용자가 특정 위치에서 북마크를 추가할 수 있도록 컴포넌트 내에 북마크 추가 버튼을 추가합니다.

import React, { useState } from 'react';
import { Editor, EditorState, RichUtils } from 'draft-js';

function TextEditor() {
  const [editorState, setEditorState] = useState(() =>
    EditorState.createEmpty()
  );

  const handleAddBookmark = () => {
    const contentState = editorState.getCurrentContent();
    const currentSelection = editorState.getSelection();
    const modifiedSelection = currentSelection.set('hasFocus', false);
    const withBookmark = RichUtils.toggleBlockType(
      editorState,
      'bookmark',
      modifiedSelection
    );
    const newState = EditorState.push(editorState, withBookmark, 'change-block-type');
    const clearedState = EditorState.forceSelection(newState, currentSelection);
    setEditorState(clearedState);
  };

  const handleChange = (newEditorState) => {
    setEditorState(newEditorState);
  };

  return (
    <div>
      <div>
        <button onClick={handleAddBookmark}>Add Bookmark</button>
      </div>
      <Editor editorState={editorState} onChange={handleChange} />
    </div>
  );
}

export default TextEditor;

3. 북마크 공유 및 동기화

북마크를 공유하고 동기화하기 위해 서버와 클라이언트 간에 데이터를 전송하는 방식을 구현해야 합니다. 이를 위해 웹 소켓 기술을 사용하면 실시간으로 데이터를 전송할 수 있습니다.

// 서버 측 코드 (예시)
const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  ws.on('message', (message) => {
    // 북마크 데이터 처리 로직
    // 다른 클라이언트들에게 북마크 정보 전송
    wss.clients.forEach((client) => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

클라이언트 측에서는 웹 소켓을 사용하여 서버와 연결하고, 에디터 내에서 북마크를 추가할 때마다 북마크 정보를 서버로 전송합니다. 서버에서는 해당 북마크 정보를 다른 클라이언트들에게 전송하여 동기화합니다.

이렇게 서버와 클라이언트 간에 데이터를 전송해서 북마크를 동기화하면 여러 사용자가 같은 문서를 작업할 때 효과적으로 협업할 수 있습니다.

마치며

이번 기술 블로그에서는 Draft.js를 사용하여 텍스트 에디터에 북마크 공유 및 동기화 기능을 구현하는 방법을 알아보았습니다. 북마크 추가 및 서버와의 데이터 통신을 통해 여러 사용자 간에 텍스트를 공유하고 동기화하는 기능을 구현할 수 있습니다.

더 자세한 내용은 Draft.js 공식 문서를 참조하시기 바랍니다.