마크다운은 텍스트 기반의 문서 작성 형식으로, 다양한 마크다운 에디터나 뷰어를 사용하여 마크다운 문서를 보거나 편집할 수 있습니다. 이번 글에서는 Marked라는 JavaScript 라이브러리를 사용하여 모바일 앱에 마크다운 뷰어를 구현하는 방법에 대해 알아보겠습니다.

1. Marked란?

Marked는 마크다운 문법으로 작성된 텍스트를 웹 페이지에서 렌더링하는데 사용되는 JavaScript 라이브러리입니다. 이 라이브러리는 간단하고 가벼우며, HTML로 변환된 마크다운 문서를 웹 페이지에 쉽게 삽입할 수 있습니다.

2. Marked를 사용하여 모바일 앱에 마크다운 뷰어 구현하기

2.1 Marked 라이브러리 설치하기

우선 npm을 사용하여 Marked를 설치해야 합니다. 다음 명령을 사용하여 Marked를 설치해주세요.

npm install marked

2.2 Marked를 사용하여 마크다운 뷰어 구현하기

아래는 Marked를 사용하여 마크다운을 HTML로 변환하는 간단한 예제 코드입니다.

const marked = require('marked');

const markdownText = '# Hello, World!';
const htmlText = marked(markdownText);

console.log(htmlText);

위 코드는 marked 모듈을 불러와 marked 함수를 사용하여 마크다운을 HTML로 변환하고, 변환된 HTML을 콘솔에 출력하는 예제입니다.

2.3 모바일 앱에서 마크다운 뷰어 구현하기

각 모바일 앱 프레임워크에 따라 Marked를 사용하여 마크다운 뷰어를 구현하는 방법이 다를 수 있습니다. 아래는 React Native를 기준으로 한 간단한 예제 코드입니다.

import React from 'react';
import { ScrollView, Text } from 'react-native';
import marked from 'marked';

const MarkdownViewer = ({ markdownText }) => {
  const htmlText = marked(markdownText);

  return (
    <ScrollView>
      <Text>{htmlText}</Text>
    </ScrollView>
  );
}

export default MarkdownViewer;

위 코드에서는 React Native의 ScrollView와 Text 컴포넌트를 사용하여 MarkdownViewer 컴포넌트를 구현하고 있습니다. marked 함수를 사용하여 markdownText를 HTML로 변환하고, 변환된 HTML을 Text 컴포넌트 안에서 보여주고 있습니다.

이제 모바일 앱에서 MarkdownViewer 컴포넌트를 사용하여 마크다운 뷰어를 구현할 수 있습니다.

3. 마무리

이번 글에서는 Marked를 사용하여 모바일 앱에 마크다운 뷰어를 구현하는 방법에 대해 알아보았습니다. Marked는 간단하고 가벼운 라이브러리로, 마크다운 문서를 HTML로 변환하여 쉽게 렌더링할 수 있습니다. 각 모바일 앱 프레임워크에 따라 구현 방법이 다소 다를 수 있으니, 해당 프레임워크의 공식 문서나 예제 코드를 참고하여 구현해보시기 바랍니다.

References

• Official Marked GitHub Repository