[javascript] Marked를 사용하여 문서 작성 시 맞춤법 검사 기능을 추가하는 방법은?

30 Nov 2023

javascript

맞춤법 검사를 지원하는 서비스나 라이브러리를 찾습니다. 대표적으로 Grammarly가 있습니다.
선택한 맞춤법 검사 서비스나 라이브러리의 API를 사용하여 문서의 텍스트를 맞춤법 검사합니다. 이를 위해서는 해당 서비스에 회원가입하여 API 키를 발급받아야 합니다.
Marked의 변환 작업이 완료된 HTML 결과물을 다시 JavaScript로 가져와서 각 텍스트 단락에 대해 맞춤법 검사 기능을 적용합니다.

아래는 Marked를 사용하여 문서 작성 시 맞춤법 검사 기능을 추가하는 예제 코드입니다:

const marked = require('marked');
const grammarlyApiKey = 'Your_Grammarly_API_Key';

const markdownText = `
# 제목

맞춤법 검사가 필요한 문장입니다.
`;

marked.setOptions({
  gfm: true,
  breaks: true,
});

const html = marked(markdownText);

async function applyGrammarlyCheck(html) {
  const paragraphs = html.split('<p>');
  for (let i = 1; i < paragraphs.length; i++) {
    const text = paragraphs[i].split('</p>')[0];
    const grammarlyResponse = await fetch(`https://api.grammarly.com/v1/check?apiKey=${grammarlyApiKey}&text=${text}`);
    const grammarlyData = await grammarlyResponse.json();
    const correctText = grammarlyData.result.correctedText;
    paragraphs[i] = paragraphs[i].replace(text, correctText);
  }
  return paragraphs.join('<p>');
}

applyGrammarlyCheck(html)
  .then((correctedHtml) => {
    // 맞춤법 검사가 적용된 HTML을 사용하여 렌더링 또는 저장 등의 작업을 수행합니다.
    console.log(correctedHtml);
  })
  .catch((error) => {
    console.error(error);
  });

위 코드에서 Your_Grammarly_API_Key 부분에는 본인의 Grammarly API 키를 넣어야 합니다. 이 코드는 Marked를 사용하여 Markdown을 HTML로 변환한 후, 변환된 HTML에서 맞춤법 검사를 수행하고, 검사된 결과를 적용하여 최종 HTML을 얻는 예제입니다.

참고로 위 코드는 JavaScript의 동기 작업을 async/await를 사용하여 비동기로 처리하고 있습니다. 따라서 사용하는 환경에 따라 비동기 처리 부분을 적절하게 변경해야 합니다.

이외에도 자체 맞춤법 검사 기능을 구현하거나 다른 맞춤법 검사 라이브러리를 사용할 수도 있습니다. 라이브러리 선택 및 구현 방법은 개발 요구사항과 프로젝트의 특성에 따라 달라질 수 있습니다.