Contentful API를 사용한 간단한 Markdown에서 HTML 변환

Contentful API Markdown을 HTML로 변환하기

Contentful API에서 마크다운 텍스트를 HTML 코드로 변환하여 HTML 페이지에 표시하는 데 어려움을 겪고 계신가요? 걱정하지 마세요. 우리는 여러 가지 해결책을 제안하고 있습니다.

Parsedown 사용하기

Parsedown과 같은 라이브러리를 사용해보았지만 성공하지 못한 경우, 대안적인 접근 방식이 있습니다. Handlebars 템플릿 엔진을 사용하는 것이 하나의 옵션입니다. 다음은 예시입니다:

<code class="language-javascript">// 필요한 모듈 가져오기
var marked = require('marked');
const Handlebars = require('handlebars');

// marked 라이브러리를 위한 옵션 설정
marked.setOptions({
  renderer: new marked.Renderer(),
  sanitize: true,
  smartLists: true,
  smartypants: true
});

router.get('/', (req, res) => {
  // entry ID를 사용하여 Contentful API에서 엔트리 가져오기
  client.getEntry('<ENTRY_ID>')
  .then((entry) => {
    // marked 라이브러리를 사용하여 마크다운을 HTML로 변환하기
    entry.fields.body = marked(entry.fields.body);
    res.render('static/index', {
      entry: entry,
      user: req.user
    });
  }).catch((err) => {
    console.log(err);
  });
});

Handlebars 템플릿 내에서 HTML 이스케이핑을 방지하기 위해 세 개의 중괄호를 사용하세요:

<code class="language-javascript">{{{entry.fields.body}}}

React 솔루션

React를 사용하는 경우, ReactMarkdown 패키지를 사용하여 마크다운 콘텐츠를 HTML로 변환할 수 있습니다. 다음은 방법입니다:

<code class="language-javascript">// ReactMarkdown 패키지 설치하기
npm install --save react-markdown

// 필요한 모듈 가져오기
import React from 'react';
import ReactMarkdown from 'react-markdown';

// 컴포넌트 생성하기
const NewsDetail = (props) => {
  // 마크다운 바디를 HTML로 변환하기
  const body = marked(props.body || "");
  
  // 컴포넌트 렌더링하기
  return (
    <div className="news-detail">
        <h2>{props.title}</h2>
        <div dangerouslySetInnerHTML={{ __html: body }}></div>
    </div>
  );
};

NewsDetail 컴포넌트에 마크다운 콘텐츠를 프롭으로 제공하는 것을 잊지 마세요.

결론

Contentful API에서 마크다운을 HTML로 변환하는 것은 다양한 방법으로 달성할 수 있습니다. Parsedown과 같은 라이브러리를 사용하거나 Handlebars 또는 ReactMarkdown과 같은 솔루션을 선택하든, 이러한 옵션은 변환 프로세스를 간소화하고 HTML 페이지에서 콘텐츠가 올바르게 렌더링되도록 도와줄 수 있습니다.

기술 프로젝트에서 사용하는 특정 사용 사례와 기술에 따라 적절한 방법을 선택하는 것을 기억하세요. 필요에 가장 잘 맞는 솔루션을 찾을 때까지 다양한 해결책을 탐색하고 실험하는 데 시간을 내 주세요.

참고 자료 : 

reactjs