게시판 만들기(Toast UI Editor 추가)

이번에는 게시판을 작성해보고자 합니다.

게시판을 어떻게 작성해야 할지 고민을 하면서 구글링을 하는 순간 toast UI라는 디자인이 괜찮은 Editor가 있어 이를 활용하기로 하였습니다.

 

아래와 스크린샷과 같이 

 

https://ui.toast.com/tui-editor

TOAST UI :: Make Your Web Delicious!

우선 설치를 위해서 설치 방법부터 확인을 해보았습니다.

npm install --save @toast-ui/react-editor 명령을 통해서 설치를 하라고 나와 해당 방법으로 설치를 하려 하였으나

react 18.2.0 버전 지원이 되지 않아 설치가 안되어 열심히 구글링을 해보다가 강제 설치를 진행하였습니다.

(사실 react 버전을 낮추려고하다가 계속하여 충돌이 발생하여 저는 버전 원복하고 강제 설치를 하였습니다.)

npm install @toast-ui/editor @toast-ui/react-editor --force

 

저는 이후 에디터가 정상적으로 뜨는지 확인하고자 저는 features.js에 코드를 넣어봤습니다.

import React from 'react';

import { Editor } from '@toast-ui/react-editor';
import '@toast-ui/editor/dist/toastui-editor.css';

function features(props) {
    return (
        <div>
            <Editor 
                initialValue="hello react editor world!"
                previewStyle="vertical"
                height="600px"
                initialEditType="WYSIWYG"
                useCommandShortcut={true}>

            </Editor>
        </div>
    );
}

export default features;

이후 사이트를 확인하니 하기와 같이 잘 나오네요.^^

toast ui editor 설치에 애를 먹어 오늘은 여기까지 정리합니다.