marked

marked

marked는 은 이번에 마크다운 블로그 만들기를 하면서 알게된 마크다운 파싱 라이브러리다.

CLI, 브라우저, Node환경에서 사용할 수 있고 매우 빠른 마크다운 컴파일러라고 보면 된다.

gray-matter로 스트링에서 객체로 변환한 후 content를 marked메서드의 파라미터로 전달해주면 된다.

marked(content)

dangerouslySetInnerHTML

dangerouslySetInnerHTML는 리액트에서 innerHTML을 대체하는 사용 방법이다. 공식문서에서는 코드에서 HTML을 설정하면 사용자가 크로스 사이트 스크립팅 공격에 실수로 노출되는 위험이 있다.

그러므로 리액트에서 HTML을 설정하기위해서는 dangerouslySetInnerHTML 이라고 쓰고 객체로 전달함으로서 위험성을 다시금 인지시키게 한다. 전달하는 객체의 key는 __html으로 설정.

function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

marked + jsx

// ... code 중략
<div className='post-body'>
  // marked에 props로 받아온 content를 넣어줌으로서 스트링을 마크다운으로 변환해 렌더링 해준다.
  <div dangerouslySetInnerHTML={{ __html: marked(content) }}></div>
</div>