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

30 Nov 2023

javascript

<!DOCTYPE html>
<html>

<head>
    <title>자동 저장 기능 구현 예시</title>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script>
        let textarea = document.getElementById('markdown-input');
        let output = document.getElementById('html-output');

        function convertToMarkdown() {
            let markdownText = textarea.value;
            let htmlText = marked(markdownText);
            output.innerHTML = htmlText;
        }

        function saveMarkdown() {
            let markdownText = textarea.value;
            // 실제로는 해당 markdownText를 서버로 전송하여 저장 로직을 처리해야 합니다.
            // 여기서는 간단하게 console에 출력하는 것으로 대체합니다.
            console.log("Markdown 저장: " + markdownText);
        }

        textarea.addEventListener("input", convertToMarkdown);
        textarea.addEventListener("input", saveMarkdown);
    </script>
</head>

<body>
    <textarea id="markdown-input" rows="10" cols="50"></textarea>
    <div id="html-output"></div>
</body>

</html>

위 예시 코드는 HTML 파일 안에 Marked 라이브러리를 로드한 후 textarea와 div 태그를 사용하여 마크다운 입력창과 변환 결과를 표시하는 영역을 만들었습니다. convertToMarkdown 함수는 textarea의 내용이 변경될 때마다 마크다운을 HTML로 변환하고 결과를 출력합니다. saveMarkdown 함수는 textarea의 내용이 변경될 때마다 markdownText를 저장 로직으로 전달합니다.

실제로는 저장 로직을 서버로 전송하여 처리해야 하며, 이 예시에서는 단순히 console에 출력하는 방식으로 대체하였습니다. 원하는 동작에 맞게 코드를 수정하여 자동 저장 기능을 구현할 수 있습니다.