# React Draft Wysiwyg

yjlim0428

텍스트 에디터를 사용할 일이 생겨서 라이브러리들을 비교해 봤다. 서치하면서 가장 많이 보였던 라이브러리는 draft와 quill였고 jodit도 사용하기 괜찮을 것 같아서 후보에 넣었다. npm trends에 다운로드 수를 비교해보면 quill이 압도적이진 않지만 높게 나와있다.. 주간 다운로드 수 : draft > quill > jobit 크기 : quill < draft < jodit - draft (react-draft-wysiwyg) 리액트를 기준으로 개발됨(이미지 업로드 기능 추가됨) 값이 객체로 반환되는데 이를 view에 표시하기 위해선 추가로 라이브러리를 설치해야한다. 사용도가 높은 만큼 구글링 검색이 쉽다. - quill.js 순수 js로

kimareum

오늘 수업의 요약 ! 오늘은 웹에디터에 관해 배웠습니다. 웹 에디터는 많은 종류가 있었죠! React-draft-wysiwyg와 React-quill 이 대표적이였고, 그 중 우리는 React-quill을 사용했습니다! React-quill을 설치하고 연결시켜주는데 중요한 포인트가 있었죠! React-quill의 css 부분도 함께 import 시켜주어야했던 점! 그리고, dompurify 또는 react-quill 등의 라이브러리를 사용하기 위해 react와 next의 구조적인 차이를 이해해야할 필요가 있었습니다. Next의 작동 특성! Browser에 화면을 그려주기 전 Front-end 서버에서 한번 그려준다고 했었죠! next는 서버사이드렌더링(SSR)을 지원하는 react 전용 서버사이드 프레임워크이기 때문에, 프론트엔드 서버에서 먼저 한 번 그려지고, 브라우저에서 다운로드 받은 html, css, javascript를 다시 한 번 그리게

cube823

NextJs 를 쓰다보면 잊을만할 때쯤 'window is undefined' error 를 만날 수 있다. 이는 window 객체를 전혀 활용하고 있지 않을 떄도(않다고 생각하고 있을 때도) 마주할 수 있기 때문인데 브라우저에서만 동작하도록 개발된 library 사용이 그 범인일 확률이 높다. 이번 현장엔 react-draft-wysiwyg 가 있었다. react-draft-wysiwyg는 페이스북이 개발한 draft-js 를 기반으로 작성한 오픈소스 에디터로 미리 만들어져 있는 css를 import해 손쉽게 커스텀이 가능한 이점을 가지고 있다. 그러나 앞서 말했듯이 빌드타임에서 불러오는 것이 불가능하기 때문에 NextJs에서 제공하는 dynamic module을 활용해 런타임에서

cookncoding

어제도 작성을 못해서 이틀치 작성을 한다,,, ㅠㅠ 한게 많은데 내일 일정이 일찍 있어서 간단히 작성한다ㅠㅠ 👉 오늘 한 일 프로젝트 개발(10.28~29) 문서작업(10.28) 멘토링(10.29) 👉 공부한 내용 프로젝트 개발을 하면서 에디터를 적용해야해서 검색을 했는데 React Draft Wysiwyg가 유명하다고 해서 적용을 했다. 하단에 참고한 블로그들을 작성했다. 예제도 많고 구현도 잘해주셔서 많은 도움이 됐다. 프로젝트 개발을 하는데 디자인 나온것들을 급하게 만들었다,, 아직 만들어야하는 화면이 더 있어서 빠르게하고 API 연동, 테스트를 진행해야겠다. 멘토링(29일)을 진행하면서 S3, CloudFront 설정을 배웠다. 멘토님께서 차근차근 알려주셔서 설정을 잘 했는데 내가 개발한 프로젝트는 에러가 났다 ㅠㅠ 검색해서 수정을 해봐야겠