기능 구현 웹 에디터 - 03. TinyMCE.

• TinyMCE는 WYSIWYG(What You See Is What You Get) 방식의 웹 에디터로, React.js 환경에서 npm을 이용해 패키지를 설치하여 사용할 수 있다.

• TinyMCE를 사용하기 위해서는 먼저 TinyMCE의 공식 홈페이지에서 계정을 생성하고 API키를 발급받아야 한다. 이후 발급받은 API키를 환경변수에 적용하여 에디터를 사용할 수 있다.

• TinyMCE는 기본적으로 무료로 제공되지만, 추가 기능을 사용하려면 유료 플랜을 구매해야 한다. 또한, TinyMCE는 회사의 Cloud 시스템을 거치는 방식과 앱에 독립적으로 배포하는 방식 중 선택하여 사용할 수 있다.

• TinyMCE를 이용해 작성한 글은 DB에 저장하고, 이를 조회할 때는 React의 dangerouslySetInnerHTML 속성을 이용하여 HTML 태그를 적용한다. 이는 웹 에디터의 원리가 필요한 부분에 적절한 HTML 태그를 자동 삽입하는 방식이기 때문이다.