본문 바로가기

리액트27

[React] Toast-UI Editor 게시물 수정 방법(에디터 html/markdown표시) # Toast-UI Editor 게시물 수정 방법(== 에디터에 HTML/Markdown 표시) Toast-UI Editor 로 작성된 HTML/Markdown 문서를 DB에 저장했다가, 글 수정 기능 등을 구현하기 위해 다시 Editor 로 불러와 노출해야 하는 경우가 있다. *** 그냥 HTML이나 Markdown으로 작성된 글을 Viewer로 띄우는 방법은 아래글 참고. [React] Toast UI Viewer 사용 방법: HTML태그, Markdown 표시 뷰어 이 글은 Toast-UI Editor의 "에디터 편집 영역" 에 HTML이나 Markdown을 표시하는 방법을 정리한다. 아래의 코드 한줄이면 끝이다. // 1. HTML을 에디터에 표시 설정 Editor.prototype.getInst.. 2022. 5. 18.
[React] Toast-UI Editor 이미지 파일 서버 업로드 방법 (base64 인코딩 X) # Toast-UI Editor 이미지 파일 서버 업로드 방법 일반적으로 이미지를 관리하는 방식은 첨부 이미지 파일은 서버 디스크에 저장해두고, 해당 경로만 DB에 저장해두는 것이다. 그러나 Toast-UI Editor 에서 이미지를 첨부하면 img 태그의 src에 이미지 데이터 전체가 base64로 인코딩 되어 주입된다. Markdown 의 경우에도 형식은 다르지만 결과적으로 동일하다. 만약 이 상태 그대로 DB에 저장해두면, 레코드 한 줄마다 몇 Mb씩 차지하는 곤란한 상황이 발생할 수 있다. 우리가 원하는 건. 1. 이미지 파일은 서버로 전송하고, 2. 파일이 저장된 경로만 DB에 저장해두고, img 태그의 src 속성값으로 사용하는 것 일 것이다. 지금부터 Toast-UI Editor 에서 첨부한.. 2022. 5. 16.
[React] Toast-UI Editor 이미지 업로드/드래그 첨부 막기 방법 # Toast-UI Editor 이미지 업로드 기능 제거 방법 Toat-UI Editor에서 이미지를 업로드하면, multipart 형식으로 파일 첨부가 되는 것이 아니라 이미지 데이터 자체를 base64로 인코딩하여 img 태그의 src로 주입해버린다. 사이즈가 큰 이미지 파일을 이 상태 그대로 DB에 저장하고 싶지 않다면, 다른 방식을 생각해야 할 것이다. 이 글에서는 Toat-UI Editor의 이미지 첨부 자체를 막는 방법을 정리한다. * 이미지를 첨부 파일로 서버에 전송하는 방법은 아래글 참고 [React] Toast-UI Editor 이미지 파일 서버 업로드 방법 (base64 인코딩 X) 방법은 코드 한줄이다. Editor.prototype.getInstance().removeHook('ad.. 2022. 5. 16.
[React] Toast UI Viewer 사용 방법: HTML태그, Markdown 표시 뷰어 # Toast-UI Viewer 사용 방법 리액트 환경에서 HTML태그나 Markdown으로 작성된 내용을 Toast-UI Viewer 로 표시하는 방법을 정리한다. (너무나 간단하다) Toast-UI Editor 로 작성한 글을 HTML이나 Markdown 으로 "취득"하는 방법은 아래 글 참고. [React] Toast UI Editor기본 사용 방법 1. 설치 - Toast-UI 에디터의 React Wrapper 버전을 설치한다. - Viewer 도 여기에 설치되어 있다. 이미 설치했다면 생략하자. npm install @toast-ui/react-editor 2. 사용 - Viewer 컴포넌트와 CSS를 임포트해주고 - Viewer 컴포넌트의 initialValue 프롭에 표시할 내용을 넣어준다... 2022. 5. 16.
[React] Toast-UI Editor 폰트 컬러(글자 색상) 설정 color-syntax 플러그인 사용 방법 # Toast-UI Editor 폰트 컬러(글자 색상) 설정 플러그인 추가 방법 리액트에서 Toast-UI Editor 사용시, 글자 색깔을 설정할 수 있는 color-syntax 플러그인 사용법을 정리한다. (기본 툴바 옵션에 제공되지 않아, 플러그인을 설치하고 사용해야 한다. 매우 간단하다) - 공식 깃허브: https://github.com/nhn/tui.editor/tree/master/plugins/color-syntax * Toast-UI Editor 자체의 기본 사용 방법은 아래 글을 참고하자. [React] Toast UI Editor기본 사용 방법 1. 설치 - 리액트에서 사용할 경우, @toast-ui/editor-plugin-color-syntax 플러그인을 설치해준다. npm ins.. 2022. 5. 16.
[React] Toast UI Editor기본 사용 방법 # Toast UI Editor기본 사용 방법 리액트에서 Toast-UI 에디터를 사용하는 방법을 정리한다. 공식홈: https://ui.toast.com/tui-editor React Wrapper 깃허브: https://github.com/nhn/tui.editor/tree/master/apps/react-editor 1. Editor 설치 - 리액트에서 사용할 것이므로, toast ui editor의 React Wrapper 버전을 설치한다. npm install @toast-ui/react-editor 2. 컴포넌트 적용 - 컴포넌트와 스타일을 임포트하고, - 일반 컴포넌트 처럼 사용하면서 옵션을 설정해준다. (옵션에 대해선 주석 설명 참고) import { useRef } from 'react'.. 2022. 5. 16.
[React] Toast-UI 에디터 관련 에러: Failed to parse source map # toast-ui editor 사용 관련 에러 해결 방법: Failed to parse source map [ 문제 상황 ] 리액트 환경에서 @toast-ui/react-editor 를 설치 후, Editor 컴포넌트를 사용하면, 별다른 문제가 보이진 않는데...(아직?) 아래와 같은 에러코드가 떠서 개발자의 마음을 심히 불편하게 하는 경우가 있다. [ 에러 코드 ] WARNING in ./node_modules/@toast-ui/editor/dist/toastui-editor-viewer.js Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map from '/node_modules/@t.. 2022. 5. 15.
[React] 리액트v18 버전 다운 에러 해결 방법 : Cannot find module 'react-dom/client' # Cannot find module 'react-dom/client' 에러 해결 방법 [문제 상황] React v18 환경에서 개발을 하다가, 이전 버전(v17 등)으로 다운그레이드 할 경우, 아래와 같은 에러코드를 만나게 된다. [에러 코드] ERROR in ./src/index.tsx webpack compiled with 1 error Module not found: Error: Can't resolve 'react-dom/client' Uncaught Error: Cannot find module 'react-dom/client' [문제 원인] 에러코드에서 설명해주듯이, index.js 파일에서 react-dom/client 모듈을 찾을 수 없기 때문에 발생한 문제다. react-dom/clie.. 2022. 5. 15.
[React] 라이브러리 설치 에러: ERESOLVE unable to resolve dependency tree # Could Not resolve dependency tree 에러 해결 방법 [문제 상황] React 개발시, npm, yarn을 통해 라이브러리를 설치하는데, 아래와 같은 에러코드의 Error가 발생하며 설치가 되지 않는다. [에러 코드] npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! Found: react@18.1.0 npm ERR! node_modules/react npm ERR! react@"^18.1.0" from the root project npm ERR! Could not resolve dependency: npm ERR! peer react@"^17.0.1" from @toast-u.. 2022. 5. 15.

티스토리툴바