1. TinyMCE을 설치해보자.

공식 홈페이지에서 제공해주는 문서를 참조하여 React.js 환경에서 에디터를 설치해보았다.

React.js의 Creact React App을 사용할 때 TinyMCE demo를 적용시켜 프로젝트를 생성하는 방법이 있었지만 나는 이미 블로그 프로젝트를 만들어놓고 있던 상황이었기에 npm 을 이용해 패키지를 설치한 다음 공식문서의 설치 방법을 따라하였다.

• WYSIWYG?
  위지위그(WYSIWYG: What You See Is What You Get, "보는 대로 얻는다")는 문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력물과 동일하게 나오는 방식을 말한다. 이는 편집 명령어를 입력하여 글꼴이나 문장 형태를 바꾸는 방식과 구별된다. (출처 : 위키피디아 백과사전)

오잉? 에러는 아니지만 왠 경고창이 하나 출력되었다. 알고보니 TinyMCE은 우선 자사 계정을 하나 만든 다음에 API키를 발급받아야 사용이 가능하다고 한다.
내 구글 계정을 이용해서 계정을 생성하고 API키를 발급받아 환경변수를 이용해 에디터 컴포넌트에 적용해주니 경고창이 출력되지 않는다.

또 에디터 기능은 기본적으로 무료이지만 유료 플랜과 자체 기능들이 제공되고 있다고 한다. 지금은 무료 버전에서 제공해주는 기능들로 충분하니 따로 결제를 하지는 않았다. 그리고 TinyMCE은 회사의 Cloud 시스템을 거치는 방식과 자기 앱에 독립적으로 배포 하는 방식이 있는 것으로 보이는데 일단은 기본값인 Cloud 방식을 사용하기로 하였다.

2. 작동 테스트.

글을 DB에 저장하고 데이터를 꺼내와서 화면에 출력하는 부분은 이전과 동일하다. 에디터를 적용한 다음 테스트용 글을 작성하고 이걸 조회해보니..

아주 잘 동작한다!

• dangerouslySetInnerHTML
  웹 에디터의 원리는 필요한 부분에 적절한 HTML 태그를 자동 삽입하는 방식이다. 그런데 코드에서 HTML을 설정하는 것은 사이트 간 스크립팅 공격에 쉽게 노출될 수 있기 때문에 보안상 위험한 행위이며, React에서는 사용자에게 이를 경고하는 차원에서 속성명을 dangerouslySetInnerHTML라고 설정하였다. 이 속성에서 삽입할 HTML 태그 등을 적용하면 된다.