[리액트] 마크다운 에디터 'react-md-editor' 설치 및 적용 방법 (feat. front)

Summary

1. React 마크다운 에디터 설치

yarn add @uiw/react-md-editor

 

2. Editor 작성 컴포넌트

import MDEditor from "@uiw/react-md-editor";

const Editor = (props) => {
  return (
    <MDEditor
      height={350}
      autoFocus={false}
      value={props.content}
      onChange={props.contentChange}
    />
  )
}

export default Editor;

 

에디터 작성 화면

 

3. 마크다운 뷰 컴포넌트

import MDEditor from "@uiw/react-md-editor";

const NoticeView = (props) => {  
  return (
    <MDEditor.Markdown
      height={500}
      value={props.content}
      source={props.data.content}
    />
  )
}

export default NoticeView;

Result

- 에디터 작성 화면

에디터 작성 화면

- 마크다운 적용된 뷰 화면

   📝 기울기, 굵기, 이미지 등 적용 사항 정상 동작 확인 ✔️

에디터 작성 통해 전달된 데이터의 마크다운 화면

 

📝 기울기, 굵기, 이미지 등 적용 사항 동작 확인

 

 

CODE 설명

'react-md-editor' 은 리액트의 Markdown 에디터 라이브러리로, 마크다운 언어로 에디터 작성이 가능하고, 실시간 프리뷰 화면을 볼 수 있는 편리한 기능을 제공해준다.

 

공식 문서를 통해 큰 어려움 없이 에디터 설치와 이해가 가능하며 아래 사이트로 접속하면 된다.

https://uiwjs.github.io/react-md-editor/

Markdown Editor for React.

 

1. 리액트 마크다운 에디터 설치 (Feat.에러)

yarn add @uiw/react-md-editor

 

( 에러가 없다면  2번 항목까지 쭉 아래로 내려가면 된다. )

혹시 에러가 뜬다면 현재 node 버전(15.11.0)을 문제 삼아 다른 걸 원하고 있어니 다운그레이드 또는 16.0.0 버전으로 업그레이드를 해주도록한다. 😱 노드 버전 변경에는 다양한 방법이 존재한다. 모듈 n을 통해 현재 node 버전을 변경하던가, 그 단계에서도 에러가 발생한다면 node 프로그램을 전체 삭제 후 재설치하는 방법이 있다.

 

[ Node 버전 변경 ]

1. node js 현재 버전 확인

node -v

 

2. npm 이용 캐시를 제거

npm cache clean -f

 

3. Node 버전을 관리해주는 모듈 n 을 설치

npm install -g n

 

4. 모듈 n을 통해 node 버전 업데이트

n latest      /* 최신 버전 */
n stable     /* 안정 버전 */
n 16.0.0     /* 특정 버전 */
n lts      /* 오랜 기간 안정 사용이 가능하도록 지원하는 버전 */

이 중 마음에 드는 걸로 설치하면 된다.

 

캐시 삭제에서 불확실한 에러가 발생하거나 위 단계가 정상적으로 동작 안될 경우 (혹은 귀찮다면) 제어판에서 node.js를 삭제해주면 바로 끝난다 ! (That's what I want) 이후 재설치 과정을 진행주면 된다.

 

 

[ NODE 재설치 ]

 

노드 삭제 후 원하는 특정 버전으로 재설치를 원한다면 아래 주소로 접속해주자.

https://nodejs.org/ko/download/releases/

이전 릴리스 | Node.js

설치 원하는 버전을 선택했다면 자신의 컴퓨터 사양에 맞는 msi 파일을 다운로드 해주면 된다.

window에서 개인 컴퓨터 사양은 시스템 > 정보에서 확인할 수 있다.

 

 

msi 파일 다운로드가 완료됬다면 실행시켜 모두 기본값으로 Next를 눌러주면 설치가 완료된다.

 

설치 완료된 Node는 cmd 창을 통해 버전 확인이 가능하다.

 

 

 

내가 원하는 node 버전으로 정확히 설치된 것을 확인 할 수 있다.

나의 경우 14.13.1로 설치한 후 다시 16.0.0 으로 버전을 변경하여 에디터 설치를 진행하였다.

 

NodeJS를 깔면 기본적으로 패키지 관리 프로그램 npm이 자동적으로 설치되는데 잊지 말고 yarn도 설치해 주자.

 

npm install -g yarn

 

yarn은 Facebook에서 만든 자바스크립트 패키지 매니저로 npm 위에서 동작하며 npm과 동일한 역할을 수행한다. yarn은 활용하면 더 빠르고, 보안적으로도 뛰어난 js 패키지 관리가 가능하다.

 

서론이 길었고 본격적으로 에디터를 설치해보자.

 

node가 정상적으로 동작한다면 아무 문제 없이 마크다운 에디터가 성공적으로 다운로드 된다.

 

재설치한 노드와 프로젝트 간 버전 호환 맞춰주기

혹시 자신이 제작중인 프로젝트와 재설치한 node가 버전 문제로 갈등을 겪고 있다면 package.json에서 node 실행 버전을 ^16으로 변경해주면 변경된 node 버전으로 정상 동작한다.

 

이제 에디터 설치를 완료했다.

 

물론 대부분 아무런 에러없이 

yarn add @uiw/react-md-editor 한 줄로 모든게 정상적으로 설치되었을 것이다.

 

 

2. 에디터 작성하기 ( 여기에요 여기! ❤)

이제 우리가 설치한 react-md-editor 를 import 해주고 <MDEditor/> 태그 안에 데이터를 전달하고, 속성을 설정해주면 된다.

 

- 에디터 화면 코드

import MDEditor from "@uiw/react-md-editor";

const Editor = (props) => {
  return (
    <MDEditor
      height={350}			// 에디터 높이 지정
      autoFocus={false}			// 커서 자동 설정 지정
      value={props.content}
      onChange={props.contentChange}	// 작성된 데이터 가져오기
    />
  )
}

export default Editor;

여기서 사용자가 작성한 데이터를 받아와 하단의 에디터 뷰 태그로 data를 전달해주면 된다. 

뷰 화면에 출력해야할 data

 

- 데이터 출력 마크다운이 적용된 뷰 화면

import MDEditor from "@uiw/react-md-editor";

<MDEditor.Markdown
	className={styles.text}
	height={500}
	source={data.cont}
/>

 

Markdown 에디터가 아닌 기능 태그 안에 내용을 전달해줄경우

 

<div className={styles.text} dangerouslySetInnerHTML={{ __html: data.cont }}></div>

 

아래와 같이 마크다운 형식이 적용되지 않은 채 내용이 출력된다.

 

이상 마크다운 에디터로 작성 후 데이터 전달을 통해 구현된 최종 뷰 화면이다.

구현된 에디터 뷰 화면 확인

 

Posted by Ang