[javascript] Marked를 사용하여 문서 작성 시 자동 백업 기능을 구현하는 방법은?

30 Nov 2023

javascript

1. 로컬 스토리지 활용하기

로컬 스토리지(Local Storage)는 브라우저에 데이터를 저장할 수 있는 기능입니다. 이를 활용하여 Markdown 문서를 자동으로 백업할 수 있습니다.

const markdownInput = document.querySelector("#markdown-input");

// Markdown 입력란이 변경될 때마다 자동으로 백업
markdownInput.addEventListener("change", () => {
  const content = markdownInput.value;
  localStorage.setItem("backup", content);
});

// 페이지가 로드될 때 백업된 내용 불러오기
window.addEventListener("load", () => {
  const backup = localStorage.getItem("backup");
  if (backup) {
    markdownInput.value = backup;
  }
});

위의 예시 코드에서는 #markdown-input ID를 가진 textarea 엘리먼트를 Markdown 입력란으로 가정하고, 해당 입력란의 내용이 변경될 때마다 change 이벤트가 발생합니다. 이때, localStorage를 사용하여 입력된 Markdown 내용을 백업하고, 페이지가 로드될 때 저장된 백업 내용을 불러옵니다.

2. 서버에 저장하기

로컬 스토리지는 브라우저에만 저장되기 때문에, 서버에 백업된 Markdown을 저장하여 보다 안전하게 보관할 수 있습니다. 서버에 저장하는 방법은 다양한 방법으로 구현할 수 있으며, 아래는 간단한 예시 코드입니다.

const markdownInput = document.querySelector("#markdown-input");

// Markdown 입력란이 변경될 때마다 서버에 자동으로 백업
markdownInput.addEventListener("change", () => {
  const content = markdownInput.value;
  
  // 서버에 AJAX 요청을 보내서 Markdown을 저장하는 로직
  fetch("/api/backup", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ content }),
  })
    .then(response => response.json())
    .then(data => {
      console.log("백업이 완료되었습니다.");
    })
    .catch(err => {
      console.error("백업 중 에러가 발생했습니다.", err);
    });
});

// 페이지가 로드될 때 백업된 내용 불러오기
window.addEventListener("load", () => {
  // 서버로부터 백업된 Markdown을 불러오는 로직
  fetch("/api/backup")
    .then(response => response.json())
    .then(data => {
      const backup = data.content;
      if (backup) {
        markdownInput.value = backup;
      }
    })
    .catch(err => {
      console.error("백업 데이터를 불러오는 중 에러가 발생했습니다.", err);
    });
});

위의 예시 코드에서는 #markdown-input ID를 가진 textarea 엘리먼트를 Markdown 입력란으로 가정하고, 해당 입력란의 내용이 변경될 때마다 change 이벤트가 발생합니다. 이때, fetch를 사용하여 POST 요청을 서버에 보내고, 서버에서는 이 요청을 처리하여 Markdown을 저장합니다. 페이지가 로드될 때는 GET 요청을 보내서 저장된 Markdown을 불러와 입력란에 표시합니다.

위의 예시 코드는 단순한 개념을 설명하기 위한 것이므로 실전에서 사용하려면 실제 서버와의 통신 방식 등을 적절히 구현해야 합니다.