[javascript] Draft.js를 이용한 텍스트 에디터의 오프라인 모드 지원하기

24 Nov 2023

javascript

온라인 환경에서 작동하는 텍스트 에디터를 만들 때, 사용자가 인터넷 연결이 없는 상황에서도 편집을 계속할 수 있도록 오프라인 모드를 지원하는 것은 중요합니다. 이번 글에서는 Draft.js를 사용한 텍스트 에디터에서 오프라인 모드를 구현하는 방법에 대해 알아보겠습니다.

1. 웹 스토리지 활용하기

오프라인 모드를 구현하기 위해 가장 간단한 방법은 웹 스토리지를 활용하는 것입니다. 웹 스토리지는 브라우저에서 제공하는 로컬 스토리지 또는 세션 스토리지를 이용할 수 있습니다. 이를 사용하여 Draft.js 에디터의 상태를 로컬에 저장하고, 오프라인 상태에서는 해당 저장된 값을 불러와 에디터를 초기화하는 방식으로 구현할 수 있습니다.

const saveEditorState = (editorState) => {
  // editorState를 웹 스토리지에 저장하는 로직
}

const loadEditorState = () => {
  // 웹 스토리지에서 저장된 editorState를 불러오는 로직
  return savedEditorState;
}

// 에디터 생성 시 초기 상태 설정
const initialEditorState = loadEditorState();
const [editorState, setEditorState] = useState(initialEditorState);

// 에디터 상태가 변경될 때마다 저장
const onEditorStateChange = (newEditorState) => {
  setEditorState(newEditorState);
  saveEditorState(newEditorState);
}

2. 오프라인 상태 감지하기

웹 스토리지를 사용해 에디터의 상태를 저장하고 불러올 수 있다면, 다음은 오프라인 상태를 감지하여 사용자에게 알리는 부분입니다. navigator 객체의 온라인 속성을 이용해 현재 온라인 상태를 확인할 수 있습니다. 오프라인 상태일 경우, 알림 메시지를 표시하여 사용자에게 네트워크가 연결되어야만 작업이 가능하다는 것을 알릴 수 있습니다.

const [isOnline, setIsOnline] = useState(navigator.onLine);

const handleOnlineStatus = () => {
  setIsOnline(true);
};

const handleOfflineStatus = () => {
  setIsOnline(false);
};

useEffect(() => {
  window.addEventListener('online', handleOnlineStatus);
  window.addEventListener('offline', handleOfflineStatus);

  return () => {
    window.removeEventListener('online', handleOnlineStatus);
    window.removeEventListener('offline', handleOfflineStatus);
  };
}, []);

return (
  <div>
    {isOnline ? (
      <p>온라인 상태입니다. 편집이 가능합니다.</p>
    ) : (
      <p>인터넷에 연결되어 있지 않습니다. 오프라인 상태에서는 저장된 내용만 편집할 수 있습니다.</p>
    )}
    <Editor
      editorState={editorState}
      onChange={onEditorStateChange}
    />
  </div>
);

3. 오프라인 동기화

오프라인 모드에서 편집한 내용을 다시 온라인 상태가 되었을 때 서버에 동기화하는 과정도 고려해야 합니다. 이를 위해 데이터베이스나 서버와 연동하여 오프라인에서의 변경 사항을 동기화해야 합니다. 이러한 동기화 과정에는 IndexedDB 같은 웹 데이터 저장소를 사용할 수 있습니다.

const saveChangeToServer = (change) => {
  // 서버에 변경 내용을 저장하는 로직
}

const handleOfflineChange = (change) => {
  // 오프라인 상태에서의 변경 사항을 웹 데이터 저장소에 저장하는 로직
  saveChangeToServer(change);
}

// Editor 컴포넌트에서 변경 사항이 발생할 때마다 handleOfflineChange 호출

결론

오프라인 모드를 지원하는 텍스트 에디터를 구현하기 위해 웹 스토리지와 온라인 상태 감지, 오프라인 동기화 등의 기능을 활용할 수 있습니다. 이를 통해 사용자는 인터넷 연결이 없는 상황에서도 편집을 계속할 수 있으며, 온라인 상태가 되었을 때 동기화를 통해 변경 사항을 저장할 수 있게 됩니다.